Contact Form 7

Contact Form 7 plugin allows you to use custom markup when creating your contact forms. Chap also includes some CSS to beautify the messages that Contact Form 7 outputs, therefore this theme can be considered compatible with the plugin.

Using shortcodes

Chap Shortcodes can be used to create a good looking and responsive contact form. Chap Shortcodes come with an option to enable the use of shortcodes in Contact Form 7 forms.

Enable shortcodes in CF7
Chap Shortcodes - Contact Form 7
Shortcode
<ui form>
  <field label="Your Name"><text* your-name></field>
  <field label="Your E-mail"><email* your-email></field>
  <field label="Subject"><text your-subject></field>
  <field label="Your Message"><textarea your-message></field>
  <submit class:ui class:primary class:button "Send">
</ui>
Using HTML

Another option to create a good looking CF7 form is by using plain HTML while taking advantage of Semantic UI CSS classes available in Chap.

Semantic UI - Contact Form 7
HTML
<div class="ui form">
  <div class="field">
    <label>Your Name</label>[text* your-name]
  </div>
  <div class="field">
    <label>Your Email</label>[email* your-email]
  </div>
  <div class="field">
    <label>Subject</label>[text your-subject]
  </div>
  <div class="field">
    <label>Your Message</label>[textarea your-message]
  </div>
  [submit class:ui class:primary class:button "Send"]
</div>
Editing Contact Form 7
Displaying the form

To display the contact form the [contact-form-7] shortcode should be placed into post content. The shortcode with the correct ID will be displayed above the form editor.

Example Contact Form 7 shortcode
Shortcode
<contact-form-7 id="123" title="Contact form 1">
AMP behavior

On Accelerated Mobile Pages the form won’t be functional nor displayed so it can be replaced with a button that directs the user to the main website page where the form can be used. To achieve this a button with a CSS helper class .amp-only can be used.

AMP
Shortcode
<contact-form-7 id="123" title="Contact form 1">
<button primary (((chap-mark-start)))amp-only(((chap-mark-end))) right labeled icon icon="mail forward" url="/contact">Go to contact form</button>
Saving input
Flamingo WordPress plugin

Flamingo is a great plugin that allows to save all Contact Form 7 entries to the WordPress installation database, allowing you to see them even if the mailing function has malfunctioned. All you need to do is install and activate the plugin and then a Flamingo menu item will be displayed in the WordPress admin dashboard, which will contain saved entries from all forms.

Demo forms

Send

<ui form>
  <field label="Your Name"><text* your-name></field>
  <field label="Your E-mail"><email* your-email></field>
  <field label="Subject"><text your-subject></field>
  <field label="Your Message"><textarea your-message></field>
  <submit class:ui class:primary class:button "Send">
</ui>

Send

<ui form>
  <fields two>
    <field label="Your Name"><text* your-name></field>
    <field label="Your E-mail"><email* your-email></field>
  </fields>
  <field label="Subject"><text your-subject></field>
  <field label="Your Message"><textarea your-message></field>
  <submit class:ui class:primary class:button "Send">
</ui>

Send

<ui small form primary segment>
  <field label="Your Name"><text* your-name></field>
  <field label="Subject"><text your-subject></field>
  <field label="Your Message"><textarea your-message></field>
  <submit class:ui class:primary class:button "Send">
</ui>

Order

<ui form inverted segment>
  <field label="Name">
    <fields two>
      <div field><text* first-name placeholder "First name"></div>
      <div field><text* last-name placeholder "Last name"></div>
    </fields>
  </field>
  <field label="Billing address">
    <fields two>
      <div twelve wide field><text* first-name placeholder "Street Address"></div>
      <div four wide field><number shipping-2 placeholder "Apt #"></div>
    </fields>
  </field>
  <field label="Your Message"><textarea your-message></field>
  <submit class:ui class:large class:inverted class:button "Order">
</ui>
Themes

The forms will be styled according to your chosen form and button themes

For more on how to style forms, see Semantic UI – Form.

One response to “Contact Form 7

Leave a comment

Your email address will not be published. Required fields are marked *