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
Shortcode
Chap Shortcodes – Contact Form 7
<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.

HTML
Semantic UI – Contact Form 7
<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.

Shortcode
Example Contact Form 7 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.

Shortcode
AMP
<span amp-invisible>
  <contact-form-7 id="123" title="Contact form 1">
</span>
<button primary amp-only right labeled icon icon="mail forward" url="/contact">Go to contact form</button>

Submit button

While the default CF7 submit shortcode can use Semantic UI classes, such as:

Shortcode
<submit class:ui class:primary class:button "Send">

there is no way to create more advanced Semantic UI buttons (with icons or labels) using it.

How ever, it’s possible to submit the form with a regular button[type="submit"] so instead of using the CF7’s [submit] shortcode for the button, a Chap shortcode with CF7 classes can be used instead:

Shortcode
<button primary right labeled icon wpcf7-form-control wpcf7-submit type="submit" icon="send">Send</button>

Although this approach may have issues with other Contact Form 7 addons or advanced features that rely on the presence of the actual CF7 submit button, which is an input[type="submit"] not a 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.

JavaScript
Compatibility code for Chap Theme -> Code -> Global JavaScript
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
Shortcode
<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
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.

Asset optimization

By default Contact Form 7 loads the CSS and JS assets on every page, regardless of whether or not it contains a form. If your site only has 1 form on a contact page, then it’s recommended to disable loading these assets on other pages.

This can be achieved by adding an action to child theme’s functions.php that determines when the assets should be loaded:

PHP
/**
 * Disable Contact Form 7 assets on non-contact pages.
 */
add_action('wp', function() {
	if(!in_array(get_the_ID(), [20])) {
		add_filter('wpcf7_load_js', '__return_false');
		add_filter('wpcf7_load_css', '__return_false');
	}
});

The above snippet prevents loading the CF7 assets when the current page ID is not 20. This value should be changed to your page ID, and additional ID’s can be added to the array. Additionally other conditionals can be used to determine when the assets should be unloaded, such as is_single() or is_page(), by modifying the if statement.

It’s also possible to unload Google reCAPTCHA (v3) assets with the following lines:

PHP
wp_dequeue_script('google-recaptcha');
remove_action('wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts');

but it’s questionable whether it’s wise to do that, because v3 reCAPTCHA may monitor user activity on other pages to determine whether or not the client is a bot.

Demo forms

Send

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>

Send

Shortcode
<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

Shortcode
<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

Shortcode
<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.

2 responses to “Contact Form 7

Leave a comment

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