Noptin ships with a realtime WYSIWYG opt-in forms editor built with Vue.js. The editor makes it very easy to design your form and configure its display rules.
You will find a couple of things once you open the editor, as shown in the screenshot below.
By default, the editor is made up of 3 sections:-
The Header Section
This section shows the name of your opt-in form and the action buttons.
You can edit the forms name by clicking on it. This name will not appear on the frontend. Its only purpose is to help you identify the form on the forms overview screen.
The header also contains a couple of action buttons (depending on the state of the form).
- Save As Template – Use this button to save the current design of your form as a template. You can then reapply it on any other form by clicking on it in the templates drop-down menu.
- Preview – This button will only appear if you are editing a popup form. It allows you to preview your form exactly as it will appear on the frontend.
- Switch To Draft – If the form is published (viewable on the frontend), you can unpublish it by clicking on this button.
- Publish – You can use this button to publish your form. Remember, your visitors can not see a form that has not been published.
- Save – Clicking on this button saves the current state of your form to the database.
The Preview Section
This section contains a preview of your opt-in form. Any design changes you make are immediately reflected in the preview.
Below the preview is a status bar that shows you how to display the form on the frontend.
If you have configured your form to be embeddable in a post, the shortcode of your form will appear below the preview.
The sidebar Section
This section contains your form’s basic settings and design options among other settings.
By default, the sidebar section comes with two sub-sections:-
- Settings – which contains the main opt-in form settings.
- Design – Use this section to change the appearance of your opt-in form.
Configure Basic Form Options
Clicking on the publish checkbox will publish the form. Your website’s visitors will not be able to see it unless you do so.
The next field allows you to select whether you want to display the form in a popup, add it to a widget area, or embed it on post content.
If you decide to embed it on post content, a field will appear asking you to select whether Noptin should automatically add the opt-in form before/after post content. The form’s shortcode will also appear below the preview box.
Finally, you can use this section to set the action that should be taken after a user successfully subscribes to your newsletter. You can set Noptin to show a default success message or redirect the user to a different URL.
Defining Popup Trigger Options
This panel only appears if you are editing a popup form. It lets you configure when the popup will be displayed.
The first checkbox lets you select whether you want the user to see the popup once for the entire session or on each page view.
Below is a basic overview of the various trigger options:-
- Immediately – The popup form will be displayed as soon as the page is finished loading.
- Before the user leaves – The popup form will be displayed just as the user is about to leave the page. This converts pretty well since the user will have already interacted with your content and is more likely to subscribe.
- After the user starts scrolling – Displays the popup after the user starts scrolling down your content. You can set how far down (in percentage) that the user should scroll before the popup is displayed. In my experience, a good number is between 20 and 40.
- After clicking on something – This option is good if you are offering content upgrades or lead magnets. It allows you to show the opt-in form after a user clicks on something on your page. You specify a CSS selector of the element to watch out for clicks and Noptin will display the popup when someone clicks on the element.
- After a time delay – With this option, Noptin will wait for a few seconds before displaying the popup. You will be able to specify the number of seconds to wait until the popup is displayed.
Specify Targeting Criteria
By default, Noptin will show your form on every page to users on any device. You can, however, hide the form on some pages and devices.
This is doable via the Page Targeting and Device Targeting panels.
One thing to note is that if you fill the Only Show On textbox, it will override all the other page targeting options that you set. This field accepts a list of post ids separated by a comma. The opt-in form will only be displayed on a post/page/custom-post-types that has one of the ids that you specify.
The Never Show On textbox does the opposite. It hides the form on posts you specify. This field also accepts a list of post ids separated by a comma.
Finally, Noptin also allows you to hide/show the form per post type. All you have to do is check or uncheck the checkbox next to the post type.
This sub-section contains options to help you change how your form looks and feels. From here, you can apply templates, change your forms text content, colors and even add custom CSS to your form.