Follow

Installation Contact Form 7

Before you start

In order to use this integration in WordPress, you will need to have Contact Form 7 plugin version (at least) 5.0.0 and CleverReach® WordPress plugin installed.

Also, CleverReach components won’t be visible in Contact Form 7 forms until the initial synchronization is completed.

Integrations overview

On the CleverReach plugin dashboard page, there is a new section dedicated to integrations with other plugins within WordPress. For now, there is only the Contact Form 7 integration. This section shows the status of the Contact Form 7 plugin (whether it is installed or not) and gives the user the possibility to click on the plugin name and be taken directly to the plugin page on WordPress where this plugin can be downloaded and installed in the user’s WordPress site.

image7.png

 Once the Contact Form 7 plugin has been installed and activated on the site, this status will change.

image1.png

Contact Form 7 Plugin

Contact Form 7 is one of the most widely used WordPress plugins with more than 5 million active installations and more than 100 million downloads. 

CF7 can manage multiple contact forms, plus it allows to customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. Some of the main Contact Form 7 features are:

  • Create and manage multiple contact forms
  • Easily customize form fields
  • Use simple markup to alter mail content
  • Insert forms into any pages or posts using Shortcode
  • Plugin supports Akismet spam filtering, Ajax-powered submitting, and CAPTCHA
  • Lots of third-party extensions to add additional functionality

The current version of the Contact Form 7 plugin is 5.1.2. 74% of all active users use a later version than 5.0.0.

Contact Form 7 allows the user to edit the templates of contact forms and mails (mail headers and message body) with various “tags.” In the terminology for Contact Form 7, tag means a tiny formed string of type enclosed in square brackets ([ ]).

Tags for forms and tags for emails look different from each other, for example, [text* your-name] can be used in form and [your-name] can be used in emails. They each have a different syntax.

 image3.png

Type is the most important factor, as it defines what type of HTML element will replace itself, and what kind of input is expected through it. Name is used for identifying the input field. Most form tags have a name, but there are exceptions. Options specify details of behavior and appearance. These are optional.

Form editing

Contact Form 7 forms can be accessed by going to “Contact > Contact Forms”. This opens a page which displays all contact forms created using this plugin. By default, one contact form will already be created. Every form has a shortcode which helps inserting a particular contact form to any page in WordPress.

image10.png

Once the user chooses a form to edit, a new page opens up with some default fields for contact details, such as email, name, subject and message. There are also tags which help insert a concrete field into the contact form.

Apart from other tags which come with the Contact Form 7 plugin, there is also a CleverReach Sign-Up field tag (1) that adds a newsletter checkbox to the contact form. In the tabs section above, there is a CleverReach settings tab (2) which allows the user to configure how the recipients that have signed up using the contact form are being synchronized to CleverReach.

image2.png

Sign-Up Field

Once the user clicks on the CleverReach Sign-Up field tag, a pop-up window appears, showing newsletter checkbox settings.

There are multiple configurable values at this point.

  • Label which determines the text that will be displayed next to the newsletter subscription checkbox (default text is “Subscribe to newsletter”)
  • Pre-select checkbox option which specifies whether the checkbox will be automatically preselected (by default it won’t be preselected)
  • ID attribute which specifies the ID of the checkbox, used for CSS selectors (empty by default)
  • Class attribute which specifies the class of the checkbox, used for CSS selectors (empty by default)

The last two options are universal for all Contact Form 7 fields and are dedicated to advanced users.

At the bottom of this window, there is a shortcode that is regenerated every time some of the configuration values are changed.  This shortcode will be inserted at the specified position in the contact form when the “Insert Tag” button is clicked.

This is the pop-up window with all the above mentioned elements:

image5.png

Once the user configures the field and clicks on “Insert Tag”, the shortcode is inserted in the contact form.

 image8.png

It is possible to add multiple CleverReach Sign-Up fields to the same contact form.

Once the user saves their contact form and inserts it to any page on their WordPress site, the CleverReach Sign-Up field will be visible among other fields in that contact form.

image4.png

Settings Tab

Inserting the CleverReach Sign-Up field is one step of the process. In order to specify how the recipient that subscribes to the newsletter through this form is synchronized to CleverReach, the user should configure settings related to Contact Form 7 integration by clicking on the CleverReach tab in the contact form editor. This opens up settings that initially have only one option - to enable the recipient synchronization.

image9.png

If this is disabled, no recipient that subscribes through this contact form will be synchronized to CleverReach.

When the user chooses to enable the recipient synchronization and saves that change, additional configuration options will become available.

image6.png

 On this extended settings page, there are some additional options:

  • Double opt-in form - Lists all CleverReach forms connected to the integration “WordPress” list. Default option is the automatically created “WordPress” list which includes Double-Opt-In. If you select “None”, recipients won’t get a confirmation email before being subscribed to the newsletter. Please note the legal situation in your country, whether you want to use Single-Opt-In or Double-Opt-In. We suggest the use of Double-Opt-In to act GDPR compliant.
  • Recipient tags - A comma-separated list of tags that will be added to every recipient that subscribes through this contact form.
  • Attribute mappings - Maps all the fields in the contact form to CleverReach attributes. These mappings are used when the recipient is synchronized to CleverReach. If multiple CF7 attributes are mapped to the same CleverReach attribute, these values will be concatenated and sent together. The only exception are “birthday” attributes which do not support concatenation.

When the synchronization is enabled, the CleverReach plugin will automatically try to detect email address fields within the CF7 form.

  • If at least one email address field is detected and the recipient synchronization is enabled in the settings tab, a new recipient will be created on the CleverReach side for each detected email address field.
  • Otherwise, if the email address field is not detected, the plugin will skip the synchronization.

 When a CleverReach sign-up field is present in the form:

  • If the sign-up field is checked, the recipient will be sent as active and if the double opt-in form has been selected, the recipient will get a double opt-in email to confirm their newsletter subscription. Once the recipient confirms the email subscription, the tag "Subscriber" will be added to that recipient in CleverReach.

Otherwise, when the sign-up field is present, but not checked, the plugin doesn’t do anything.

Have more questions? Submit a request

Comments