Contact Forms in Osmosis

With this element, you can simply use any Contact Form 7 you’ve created. When using the Contact Form, the default layout is to have one field per row.
However, you can have multiple fields in the same row by adding some HTML markup. For example:

With Columns One Third / Three fields in the same row
<div class="grve-one-third">Your Name (required) [text* your-name]</div>
<div class="grve-one-third">Your Email (required) [email* your-email]</div>
<div class="grve-one-third grve-last-column">Subject [text your-subject]</div>
[textarea your-message]
<p>[submit "Send your message"]</p>
With Columns One Half / Two fields in the same row and centered submit button
<div class="grve-one-half">Your Name (required) [text* your-name]</div>
<div class="grve-one-half grve-last-column">Your Email (required) [email* your-email]</div>
[textarea your-message]
<p class="grve-align-center">[submit "Send your message"]</p>
With Icons and Columns
<p class="grve-one-third grve-with-icon"><i class="fa fa-user"></i>[text* your-name placeholder "Your Name"] </p>

<p class="grve-one-third grve-with-icon"><i class="fa fa-pencil"></i>[text* your-name placeholder "Your Subject"] </p>

<p class="grve-one-third grve-last-column grve-with-icon"><i class="fa fa-envelope"></i>[email* your-email placeholder "Your Email"] </p>

<p>[textarea your-message placeholder "Your Message"] </p>

<p class="grve-align-center">[submit "Send your message"]</p>

Related Articles