Wordpress Contact form 7 html integration problem

Question

I already asked this question before but this time with different html tag "input"

I change everything but no CSS 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:

Are there any solutions to applied CSS On the form with Contact Form 7?

Answer 1

You need to wrap your columns inside a row. The sum of the columns in a particular row shouldn't be greater than 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>