Issue with integrating Contact Form 7 HTML into Wordpress

I've revisited this question with a new "input" HTML tag

Despite changing everything, CSS still isn't being applied.

HTML Code : 

<form action="#" class="contact-one__form row">
                <div class="col-lg-6">
                    <input type="text" placeholder="First name" name="fname">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <input type="text" placeholder="Last name" name="lname">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <input type="text" placeholder="Email address" name="email">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <input type="text" placeholder="Phone number" name="phone">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-12">
                    <textarea name="message" placeholder="Write message"></textarea>
                    <div class="text-center">
                        <button type="submit" class="thm-btn contact-one__btn">Submit Now</button>
                    </div><!-- /.text-center -->
                </div><!-- /.col-lg-12 -->
            </form>

The result:

My Contact Form 7 Integration: 

<form action="#" class="contact-one__form row">
                <div class="col-lg-6">
                    [text* nomcontact placeholder "Nom"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    [text* prenomcontact placeholder "Prenom"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    [email* emailcontact placeholder "Adresse Email"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    [tel* telcontact placeholder "Numero de Telephone"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-12">
                    [textarea* textarea-contact placeholder "Votre Message"]
                    <div class="text-center">
                        [submit class:thm-btn class:contact-one__btn "Envoyer"]
                    </div><!-- /.text-center -->
                </div><!-- /.col-lg-12 -->
            </form>

The Result when I integrate WordFence 7:

Is there any way to apply CSS to the form using Contact Form 7?

htmlcsswordpresscontact-form-7

Answer №1

Make sure to enclose your columns within a row element. The total number of columns in a single row should not exceed 12.

<form action="#" class="contact-one__form row">
  <div class="row">
    <div class="col-lg-6">
        [text* nomcontact placeholder "Nom"]
      </div>
      <div class="col-lg-6">
        [text* prenomcontact placeholder "Prenom"]
      </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
        [email* emailcontact placeholder "Adresse Email"]
      </div>
      <div class="col-lg-6">
        [tel* telcontact placeholder "Numero de Telephone"]
      </div>
  </div>

  <div class="row">
    <div class="col-lg-12">
        [textarea* textarea-contact placeholder "Votre Message"]
        <div class="text-center">
          [submit class:thm-btn class:"contact-one__btn" "Envoyer"]
        </div>
      </div>
  </div>
</form>

Answer №2

The Contact Form 7 plugin creates its own unique HTML layout. To view this layout, you can use the browser's inspector. One option for customization is to apply CSS styles to the generated HTML structure. Alternatively, you have the option to prevent the auto-generation of p tags by adding a simple code snippet to the functions.php file.

add_filter('wpcf7_autop_or_not', '__return_false');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

persistently drifting towards the right despite the absence of direction

Why is the adminbox floating when no command is present? The fixed div center is not functioning properly .adminbox { width: 200px; height: 17px; margin-top: 20px; padding: 20px; font-size: 12px; ...

jqueryhtmlcss

What's causing Angular to not display my CSS properly?

I am encountering an issue with the angular2-seed application. It seems unable to render my css when I place it in the index.html. index.html <!DOCTYPE html> <html lang="en"> <head> <base href="<%= APP_BASE %>"> < ...

javascripthtmlcssangulartypescript

What changes should I make to my save function in order to handle both saving and editing user information seamlessly?

My goal for the save function is to achieve two tasks: 1. Save user in table - Completed 2. Update user in table - In progress Save function snippet: var buildUser = function () { $('#save').click(function () { var newUser = {}; ...

javascriptjqueryhtml

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...

csshrefvertical-alignment

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

Gaining a comprehensive understanding of media queries

Hello everyone, I need some help with media queries. I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media quer ...

htmlcssmedia-queries

Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...

htmljquerycss

Concealing a child component when hovering over its parent element with styled-components

I have a react component structured like this - const MyComponent = () => ( <ContainerSection> <DeleteButtonContainer> <Button theme="plain" autoWidth onClick={() = ...

javascriptcssreactjsstyled-components

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured. My goal is to assign the font color based on the background difference. I vaguely remember s ...

css

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

A guide on implementing a Material UI table to display one row at a time on each page

I'm currently working on incorporating a Material UI table to showcase content with just one row per page. After successfully loading the page and displaying the first row, I encountered an issue where navigating to subsequent pages does not render a ...

cssmaterial-ui

I'm having trouble making the colors change on my Icon font/sprite rollover

I am currently attempting to position some related icons above my main navigation menu. The goal is to change the text and icon colors when a user hovers over a specific area (the tag with large padding). Unfortunately, I am facing challenges in achieving ...

htmlcsscss-sprites

Is it possible to link an HTML select element to a changing array in JavaScript?

Let's say I have an empty HTML select element. <select id="options"> </select> Can I link a JavaScript array to this select so that when the array is modified, the select options update accordingly? Alternatively, do I need to resort to ...

javascriptjqueryhtml

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

I am currently exploring options to access a webpage, execute JavaScript functions on it (thus altering the HTML content), and eventually save the modified version of the page. I'm uncertain if this approach is feasible, and if not, are there alternat ...

javascriptphphtml

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

What steps are involved in developing a content management system similar to WordPress that can be easily set up within an

My apologies for any language barriers. I am interested in learning how to develop a content management system (CMS) similar to WordPress, which users can install on their own hosting. Basically, I want to create a user-friendly CMS that can be distribut ...

node.jswordpressexpresscontent-management-system

Dynamic div with height controlled by the content of the background image

I'm trying to figure out how to make a div with a background image of 100% width always maintain the aspect ratio of the image for its height. Is there a way to achieve this? In simpler terms, when I resize the page, I want the div to scale down whil ...

htmlcss

Utilizing functions for object creation in JavaScript

Having trouble with creating a function that automatically generates an object and then alerts its properties. Can't seem to get the alerts when I click the button. Any assistance would be appreciated. <html> <head> <s ...

javascriptjqueryhtmlfunctionobject

Setting up CSS Flexbox so that the first child element is the same height as the

I am striving to ensure that when the layout switches to mobile, the image block matches the height of the title and content blocks. The layout is quite complex; it functions correctly in desktop view with the title block at the top full-width. I suspect ...

cssflexbox

Discover the perfect technique to employ insertString for effortlessly adding a new line onto a JEditorPane integrated with HTML functionality

Is there a difference between executing this code: conversationPane.setText(msg + conversationPane.getText()); and this code? conversationPane.setText(conversationPane.getText() + msg); I noticed that the second line does not display the message, but I ...

javahtmljeditorpaneappendtext