Our customers’ feedback and need is always one of our priorities. So, in WeShop, we created a custom element concerning contact forms. You can stylish your contact form as you wish.

To be more specific, there are two elements for the Contact Form 7.

1. Contact Form 7 (Classic)
2. Custom Contact Form 7 (Advanced)

 

1. Contact Form 7

As usual, you select the contact form you have created under Contact > Contact Forms.

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:

Contact Form 2 Columns

<div class="eutf-form">
<div class="eutf-fields-wrapper">
<div class="eutf-one-half">[text* your-name placeholder autocomplete:off "Company Name *"]</div>
<div class="eutf-one-half eutf-last-column">[email* your-email autocomplete:off placeholder "Email *"]</div>
<div class="eutf-one-half">[text your-subject placeholder autocomplete:off "Subject"]</div>
<div class="eutf-one-half eutf-last-column">[text your-subject placeholder "Phone"]</div>
<div>[textarea your-message placeholder "Message"]</div>
<div>[submit "Send your message"]</div>
</div>
</div>

 

Contact Form 3 Columns

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

 

Newsletter Horizontal

<div class="eutf-newsletter eutf-horizontal eutf-style-1">
[email* your-email placeholder autocomplete:off "Your Email (required)"]
[submit "Send your message"]</div>

 

Newsletter Vertical

<div class="eutf-form eutf-newsletter">
<div>[text* your-name placeholder autocomplete:off "Your Name (required)"]</div>
<div>[email* your-email placeholder autocomplete:off "Your Email (required)"]</div>
<div>[submit class:eutf-fluid-button "Join Now"]</div>
<div class="eutf-margin-top-1x">[checkbox* checkbox-62 exclusive "Greatives may contact you about products, offers and news you may like unless you click to opt out"]</div>
</div>

 

Newsletter Vertical 2

<div class="eutf-form eutf-align-center eutf-newsletter">
<div>[text* your-name placeholder autocomplete:off "Your Name (required)"]</div>
<div>[email* your-email placeholder autocomplete:off "Your Email (required)"]</div>
<div>[submit "Join our Newsletter"]</div>
</div>

 

 

2. Custom Contact Form 7

This is the new custom element, the functionality it’s the same but you can stylish it as you prefer.

To be more detailed, the options are the following:

General
First of all, you select which contact form you want to use. Then, you can enter the font size, select the shape, the field’s background, the fields text color, the fields placeholder color, the fields border and the fields border color of your inputs.

Focus
Here, you have the same options as above, but it concerns the stylish of the inputs when you click on an input.

Button
In this field, you can select the type, the color, the size and shape of your buttons.

Note that if you need columns layout, you still have to use HTML markup under Contact > Contact Forms where you create your forms. Just use the classes you can see in Contact Form 7 samples.