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:

https://i.sstatic.net/IFSZV.png

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:

https://i.sstatic.net/08lx5.png

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

Displaying an error or success message upon submitting a form is currently not functioning as

I have implemented a registration/login system on my website, and currently, it shows errors and success messages at the top of the page. I want to display these messages under the form instead. However, every time I attempt to place them below the form, i ...

phphtmlforms

Using AJAX to delete items from the personalized shopping cart on your WooCommerce website

I am encountering an issue with removing products from the cart. Although my code successfully removes the product in ajax, it fails to refresh the cart. Here is the code snippet I am working with: add_filter('woocommerce_add_to_cart_fragments', ...

phpjqueryajaxwordpresswoocommerce

Error 403 occurs after submitting the form

Recently, I encountered a 403 error when attempting to submit the form on this page. Interestingly, when I directly accessed the new page by typing the URL into my browser, it loaded without any issues. The PHP code in the initial page looks like this: & ...

javascriptphphtmlforms

The function has exceeded the time limit of 60000 milliseconds. Please make sure that the callback is completed

Exploring the capabilities of Cucumber with Protractor has been an intriguing journey for me. As I delved into creating a feature in Gherkin language, outlining the steps and scenarios necessary for my end-to-end tests, a new world of possibilities opened ...

javascripthtmlangularcucumber

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

I've set up a page layout with two columns, one fixed and the other scrollable. The left column is fixed (containing Google ads) and stays in place as I scroll down the page. The right column displays posts and scrolls along with the rest of the con ...

javascriptjqueryhtmlcssposition

"Gone in a Scroll: Div vanishes as page moves

Fiddle: http://jsfiddle.net/ud6hejm6/ I was tasked with creating a website for a video game tournament. By opening the fiddle link provided, you can preview the page layout. A central div is featured in the design: <div class="middle teko" id="mezzo"& ...

jqueryhtmlcss

Encourage the user to download and install the ActiveX/.Net Class Library directly from their browser

When I developed a .NET Class Library project that interacts with mshtml.HTMLDocument from JavaScript, everything functioned correctly on my local machine after adjusting permissions in .NET Configuration for Trusted Sites to grant Full access. However, I ...

.nethtmlpermissionsactivexprompt

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

htmlcss

What is the best way to maintain a Photo's Aspect Ratio using just HTML and CSS?

Although I've been a bit slow to get on board with Responsive Design, I finally understand how it works. However, there's one specific issue that has stumped me - something I don't recall ever encountering in my 10 years of website developme ...

htmlimagecss

Is anyone else seeing a mysterious gray outline surrounding the image?

When visiting my website, I encountered an issue with the main menu. Specifically, when hovering over 'Populaire boeken', the first 2 menu items display properly with an image on mouseover. However, there seems to be a pesky grey border surroundi ...

jqueryhtmlcssborder

What is the best way to convert this PHP string into an image?

Is there a way to replace the string "Overview" with an image instead? If it's possible, how can I achieve this? if (empty($lang) || !is_array($lang)) { $lang = array(); } $lang = array_merge($lang, array( 'UCP_MAIN' => 'Ov ...

phphtmlstringimagephpbb3

Can anyone help me with fixing the error message 'Cannot assign to read-only property 'exports' of the object' in React?

Recently, I decided to delve into the world of React and started building a simple app from scratch. However, I have run into an issue that is throwing the following error: Uncaught TypeError: Cannot assign to read-only property 'exports' of o ...

javascripthtmlcssnode.jsreactjs

Make the background extend all the way down to the bottom of the page, whether it scrolls or

I am seeking a solution to have the background extend to the bottom of the page, while accommodating both short and long pages. <html> <body> <div id="container">Container of variable height</div> </body> </htm ...

htmlcss

Is it possible to generate an HTML file without MathML by rendering MathJax/MathML at compilation/preprocessing time?

I am looking for a solution to convert webpages with heavy MathJax (or MathML) usage into ebooks for display on my Kindle, which does not fully support JavaScript or MathML. I am interested in preprocessing the .html files by running MathJax during a com ...

javascripthtmlcssmathjaxmathml

Ways to retrieve the data within the tinymce text editor for seamless submission through a form

I am a beginner with TinyMCE and I am working on integrating the editor into my Laravel project. So far, I have managed to get it up and running, but I am struggling with retrieving the content from the editor and passing it to the controller for database ...

phphtmlmysqllaraveltinymce

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

javascriptjqueryhtmlcss

During the click event, two distinct $.ajax requests interfere and cancel each other out

Here's a dilemma I'm facing: On my webpage, I have implemented two different click events. The first one opens a modal displaying a larger image when you click on a thumbnail picture (similar to Instagram on PC - I created an Instagram clone for ...

javascriptphpjqueryhtmlajax

Displaying content on a click event in AngularJS

I am facing an issue with the ng-show directive not working as expected when a user clicks on an icon. The desired behavior is that the parent div should initially display content, but when the play icon is clicked, the contents of the div should become ...

javascripthtmlangularjs

Tips for dynamically adjusting the color of link text within jQuery Mobile?

When using jQuery Mobile, links are styled according to the theme stylesheet. If you want to change this styling, you can use !important as follows: .glossaryLink{ color: white !important; background-color: #CC8DCC; } I am looking to dynamically cha ...

jqueryhtmlcssjquery-mobile

What is the best way to apply filtering to my data source with checkboxes in Angular Material?

Struggling to apply datatable filtering by simply checking checkboxes. Single checkbox works fine, but handling multiple selections becomes a challenge. The lack of clarity in the Angular Material documentation on effective filtering with numerous element ...

htmlangulartypescriptangular-material