Contact Forms

In order to use avaris contact forms ex: demo, you have to install Contact Form 7 wordpress plugin.

After installing the plugin, a new link will appear in the wordpress dashboard right menu.
Contact Form Link
Click the “Add New” button under the contact menu item.


Now that you’ve added your first contact form, you’ll be redirected to this page where you can edit your contact form.

Start off by adding a title then delete the content in the code area.

Now you’re ready to add one of the pre-styled template of Avaris.

Contact Form instructions


Contact Form Layout

There’s 2 layouts for the contact forms.

  1. Full Width inputs and textarea.
  2. 2 Columns inputs and a full sized textarea.
Full Width inputs and textarea.
<div class="avaris-wpc7 avaris-wpc7-dark">
 <div class="avaris-wpc7-field">
 <label for="your-name">Your Name*</label>
 [text* your-name id:your-name]
 </div>
 <div class="avaris-wpc7-field">
 <label for="your-email">Your Email*</label>
 [email* your-email id:your-email]
 </div>
 <div class="avaris-wpc7-field avaris-wpc7-textarea">
 <label for="your-message">Your Message*</label>
 [textarea* your-message id:your-message]
 </div>
 [submit class:avaris-button class:avaris-button--small class:avaris-wpc7-button-end "Submit"]
</div>
2 Columns inputs and full size textarea.
<div class="avaris-wpc7 avaris-wpc7-compact avaris-wpc7-dark">
 <div class="avaris-wpc7-row row">
 <div class="avaris-wpc7-col col-sm-6">
 <div class="avaris-wpc7-field">
 <label for="your-name">Your Name*</label>
 [text* your-name id:your-name]
 </div>
 <div class="avaris-wpc7-field">
 <label for="your-email">Your Email*</label>
 [email* your-email id:your-email]
 </div>
 </div>
 <div class="avaris-wpc7-col col-sm-6">
 <div class="avaris-wpc7-field avaris-wpc7-textarea">
 <label for="your-message">Your Message*</label>
 [textarea* your-message id:your-message]
 </div>
 </div>
 </div>
 <div class="avaris-pagebuilder-block-button--end">
 [submit class:avaris-button class:avaris-button--flat class:avaris-button--small "Submit"]
 </div>
</div>

Contact Form Styles

After you have decided which layout you need, it’s time to modify it. The form content color can be changed by replacing the following class avaris-wpc7-dark by avaris-wpc7-light . This class allows you to maintain the content colors. In case you have a dark background, it’s wise to use avaris-wpc7-light otherwise use avaris-wpc7-dark .

Also you can choose whether the form have rounded edges or square edges by adding avaris-wpc7-noradius class to avaris-wpc7 .

The submit button has different styles and placement classes.

[submit class:avaris-button class:avaris-button--small class:avaris-wpc7-button-end class:avaris-button--flat "Submit"]

There’s 3 different size:

avaris-button--small / avaris-button--big / avaris-button--full

Also 3 different positioning:

avaris-wpc7-button-end / avaris-wpc7-button-start / avaris-wpc7-button-center

And 3 different styles:

default (requires no class) / avaris-button--flat / avaris-button--ghost

Contact Form Element

The contact form element or the single field can be cloned multiple times to serve your needs.
For example you want to add a new input field in your contact form, simply add the following code:

<div class="avaris-wpc7-field">
 <label for="your-email">Your Email*</label>
 [email* your-email id:your-email]
</div>

The highlighted text is one of contact form 7 shortcodes, simply select one of the elements below the title.

Contact Form elements

When using a non input field element, such as radio buttons, checkboxes or drop-down menu, or using file upload input, add avaris-wpc7-field__static to avaris-wpc7-field.

<div class="avaris-wpc7-field avaris-wpc7-field__static">
 <label for="file-853">Upload*</label>
 [file* file-853 id:file-853]
</div>

You have to manually edit the label, make sure it’s linked to the same name and id of the input as shown in the code above.
Make sure that the input name and id is not used multiple times in a single page.


Contact Form Shortcode

After you’re done editing your contact form, click save then copy the shortcode that will appear under the title into your page.
Contact Form Shortcode

Go to your page and insert the Text/Shortcode block then paste the contact form shortcode into it.