Okay
  Public Ticket #1248838
Contact form 7 on two cols
Closed

Comments

  •  1
    cosmins started the conversation
    July 21, 2017 at 12:52pm

    Hello!


    In my previous theme (Host wind) I use this code to have Contact form in 2 cols:

    <div class="contact-form">
    <div class="row">
    <div class="col-md-6">
    [text* name placeholder "Nume*"]
    </div>
    <div class="col-md-6">
    [email* email placeholder "E-mail*"]
    </div>
    </div>
    <div class="row">
    <div class="col-md-6">
    [tel phone placeholder "Telefon"]
    </div>
    <div class="col-md-6">
    [url url placeholder "Website"]
    </div>
    </div>
    [textarea* message placeholder "Scrieți mesajul aici..."]

    [submit "Trimite"]
    </div>

    But now look like here: http://www.awesomescreenshot.com/image/2676869/7b7a77a0bf919ee3b80e480890334ff7

    Can you provide me please the new code? (I think <div class="col-md-6"> is the problem).


    Many thanks!

  •  2,010
    Ocean replied
    July 24, 2017 at 3:08am

    Hi,

    This is our contact form, this theme doesn't support 2 cols, you have to create by your self.

    <div id="contactform">
  <p><label for="name">Name:*</label> [text* your-name]</p>
  <p><label for="email">Email:*</label> [email* your-email]</p>
  <p><label for="comments">Message:*</label> [textarea* your-message]</p>
  <p>[submit class:button class:radius class:medium "Send Message"]</p>
</div>
  •  1
    cosmins replied
    July 24, 2017 at 6:42am

    Hello!

    If you look in my print screen sent to you, you will see the contact form in two columns.

    From you I want just to know how can I have a normal style, the forms are now attached and without border.

    Thank you!

  •  2,010
    Ocean replied
    July 25, 2017 at 2:32am

    You can add css code here http://www.awesomescreenshot.com/image/868495/cf4c1c5da08b7ecc7e3fc520f49d1229

    #contactform input[type="url"], #contactform input[type="tel"]{ font-size:15px;padding: 5px 10px;height:45px; width:100%; border: 1px solid #d4d4d4; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1); margin:0; }

    .row form .row{ margin: 0 -15px; }

    Then use this:

    <div id="contactform">
<div class="row">
<p class="col-md-6">
[text* name placeholder "Nume*"]
</p>
<p class="col-md-6">
[email* email placeholder "E-mail*"]
</p>
</div>
<div class="row">
<p class="col-md-6">
[tel phone placeholder "Telefon"]
</p>
<p class="col-md-6">
[url url placeholder "Website"]
</p>
</div>
[textarea* message placeholder "Scrieți mesajul aici..."]
[submit "Trimite"]
</div>