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 shortcodes may produce unwanted line breaks (<br>) so you may need to collapse the code to a single line in some places.
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 so it should be hidden and can be replaced with a button that directs the user to the main website page where the form can be used. To achieve this CSS helper classes .amp-invisible and .amp-only can be used. Adding these classes to regular HTML will visually hide the content, while if a shortcode has that class it won’t be rendered at all when applicable.

AMP
Shortcode
<span amp-invisible>
  <contact-form-7 id="123" title="Contact form 1">
</span>
<button primary (((chap-mark-start)))amp-only(((chap-mark-end))) right labeled icon icon="mail forward" url="/contact">Go to contact form</button>
Checkboxes & radio buttons

Contact Form 7 checkboxes and radio buttons are not compatible with Semantic UI out of the box. If you wish to use them then some JavaScript can be used to manipulate them first.

Compatibility code for Chap Theme -> Code -> Global JavaScript
JS
document.addEventListener('chap_ready', function() {
    (function($) {
        $('.wpcf7-checkbox, .wpcf7-radio').each(function() {
            $(this).find('.wpcf7-list-item').addClass('field');
            $(this).find('input[type="checkbox"], input[type="radio"]').each(function() {
                var parent = $(this).parent();
                var label = parent.find('.wpcf7-list-item-label');
                var radio = $(this).attr('type') === 'radio' ? ' radio' : '';
                label.replaceWith('<label>' + label.html() + '</label>');
                parent.replaceWith('<div class="ui' + radio + ' checkbox">' + parent.html() + '</div>');
            });
        });
    })(jQuery);
});

This allows to use checkboxes and radio buttons with the use_label_element option enabled.

Shortcodes
[ui form]
  [fields grouped]
    [field label="Checkboxes" /]
    [checkbox checkbox-27 use_label_element "Option 1" "Option 2" "Option 3"]
  [/fields]
  [fields inline]
    [field label="Radios" /]
    [radio radio-72 use_label_element default:1 "Option 1" "Option 2" "Option 3"]
  [/fields]
  [submit class:ui class:primary class:button "Send"]
[/ui]
HTML
<div class="ui form">
  <div class="grouped fields">
    <label>Checkboxes</label>
    [checkbox checkbox-27 use_label_element "Option 1" "Option 2" "Option 3"]
  </div>
  <div class="inline fields">
    <label>Radios</label>
    [radio radio-72 use_label_element default:1 "Option 1" "Option 2" "Option 3"]
  </div>
  [submit class:ui class:primary class:button "Send"]
</div>


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 *