Our Woocommerce connector allows you to create a newsletter subscription form for your website, whose responses are automatically forwarded to your Probance database.
This tutoriel will explain how to build the form, and how to display it in a page of your website.
1. Build the newsletter subscription form
The content and appearance of the form can be configured in the menu Probance > Optin on your WordPress administration board, in the Newsletter section.
1.1. Fields definition
You can build the form with the following elements and fields :
- Main Title: title of the form (1 in the example above).
- Subtitle: supplementary text after the title (2 in the example above).
- With First Name & Last Name: check this case to fetch the first name and last name (3 in the example above) of the respondent in the form.
- Is required (Name & Last Name): set the first name and last name fields as required
- Display Names same row: display the first name and last name fields on the same line in the form
- First Name: label of the field in the form
- First Name Error Msg: error message displayed under the field when the input value in non-compliant, or the field is left empty at the form validation (if the field is required)
- Last Name: label of the field in the form
- Last Name Error Msg: error message displayed under the field when the input value in non-compliant, or the field is left empty at the form validation (if the field is required)
- Add birthday field: check this case to fetch the birth date (4 in the example above) of the respondent in the form.
- Is required (Birthday): set the birthday field as required
- Birthday: label of the field in the form
- Birthday Error Msg: error message displayed under the field when the input value in non-compliant, or the field is left empty at the form validation (if the field is required)
- Add gender field: check this case to fetch the gender (5 in the example above) of the respondent in the form. This field will be displayed as a selection list. To fill the proposed values, click on Options values.
- Is required (Gender): set the birthday field as required
- Gender: label of the field in the form
- Gender Error Msg: error message displayed under the field when the input value in non-compliant, or the field is left empty at the form validation (if the field is required)
- Add language field: check this case to fetch the preferred language (6 in the example above) of the respondent in the form.
- Is required (Language): set the language field as required
- Language: label of the field in the form
- Gender Error Msg: error message displayed under the field when the input value in non-compliant, or the field is left empty at the form validation (if the field is required)
- The email field (7 in the example above) is included and required by default in the form.
- Email: label of the field in the form
- Email Error Msg: error message displayed when the input value in non-compliant
- Email Empty Msg: error message displayed when the field is left empty at the form validation
The last 3 fields allow you to define the label of the confirmation button, and the form confirmation/error messages.
- Button: label of the confirmation button (8 in the example above)
- Confirmation Message: confirmation message displayed when the form has successfully been submitted
- Error Message: error message displayed when the form can not be submitted
To define a label, click on the Translation button on the right of the element.
Default labels are defined in English, French and Spanish. If your website is available in one or more of those languages, you must modify the values in the EN/FR/ES tabs to replace them with your own labels. You can add a new language by clicking on +.
Click on Save to save your labels, and on Close to go back to the newsletter form configuration page.
The values defined directly in the newsletter form configuration page will only be displayed to visitors whose browser language is not defined in the Translation popup. If your website is in English, French or Spanish, you have to use the Translations popup to define your labels.
Click on Save modifications at the bottom of the page to save your configuration.
1.2. Formatting and appearance
The website style is applied to the form by default, but you can adjust the appearance of each element of the form by clicking on the corresponding Properties button. It open a CSS personalization popup, in which you can change the element html class and add CSS properties to it.
HTML/CSS knowledge is required for this personalization. To keep a good harmony with the rest of the website, we advise to keep those style modifications to a minimum.
The personalization options depend on the element:
- Main title and subtitle : HTML tag (h1, h2, h3, etc.) + CSS font properties
- Labels : CSS font properties
- Input and Button : CSS font/component/hover/focus properties
Don’t forget to click Save modifications at the bottom of the page to save your configuration.
1.3. Optin checkbox
To remain compliant with GDPR opt-in and consent policies, your newsletter subscription form must collect an explicit agreement from the respondent, to receive marketing communications and newsletter on the provided email address.
To activate the optin checkbox in the form, go the Web Elements section in Probance > Optin, and check Display checkbox into “Newsletter” form.
You can modify the label of the optin checkbox in Checkboxes labels, but note that this label is common to all optin checkboxes displayed by our Woocommerce module, and the modification will be applied on all the pages in which the checkbox is activated.
The checkbox will be added at the end of the form: it will allows respondents to confirm that they agree to receive your newsletters.
1.4. Captcha
An anti-spam security is installed by default in the subscription form (honeypot), but you can complete it with a supplementary protecting using reCAPTCHA v3. To use this feature, you must have a reCAPTCHA google account.
Check the reCAPTCHA v3 option to activate the option, and paste the Site Key and Secret Key give by Google in the corresponding fields.
Don’t forget to click on Save modifications at the bottom of the page to save your configuration.
2.Include the form in a page
To include the form in a page of your website, paste the following shortcode where it should appear: [probance_newsletter]
The shortcode can be used several times, to display the form at different places in the website. You can also add parameters to a shortcode to change the content and/or appearance of its form, without changing the form displayed by other shortcodes.
2.1. Add an Opt-in Check
You can condition the display of the form based on the visitor’s current subscription status by adding the check_optin parameter to the shortcode.
When this parameter is set to “true”, the form will be hidden if the visitor is identified as an already opted-in contact, and displayed if the visitor is either unidentified or identified as a non-opted-in contact. When this parameter is set to “false,” the form will be displayed to all visitors.
2.2. Identify the Origin of the Form
The custom_tag parameter allows you to associate a tag with each shortcode to identify which form the contact used to sign-up for the newsletter.
For example, forms sent through the shortcode [probance_newsletter custom_tag="pop-up NL"] will contain the tag “Pop-up NL”.
2.3. Hide/Display fields
You can hide non-required fields in the form by adding the name of the field with the argument “false” in the shortcode.
For example, the code [probance_newsletter gender="false" birthday="false"] will display the following form, in which the gender and birthday fields are hidden :
2.4. Modify the form appearance
You can add style properties to a shortcode, to modify the appearance of form, using two parameters :
- block_style allows you to apply CSS properties on entire banner (Title, subtitle and form content)
- form_style allows you to apply CSS properties on the form (labels, input fields, button, error messages)
For example, the code [probance_newsletter block_style="text-align: center" form_style="padding: 15px; background-color: #3b3b3b; color: #f5f5f5; text-align: left;"] will display :
