How to Use the Mailjet Subscription Form

General Information

Do you want an easy way of allowing your customers to sign up for different marketing newsletters? You can do it by using the Mailjet Subscription Form creation tool included in our module.

Set up the form by choosing the information you will collect, the contact list to add the users to, how and where the form is displayed, which customers can see it, etc.

Setting Up Multiple Subscription Forms

You have the option to create more than one Subscription Form.

This way, for example, you can create a form specifically for your Sales contacts, which will be located only on a designated page, and will be visible to customers with the respective user role. On the other hand, a standard form can be used to subscribe your regular customers to your weekly marketing campaign contact list, available in the footer of all pages and visible by all users.

How to Create a Mailjet Subscription Form

Go into ‘Mailjet Settings’ and select the ‘Subscription Settings’ tab. Then click on ‘Add Mailjet subscription form’.

drupal-img31

You are now in the Subscription Form configuration page. Let’s take a look at the options presented to you.

Title and Description

drupal-img32

Enter a Title for your subscription form. It will be displayed internally in your list of forms.

drupal-img33

In addition, it will be the default form title to be displayed on your website. You can change or remove it when you configure the block display.

The ‘Description’ field allows you to enter a short explanation of the purpose of the form. This is optional - if entered, the description will be displayed on your website below the title.

drupal-img34

Form Settings

drupal-img35

  • ‘Submit Button Label’ - Enter the text that will be displayed on your ‘Subscribe’ button. Filling in this field is mandatory.
  • ‘Form destination page’ - You can enter an address for a landing page after subscription - e.g. a page with information on how to complete the subscription process or a “Thank you!” page. If you leave it blank, after clicking on ‘Subscribe’ the user will remain on the same page.

Subscription Confirmation Email

After clicking on the ‘Subscribe’ button, users will be sent an automatic email, requiring them to confirm the subscription. This email will always include several pieces of information that cannot be edited or removed:

  1. The URL of the website that contains the subscription form.
  2. A button for completing the subscription process, linking to a confirmation URL.
  3. The confirmation URL itself, so users can copy-paste it in the address bar of their web browsers.

The rest of the email content can be edited by using the ‘Subscription Confirmation Email’ fields:

drupal-img36

If you do not enter any information, the default text for the respective field will be displayed.

  • Email Heading Text - Will be displayed above the website URL and subscription confirmation button.

    Default Text

    Please Confirm Your Subscription To

  • Email Confirmation Button Text - Will be displayed on the subscription confirmation button.

    Default Text

    “Click Here to Confirm”.

  • Email Body Text - Will be displayed between the button and the subscription link in the email.

    Default Text

    “You may copy/paste this link into your browser:”.

  • Email Footer Text - the information you want displayed after the subscription confirmation link.

    Default Text

    “Did not ask to subscribe to this list? Or maybe you have changed your mind? Then simply ignore this email and you will not be subscribed”.

  • Thanks,… - Used for the end of the email, before the signature.

    Default Text

    “Thanks,”

  • Owner - the email signature. Usually you would put your company / website name here.

    Default Text

    “Mailjet”

Here is an example of a customized subscription confirmation email.

drupal-img37

Confirmation and Error Messages

drupal-img38

These are the messages your users might receive when attempting to use the subscription form.

  • Confirmation Message - will be shown after a user clicks on the Subscribe button and the subscription confirmation email is sent successfully. You can use the % symbol to include the email address in the message.

    Default Text

    Subscription confirmation email sent to %. Please check your inbox and confirm the subscription.

  • Error. Token verification failed - appears when a user tries to subscribe, but there is an issue with your Mailjet credentials.

    Default Text

    Error. Token verification failed

  • Data type mismatch error - 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. %id can be used to show the field label with the incorrect data format.

    Default Text

    Incorrect data format. Please enter the correct values according to the example of the description in the field: <%id>

  • Subscribe error. Please try again later! - If there was any kind of issue with the form submission, the user will see this error message.

    Default Text

    Subscribe error. Please try again later!

  • The contact % is already subscribed - If the user is already subscribed, this message will be displayed. The % symbol is used to include the email address in the error message.

  • “Thanks for subscribing… ” message - Once the user clicks on the button in the confirmation email and completes the subscription process, this message will be displayed on the landing page.

    Default Text

    You have subscribed successfully! Thank you!

Mailjet List Selection & Configuration

Select the Mailjet contact list the users will be subscribed to, and add fields for the Mailjet contact properties you want included as part of the subscription form.

drupal-img39

First, simply choose the contact list from the drop-down menu.

drupal-img40

Note

You can create new contact lists in the Contacts section of the Mailjet module - go to ‘Mailjet Settings’ → ‘Mailjet’ → ‘Contacts’ → ‘Create new contact list’.

Afterwards select the contact properties you want included in the form. You can choose up to three properties - each selected one will appear as an additional field in the subscription form. All of the fields will be mandatory.

Add JavaScript and CSS Code

You can enter JavaScript and/or CSS code in the respective fields to modify your form design.

drupal-img41

Submit or Delete Subscription Form

Lastly, click on ‘Submit’ to create the form. If you are editing an already existing form, no changes will take place until you click on ‘Submit’.

drupal-img42

If you want to delete a form, respectively, use the ‘Delete’ button.

drupal-img43

How to Edit Your Subscription Form

Once a form has been created, it will appear in the ‘Subscription Settings’ main page. Click on ‘Edit’ to make changes to it, if needed.

drupal-img44

Once you have edited the settings you wanted, click on ‘Submit’ to enact the changes you have made.

Edit Field Labels

Click on ‘Edit Field Labels’ to add or change the labels for the different form fields.

drupal-img45

In our example, we have 3 fields - for first name, last name and email address.

drupal-img46

The labels you select will appear above their respective fields. If no label has been selected, nothing will be displayed.

Click on ‘Submit’ to save any changes you have made.

How to Publish a Subscription Form

You have successfully created your subscription form. Now is the time to publish it - choose where it will be displayed on your site, who is able to see it etc.

From the Drupal admin dashboard select ‘Structure’ and then choose the ‘Blocks’ section.

drupal-img47

Blocks are boxes of content rendered into an area, or region, of a web page - e.g. your header, footer, sidebar etc.

Note

For detailed information on the Blocks functionalities, please visit Drupal’s ‘Working with Blocks’ guide.

From the main Blocks menu you can see all of the blocks configured with the help of the different Drupal modules, and the areas they may occupy. All of the Mailjet subscription forms you have created are included as blocks in the list as well.

drupal-img48

Enabled blocks will be assigned a region within the respective website theme - the number of regions depends on the theme you are using.

To activate a subscription form block, first you need to locate it in the list of disabled blocks. Then from the drop-down menu assign a position for it.

select-region

Alternatively, drag and drop the block to the position you want.

drag-to-region

Scroll down and click on ‘Save blocks’ to save your selection.

drupal-img48a

Configure your Subscription Form Block

By clicking on ‘Configure’ next to the form block you are able to define where the form is displayed on your website, and which users can see it.

drupal-img49

Select Block Title

The information entered here overwrites the title you selected for your form. This way you can use a technical name for your convenience as a Form Title, and choose a Block Title more suitable for your customers.

drupal-img50

Region Settings

If your site is supporting multiple themes, you can specify where (or if) your sub form will be displayed. Themes can have different designs and a varying number of regions for your blocks, so this allows you to set up your form to suit the various designs.

drupal-img51

Visibility Settings

Customize on which pages - and for whom - the sub form will be visible.

  • Pages - select either the pages, where it will be visible, or the ones where it is not.

    drupal-img52

  • Content Types - if your pages are marked with a specific type, you can select the types, for which the form will appear. If none are selected, no restriction based on types will be implemented.

    drupal-img53

    How do I create different content types in Drupal?

    Please visit Drupal’s Content Types Guide for more information.

  • Roles - This gives you the opportunity to choose the customer roles, for which the sub form will be visible. For example, if you have VIP users and want to create a sub form only visible by such users, you can use these restrictions.

    drupal-img54

    How do I create different user roles in Drupal?

    Please visit Drupal’s Guide to Managing User Roles for additional information.

  • Users - Allows the users themselves to choose whether they see the form or not.

    drupal-img55

Remember to click on ‘Save blocks’ to save your settings!

drupal-img48a