Take Your Brick & Mortar Business Online
Designing Your First Exit-intent Subscription Form To Start Collecting Emails
Course Progress
Learn how to increase your conversions and turn lookers into buyers by creating one of the most powerful and well-timed tools in an e-store’s arsenal.
Hello! Welcome to our fifth video of how to take your brick and mortar business online. In this video, I will show you how to create a beautiful, stylish and effective exit-intent popup without any coding skills.
An exit-intent popup is one of the most powerful and well-timed tools in your eCommerce marketing arsenal.
It’s a popup that appears when a visitor attempts to leave your e-store, with the ultimate purpose of convincing them not to leave. It’s your last effort to collect their emails and it can include an offer they can’t refuse such as a discount code.
The message and graphic of the exit popup can be customized based on the page the user is viewing.
Let’s start creating an exit-intent popup with a discount code for your online store!
From your Moosend account click on the Lead Generation tab.
Select the Subscription Forms tab and then click on Create New.
Choose the type of subscription form you wish to create and click on the Create button located next to it.
For this tutorial, we will use the Modal Pop-up type. Type in a name for your subscription form, then click Next to continue. This is for internal use only.
When you’re done click Next.
Click on the Take me to the Designer button to start designing your subscription form.
You will be redirected to our Template Library.
Browse the templates to find the one that suits you best and click Use Template. Now, you can use our Editor to style it as you wish to match your brand and campaign.
In General Settings, you can customize everything. Content Width, Content border-radius, Border Width, and Border Color.
You can also decide what you want to do with Closing Options of your form.
By clicking on the text of the form the Text Settings appear and from here you can style your text by changing the font, size, and color.
By clicking on the field area of the form the Form Settings appear on your left and from here you can change things like the Background Color, Form Width, Form Type, Borders, Color and Padding.
You can click on the On Submit field and select what happens after a visitor submits your form.
You can see the choices from the dropdown menu appearing. We will select the Display Success/Error message. You can style that text too, or change it entirely.
Click the Preview message to see how it looks in the form. Then, select the mailing list to which your new subscribers from this form are added.
You also have the option to add new Custom Fields to your Form Element if you want to. On the Form Settings, click on the Edit Custom Fields button.
Choose one or more of the available custom fields in the pop-up which appears, by toggling their respective sliders to the right.
Click the asterisk to the right of each custom field, if you want to make it required for this form.
To create a new Custom Field, click on the Create Custom Field button at the bottom left of the pop-up.
Fill in the necessary details. You will have to add the following details:
Name, Data Type and whether this Custom Field will be Required, or Hidden, which means that you can later decide if you want to activate it by toggling its slider.
Keep in mind that the custom field you will create here, will also be created in the mailing list you selected to connect your form with.
Always remember to add a placeholder text, for every new custom field you create, as this is what appears on your Form Element.
To rearrange the fields order click and hold on the dots on the left to drag them where you want.
Going back to the Form Settings, you can find all elements of the form you want to adjust. For example, you can change the color of the Subscribe button.
To customize the rest of the design, click on the Elements at the top, and open the settings of each element, clicking on its right, to customize it.
For example, you can change the image settings, or replace the image from the Image Picker.
Go back to your structure and click general settings to discover all the adjustments and customization that you can do, to create a unique pop-up form for your needs!
To edit the Mobile version of your subscription form, simply switch to the mobile form view by clicking the Mobile Form button located towards the top of your Designer page.
Once you’re happy with your design click Preview to see how it looks on different devices and make any further adjustments if needed.
When you are ready, click on the Proceed to Next Step button.
A pop-up window appears, asking you to confirm that you wish to continue to the next step. Click Ok.
Now it’s time to set the Visibility Settings of your form.
Select Upon Exit, as you want the subscription form to be displayed when someone is about to leave the checkout page.
You will need to specify the amount of time that needs to have passed since the visitor last viewed the form.
You can also choose if you want to hide the subscription form entirely from visitors who have already submitted it.
In Advanced Conditional Visibility Settings, you can set more rules for showing or hiding your form.
If you want the pop-up to appear when someone is about to exit the Cart page and not every page, you should define it here.
Click on the Conditional rules for showing the form tab. Specify if the form should be displayed when All or Any of the criteria are present, using the drop-down menu.
Use the Add rule button to add the rules you wish, and fill in the relevant fields to define them.
You have the following options:
URL Path, Cookie, Country, Device Type, Operating System.
Choose URL Path. In the second field, choose ends with to form your rule. In the last field paste the last section of the Url of your Cart page.
It is usually something like /cart/, but make sure you check yours because every website Url is different.
To set rules for hiding your form, click on the Conditional rules for hiding the form tab and define the rules in the same fashion. When you are ready, click next.
In the Publishing step, you can automatically publish your form If your website is connected with your Moosend account.
You only need to switch the Publish on my Moosend Website option to On and select your website from the drop-down menu.
Keep in mind that In order to see your Website here, it has to be verified.
Here you can see a summary of your subscription form content and setup.
Check one more time to see if anything is missing from your subscription form.
If everything looks good, click Publish and visit your website to see how it works.
That’s it! Your exit-intent popup is all set and ready to turn visitors into sales.