Easy Contact Form with 2 Columns

[caseyv22]

Does X come with an easy Element or Shortcode so we can create a 2 column contact us form?

[friech]

Hi @caseyv22,

Thank you for writing in, you can easily create a 2 column row on Cornerstone, and then use the Contact Form 7 plugin for creating your form.

Hope it helps,
Cheers!

[caseyv22]

Thanks however I am looking to have two columns on 1 form:

https://s3.amazonaws.com/fp.strategy11.com/images/knowledgebase/css-layout_2-columns.png

Your screenshot shows 2 columns on the page but I need a form with 2 input boxes on 1 line

[nabeel]

Hi again,

If you’ve already installed a Contact Form 7 plugin, then you can edit your contact form and paste the following code in the editor (see screenshot below):

<div class="x-column x-sm x-1-2">
<label> First Name (required)
    [text* first-name] 
</label>
<label> Your Email (required)
    [email* your-email] 
</label>
<label> Phone Number(required)
    [text* phone-number] 
</label>
<label> City (required)
    [text* city] 
</label>
</div>

<div class="x-column x-sm x-1-2 mrn">
<label> Last Name (required)
    [text* last-name] 
</label>
<label> Address (required)
    [text* address] 
</label>
<label> Zip Code (required)
    [text* zip-code] 
</label>
<label> Subject
    [text your-subject] 
</label>

</div>


<div class="x-column x-sm x-1-1">
<label> Your Message
    [textarea your-message] 
</label>
[submit "Send"]
</div>

As you see I have divided the form fields in two columns by wrapping the fields in two <div></div> tags. So you have the following HTML markup:

<div class="x-column x-sm x-1-2">
</div>

<div class="x-column x-sm x-1-2 mrn">
</div>

You can paste the form fields inside so you can have two columned structure. You can also checkout the following tutorial http://www.wpsnippet.com/creating-responsive-two-column-form-using-contact-form-7/

Hope this helps!

[caseyv22]

Thanks! I started building it.

I came across some spacing issue, I wanted to add a line of text on the left column but now my right column will not align. Any ideas?

[ruenel]

Hello @caseyv22,

To make sure that your input fields will align, you will have to add a gap element on the right side so that it will align to the left side if you add any text before the input field. You can make use of the gap shortcode which can be found here: http://demo.theme.co/integrity-1/shortcodes/gap/

Hope this helps.

[caseyv22]

Hello,

Where would i enter the gap shortcode?

The way im building it is through Contact Forms 7

[ruenel]

Hello @caseyv22,

You can insert the gap shortcode at the beginning of your column.

<div class="x-column x-sm x-1-2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. </p>

   input fields here

</div>

<div class="x-column x-sm x-1-2 mrn">
  [gap size="100px"]

     input fields here

</div> 

Hope this make sense.