Mailjet Widget Setup
Add the Mailjet Widget¶
Now that the Mailjet plugin has been configured, the next step is to add the contact signup form to your website. With it you can easily capture new contacts directly from your site and synchronize them with your Mailjet contact lists.
Please note, you can add more than one signup form on your website, allowing you to collect different subscriber information in various contact lists.
This is done by first selecting ‘Appearance’ → ‘Widgets’ from the main WordPress dashboard menu.
Alternatively, go into your Mailjet Dashboard and click on ‘My Widgets’ under ‘Add a subscription form’.
On the Widgets page, you will see a list of all available widgets on the left-hand side including the ‘Mailjet Subscription Widget’. The sections on the right-hand side are where you tell your WordPress theme to put the specific widget by dragging it over from the left to the appropriate section in the right.
Note
Please note, the number of widget areas is dependent on the WordPress theme you are using.
Another way to add a widget is to click on the widget name and a drop-down menu appears. Then select the desired position and click on the ‘Add Widget’ button.
For this example, the Mailjet Subscription Widget will be added to the Footer 2 area.
Once added to the Footer 2 section, the Mailjet Subscription Widget will expand to show the initial language setup options:
We will now take a closer look at the widget configuration settings.
Note
Please remember that you can ‘Save’ your widget settings at any time.
Widget Language Settings¶
First of all, you need to select the languages, in which this Mailjet subscription widget will be available. The available languages are English, French, German, Spanish and Italian.
Note
If your site is in a language other than the five available ones, then the widget will use the English language settings you have selected.
Tick the checkbox next to the languages you want activated. For each one you will be asked to select the title of the subscription form (optional) and the contact list, to which the contacts will be subscribed (mandatory). Then click on ‘Save’.
Once you have saved your widget language settings, the form will become operational - contacts will be able to submit their emails and subscribe to your contact list. If you want to collect additional information from your users during the subscription process, or customize the form / confirmation email, see the next section for more information.
Advanced Customization Settings¶
Once the basic widget settings have been saved, the ‘Advanced form customization’ option will be activated.
Click on the link and a new pop-in window will appear. Here you can customize your subscription form by adding editing the available fields, content of your validation messages, confirmation email and “Thank You” page.
Note
You can save your settings at any point by clicking on ‘Save’. This will submit your changes and close the pop-in window.
Form Fields¶
In this tab you can customize the fields within the form - the email address field placeholder text and ‘Subscribe’ button text. You can also specify up to 5 additional contact property fields (first name, last name, etc.) that you want shown on your signup form.
Property Fields¶
Under ‘Properties’ you can select up to 5 contact property fields to be part of your subscription form.
First, choose a property from the drop-down menu. You can also create a new one by selecting the ’+ Create new’ option.
If you want to create a new property, you need to select its name and data type as well, then click on ‘Save’.
Note
Boolean property fields will appear as checkboxes in the subscription form. You can use those to create mandatory GDPR agreement checkboxes, for example.
Once the property is selected, choose whether this will be a mandatory, optional or hidden field.
- Mandatory - Contacts are required to fill in the information for this field, otherwise they cannot subscribe. Those fields will be marked with an asterisk in the beginning of the placeholder text (e.g. ”* Enter Your First Name”)
- Optional - Contacts are not required to fill in the information for this field
- Hidden - These fields are not visible in the form. Instead, you select a value to this property and it is assigned to each subscribed contact. For example, this can help identify which form or language the contact subscribed from, if you are using the same contact list for multiple subscription forms / languages.
Finally, select the placeholder text (field label) for each language you activated for this form. In the case of hidden property fields, you need to select the property value for each language instead.
As mentioned, the maximum number of fields (visible and/or hidden) is five. The order you set them up in will determine the order, in which they appear on your website.
Email Address Field¶
You can customize the placeholder text for the email address field in the subscription form. If nothing is entered, the default placeholder text will be used instead - ‘your@email.com‘.
‘Subscribe’ Button Text¶
Choose the text you want to appear on the form submission button. If nothing is entered, the default text will be used instead - ‘Subscribe’.
Form Validation Messages¶
In this tab you can specify the text of the messages that could appear after contacts submit their information via the form.
-
Form successfully submitted - Will be shown after a user clicks on the ‘Subscribe’ button and the subscription confirmation email is sent successfully.
Default Text
Subscription confirmation email sent. Please check your inbox and confirm your subscription.
-
Error: Invalid data format - Will be displayed whenever a user enters data in an incorrect format in one of the form fields. For example, you ask users to submit their age in one of the fields, so they need to enter a number, but instead they enter text.
Default Text
The value you entered is not in the correct format.
-
Generic technical error message - If there was any kind of technical issue with the form submission, the user will see this error message.
Default Text
A technical issue has prevented your subscription. Please try again later.
Confirmation Email Content¶
After clicking on the ‘Subscribe’ button, contacts will be sent an automatic email containing a button, which they need to click on to confirm their subscription. The text of this email can be customized in the ‘Confirmation email content’ tab.
-
Email Subject - The subject line of the confirmation email.
Default Text
Subscription Confirmation
-
Email content: title - The title, with which the email content will begin.
Default Text
Please confirm your subscription
-
Email content: main text - The main text of the email. Will be located above the subscription confirmation button. Use
%s
to enter your website URL in the text.Default Text
To receive newsletters from %s please confirm your subscription by clicking the following button:
-
Email content: confirmation button label - The text in the subscription confirmation button.
Default Text
Yes, subscribe me to this list
-
Email content: text after the button - The text after the subscription confirmation button.
Default Text
If you received this email by mistake or don’t wish to subscribe anymore, simply ignore this message.
‘Thank You’ Page¶
In this tab you can select which web page will open once a contact clicks on their subscription confirmation button. You can use the default Mailjet Thank You page, or use one you have created in WordPress yourself.