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 with different styles in the same row by adding some HTML markup. Check the examples below and have in mind that you can combine anything you need:

With Columns One Third with Round fields

<div class="eut-form eut-fields-round eut-align-center">
<div class="eut-fields-wrapper">
<div class="eut-one-third"> [text* your-name placeholder "Your Name (required)"]</div>
<div class="eut-one-third">[email* your-email placeholder "Your Email (required)"]</div>
<div class="eut-one-third eut-last-column">[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit class:eut-round "Send your message"]</div>
</div>
</div>

Vertical Newsletter Form Type

<div class="eut-form eut-fields-grey-bg eut-fields-extra-round eut-align-center">
<div class="eut-fields-wrapper">
<div>[text* your-name placeholder "Your Name (required)"]</div>
<div>[email* your-email placeholder "Your Email (required)"]</div>
<div>[submit class:eut-extra-round "Send your message"]</div>
</div>
</div>

Underline Style Contact Form

<div class="eut-form eut-underline">
<div class="eut-fields-wrapper">
<div>[text* your-name placeholder "Your Name (required)"]</div>
<div>[email* your-email placeholder "Your Email (required)"]</div>
<div>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit "Send your message"]</div>
</div>
</div>

Contact Form with Icons and Columns

<div class="eut-form">
<div class="eut-fields-wrapper">
<div class="eut-one-third eut-with-icon"><i class="fa fa-user"></i>[text your-name placeholder "Your Name"]</div>
<div class="eut-one-third eut-with-icon"><i class="fa fa-envelope"></i>[email* your-email placeholder "Your Email (required)"]</div>
<div class="eut-one-third eut-with-icon eut-last-column"><i class="fa fa-pencil"></i>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message]</div>
<div class="eut-align-center">[submit "Send your message"]</div>
</div>
</div>

Horizontal Newsletter

<div class="eut-newsletter eut-fields-white-bg">
<div class="eut-fields-wrapper">
<div class="eut-one-third"> [text* your-name placeholder "Your Name (required)"]</div>
<div class="eut-one-third">[email* your-email placeholder "Your Email (required)"]</div>
<div class="eut-one-third eut-last-column">[submit "Send your message"]</div>
</div>
</div>