Display a Contact Form in Two Columns

It is possible to break the Contact Form into two columns using the Columns Shortcodes. This will require that you break the Two Column Shortcode and place each of the tags within the Contact Form’s Shortcodes, in their proper place. You will also need to add extra [raw] tags inside the column shortcode. Note that the bellow is simply meant to be an example. You will need to adjust according to the actual fields you are using for your form. The point here is to simply show you how to use the columns shortcodes within the form code. Please see the code bellow for an example on how this is done for Karma and for Sterling themes.

For the Karma Theme:

 [contact-form subject="" to=""]  [one_half]  [raw] [contact-field label="Name" type="name" required="true" /] [contact-field label="Home Phone" type="text" required="true" /] [contact-field label="Cell Phone" type="text" required="true" /] [/raw]  [/one_half] [one_half_last]  [raw] [contact-field label="Email" type="email" /] [contact-field label="Address" type="text" /] [contact-field label="City/Zip" type="text" required="true" /] [/raw]  [/one_half_last]  [/contact-form] 

Again pay close attention to where Column Shortcode is placed as well as the [raw] tags. This will work best in a Full Width or Side Nav/Sidebar Template. If you must use the Contact (iPhone) Template, you will need to adjust the CSS a bit and make the fields smaller to make them all fit nicely. To do so, simply add the following code to your Custom CSS area in Site Options > Styling Options:

 .contact-form .one_half input[type="text"], .contact-form .one_half_last input[type="text"] {width:240px !important;} .contact-form .one_half textarea, .contact-form .one_half_last textarea {width:280px !important;height:100px !important;} 

(Adjust the CSS as per your specific needs) (click screenshots for full-size view)



For the Sterling Theme:

 [contact-form subject="" to=""] [one_half] [raw] [contact-field label="Name" type="name" required="true" /] [contact-field label="Home Phone" type="text" required="true" /] [contact-field label="Cell Phone" type="text" required="true" /] [/raw] [/one_half] [one_half] [raw] [contact-field label="Email" type="email" /] [contact-field label="Address" type="text" /] [contact-field label="City/Zip" type="text" required="true" /] [/raw] [/one_half] [/contact-form] 

If you see a need to adjust the position of the Submit Button, add the following code to your CuStom CSS area in Site Options > Styling Options:

.tt-form-submit{margin-right:80px !important;}

(Adjust the CSS as per your specific needs) (click screenshots for full-size view)