Summary
- How does it work?
- Create a Form
- Integrate your form into your website
- Preview Form
- View Form Code
- Troubleshooting
How does it work?
The Mailjet Form Builder consists of a signup form, a confirmation email and a confirmation page. When someone subscribers on your website, a confirmation email with a link to the confirmation page is sent to them. Once they confirm their registration, their email address (and any other information collected via the signup form) is added to your contact list.
The best part? All you need to do is design and customize the form, email and landing page in the Form Builder. Mailjet will generate the code for the signup form and take care of the workflow.
Is your website running on WordPress? You may want to check out Mailjet’s WordPress Plugin which allows you to create a subscription form, manage your contacts, create emails and view real-time stats directly from your WordPress Admin.
Create a Form
From the menu, select Contacts → Form Builder.
Now click the "Create new form" button.
The "Create a new form" page shows the different sections of your form.
As you complete each section, the corresponding checkmark will become green.
Once all sections are completed, you can then publish your newly created inscription form.
- Title: Give a title to your form to identify it in your reports. This is an internal name that only you will see.
- Form design: Create and preview your form.
- Email details: Define the subject line and sender information.
- Email design: You can customize the email (double opt-in) that is sent to new subscribers asking them to validate their subscription to your newsletter. This email will include a button with the link that redirects recipients to the confirmation page.
- Confirmation page: Once someone signs up for your form, they will receive a confirmation email with a link to validate (confirm) their registration. By default, this link leads to the Confirmation Page via Mailjet which you can design in the form editor. If you wish to use your own confirmation page on your website, click "Use External Confirmation Page" and then enter the URL.
- Contact list: Choose where subscriber data will be stored.
Let's get started - click "Design form" to select your form template.
The first step is to decide which type of form you would like to create:
Would you prefer a registration form directly embedded on your website page, or would you rather want the form to pop-up in a new window when a button or link is clicked?
For this example, we will select the "Pop-up" form.
Content Tools
This area covers all the content elements that will appear in your form (text, images, buttons, social sharing, etc).
Adding content is easy - just click on the content block and drag it to the desired area in your form. If you want to move that block, just drag and drop it to the new location.
Click within the frame to customize the element using the toolbar that appears around the frame.
Text
Using the Text toolbar, you can easily format and customize your text block:
- Adjust line heights
- Align text
- Set the background color
- Change Margins
- Format your text (font, bold, italic, etc)
- Select the consent type (Explicit or implicit)
Image
The Image toolbar allows you to:
- Set the horizontal positioning
- Change Margins
- Apply a border (shape) to the image
- Mobile scale-up
- Set the background color
You have two ways to add an image to the section:
- Upload your image or pick an image from your gallery
- Link to an existing image online
For this example, let's upload an image.
Once you click the upload image button, you can drag & drop your image file into the dialog box, or click the "import a file" link to upload your image. You also have the choice to upload an image from an external link.
You can choose to add ALT text to your image. In the event your image cannot be rendered, the ALT text will appear instead. Keep your ALT text short and descriptive, kinda like a tweet. :)
Once you have chosen an image, you can use the Image Tool Editor to crop, resize, rotate, or flip your image.
This also can be done once the image has been saved, by clicking on the image you want to modify and then on the Image Tool Editor button.
Divider
You can add a dividing line to separate sections or elements within a section.
The Divider toolbar allows you to:
- Set the background color
- Change Margins
- Format the line (design, color, weight)
- Adjust the horizontal and vertical spacing
Button
There are many options available in the Button toolbar including:
- Border Radius (set the roundness of the button corners)
- Button border color, weight, and style (solid, dotted, dashed, etc)
- Set horizontal positioning and padding
- Add a hyperlink
- Font alignment
- Adjust the margins
- Personalize the text using contact properties
- Format the font (font family, color, bold, etc).
Spacer
Add a blank space to separate elements or sections within your form. With the Spacer Tool, you can:
- Set the height of the blank space (in pixels)
- Add a background color (optional)
Social Sharing
Add your favorite social icons to your form such as Facebook, Twitter, LinkedIn, Instagram, Youtube...
Click the "Configure links" button to open the Social Media Configuration modal where you can:
- Select up to 10 social media icons
- Modify the label text
- Share the online version of your marketing newsletter to your social media account or set the link to go directly to your social media page.
- Create your own social icon by clicking "Add custom icon"
To show and configure the text labels, click "Display labels".
Click the block options (pencil) to configure the icon size, shapes and color as well as the section background color and padding.
HTML Block
You can add some HTML code directly into your form. Drag the HTML Block to your form, then click on the button from the toolbar to open the HTML editor window and code away!
Video
To add a video to your form, drag the Video tool to the desired location. In the popup modal, add your video URL.
Preview images are automatically generated for YouTube, Vimeo and Dailymotion videos. For all other videos, click "Choose another image" to add your own preview image.
Once the preview thumbnail is created, the default play button will be added. You can choose from several designs for the play button. (Please note, that the play button image will be automatically resized relative to the thumbnail size. Specifically, it will be 50% of the smallest edge (width or height) of the preview thumbnail.)
The last step is to add a simple description of the preview image in the "Image Alt Text" field. This alt text will be displayed in the event your subscriber cannot view the image. Then click "Insert Video".
From the Video toolbar, click the "Video" button to edit your video at any time.
Forms
Collecting additional information (properties) from your subscribers is easy - just click on the form block of your choice and drag it to the desired area in your form. If you want to move that block, just drag and drop it to the new location.
Text
The "Text" form block allows you to add a string data property linked to the subscriber's email. The maximum length of this field is 255 characters.
Available options:
- Set horizontal positioning and padding
- Apply a border (shape) to the image
- Set the background color or image
- Select a contact property
- Set the field as required
- Add a placeholder text (hints)
- Adjust the maximum character limit
Textarea
The "Textarea" form block allows you to add a string data property linked to the subscriber's email (same as the "Text" block), but this time the maximum allowed length of the field is 500 characters.
Available options:
- Set horizontal positioning and padding
- Apply a border (shape) to the image
- Set the background color or image
- Select a contact property
- Set the field as required
- Add a placeholder text (hints)
- Adjust the maximum character limit
Number
The "Number" form block allows you to add an integer or decimal data property linked to the subscriber's email. You can add a custom range and increment limits for this field.
Available options:
- Set horizontal positioning and padding
- Apply a border (shape) to the image
- Set the background color or image
- Select a contact property
- Set the field as required
- Add a placeholder text (hints)
- Set custom range or increment limits
Sections
Duplicate a Section
Click within the section to highlight it, then click the duplicate icon on the right side of the screen.
Delete a Section
To remove a section from your form body, click within the section, then click the trash icon and confirm the deletion.
You can also quickly delete a section or element, by dragging it to the content tools area.
Global Style Settings
With a couple of clicks, easily format the text styles of all your paragraphs, headers and hyperlinks within your form.
To access the global text styles, click on the gear icon in the upper left corner ("Settings" tab).
As the name suggests, the "Global Style" option will set the font family and color for all the elements listed (Headers, Paragraphs, Links).
You can then further customize the styling for each of the Headers, Paragraph and Link elements.
And lastly, if you want to have a different text style for a certain header or paragraph in your form, simply style the text as usual with the section toolbar.
Integrate your form into your website
The last step is to integrate the subscription form HTML code - just copy and paste the code into your website!
Please note: The pop-up form can also be triggered via a hyperlink, image, or any HTML element that can launch a Javascript function.
Preview Form
To preview your subscription form, go to the "Form design" section and click on the pencil icon (edit).
Once you are on the form design page, click the "Preview" button in the upper right corner of the screen.
Your form can be previewed on different devices, such as mobile and desktop.
View Form Code
From the forms management page, click on the gear icon of the form whose code you want to view and select "View Code".
Edit a Form
From the forms management page, click the gear icon and select "Edit".
Please note that after each modification made to the subscription form, you will have to reload the HTML code on your website, so that the modifications can be taken into account.
Delete a Form
To delete a single form, click the gear icon from the forms management page, and select "Archive".
To delete multiple forms at the same time, select the checkbox for each form, then click the "Archive" button.
Troubleshooting
If you have implemented a subscription form on your website, and it has suddenly stopped working, please check that the contact list associated with the form has not been changed or deleted.