5.8 Contact Form 7

Useful to add custom forms to the website.

Official documentation: https://wordpress.org/plugins/contact-form-7/

IMPORTANT:

To correctly build contact forms using this theme, follow these rules:

  • Wrap the fields in a div input-field
  • add a “for” to the labels
  • do NOT wrap the field in the labels
  • always add the ID to the fields with same value as the field name
  • add classes to the submit for correct styling

Default fields structure is BAD:

<label>
<input tyle=”text” name=””>
</label>

Example form with correct structure:


<div class="input-field">
[text* your-name id:your-name]
<label for="your-name">First Name</label>
</div>

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

<div class="input-field">
[text* your-subject id:your-subject]
<label for="your-subject">Subject</label>
</div>

<div class="input-field">
[textarea your-message class:materialize-textarea id:your-message]
<label for="your-message">Message</label>
</div>

[submit "Send" class:qt-btn class:qt-btn-l class:qt-btn-primary]

 

Related Articles