Contact Form 7

Contact Form 7 plugin allows you to build contact forms with additional fields. Original plugin documentation is located at http://contactform7.com/docs/.

Form fields with theme styling #

If you want to display form fields with original Zephyr styling (as built-in Contact Form element) you need to use special semantics when editing a form:

1157.png

Just change the underlined value for every new field.

Example of form WITHOUT ICONS (don't forget no_icon class):

<div class="w-form-row no_icon">
    <span class="w-form-row-label">Name *</span>
    <span class="w-form-row-field">[text* text-1]</span>
</div>

<div class="w-form-row no_icon">
    <span class="w-form-row-label">Email *</span>
    <span class="w-form-row-field">[email* email-1]</span>
</div>

<div class="w-form-row no_icon">
    <span class="w-form-row-label">Message</span>
    <span class="w-form-row-field">[textarea textarea-1]</span>
</div>

<div class="w-form-row for_submit">
    [submit "Send Message"]
</div>

Form fields with icons #

You can add icon to every field for better user experience via additional semantics:

1862.jpeg

Change icon name for every field as you want, you can see all icon names at Material Icons or FontAwesome Icons.

Example of form WITH ICONS:

<div class="w-form-row">
    <span class="w-form-row-label">Name *</span>
    <span class="w-form-row-field">[text* text-1]</span>
    <i class="material-icons">accessibility</i>
</div>

<div class="w-form-row">
    <span class="w-form-row-label">Email *</span>
    <span class="w-form-row-field">[email* email-1]</span>
    <i class="material-icons">email</i>
</div>

<div class="w-form-row">
    <span class="w-form-row-label">Message</span>
    <span class="w-form-row-field">[textarea textarea-1]</span>
    <i class="material-icons">create</i>
</div>

<div class="w-form-row for_submit">
    [submit "Send Message"]
</div>

Form fields with static labels #

For some fields (as number slider, dropdown menu, checkboxes, radio buttons, quiz, captcha, file upload) it's better to use static labels which not animate on focus. In this case use following semantics:

1155.png

Example of form WITH STATIC LABELS:

<div class="w-form-row no_icon">
    <label>Select Simple</label>
    [select menu-1 "First" "Second" "Third"]
</div>

<div class="w-form-row no_icon">
    <label>Radio</label>
    [radio radio-1 use_label_element "First" "Second" "Third"]
</div>

<div class="w-form-row no_icon">
    <label>Checkbox</label>
    [checkbox checkbox-1 use_label_element "First" "Second" "Third"]
</div>

<div class="w-form-row for_submit">
    [submit "Send Message"]
</div>