Creating an opt-in form

The first step in setting up your form process is to create an opt-in form for your website.

Creating a new opt-in form template

To create an opt-in form:

  1. From the campaigns screen, click Template Builder.

  2. Under Form Builder, click Create.

  3. At the top of the page, you’ll see Opt-in form, Confirmation page, and Double opt-in email. Click Opt-in form.

  4. Click Create a new template.

    Note: You can choose between an Embedded form or Pop-up form.

    Both forms are types of lead-generating forms. However, they differ in the way they are displayed.

    Embedded form
    The embedded form usually lives on a designated page on a website and the user must visit that exact page to subscribe to your form.

    Pop-up form
    The pop-up form appears after the user clicks a button, which you can place in multiple places on your website.

  5. You can now choose to use a template from the gallery, or use one of your own. To create a brand-new template, click Using a template from gallery, then click Select under the template you want to use.

  6. Choose a name for your new template, then click Use this template.

You now have a new form template that you can customise for your needs. See below for how to edit your opt-in form.

Note: You can preview your form at any time by clicking Preview at the top of the form builder.

When you’re finished editing your template, click Save & Publish to gallery.

Editing your opt-in form template

You can use the form builder to edit and customise your form to make it look and behave exactly how you want.

The form builder uses the same editing mechanisms as the email builder and forms builder. This allows you to use any saved sections or images created in Apteco email in your forms.

Layout tools

This is where you create the structure of your form. In this step, you can add all the necessary columns which you can fill with content later.

Simply click and drag the configuration you want onto the builder. You can amend the layout later using the toolbar if you decide to change your design.

Content tools

Click on the content block you want 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 content frame to see the available customisation options in the toolbar that appears.

To customise a content element:

  1. Click on the element you want to edit.

  2. Click the pencil icon to show the available options.

The content tools include:

  • Text: Format your text.

  • Image: Select images and adjust their positioning.

  • Divider: Add a dividing line to separate sections or elements within a section.

  • Button: Include hyperlinks to direct users to a webpage.

  • Spacer: Add a blank space to separate elements or sections within your form.

  • Social Sharing: Add your favorite social icons to your form.

  • HTML Block: You can add some HTML code directly into your form.

  • Video: Add video URLs to the form.

    Note: 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.

Adding images to your opt-in form

You have two ways to add an image to the form:

  • Upload your image or pick an image from your gallery.

  • Link to an existing image online.

For this example, let's replace the default image with one in our image gallery.

To replace an image:

  1. Click the image you want to replace, then click Image.

  2. Click Replace.

  3. This opens the image gallery. You can upload an image to the gallery, or choose an image already here. Click Insert under the image you want.

    You can use the Image Tool Editor to crop, resize, rotate, or flip your image.

  4. Once you are happy with the image, click Save.

The image appears in your form.

Forms tools

You can collect additional information from your users through your form. 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.

The form tools include:

  • Text: Add a string data property linked to the subscriber's email.

    Note: The maximum length of this field is 255 characters.

  • Textarea: Add a string data property linked to the subscriber's email (same as the "Text" block), but the maximum allowed length of the field is 500 characters.

  • Number: Add an integer or decimal data property linked to the subscriber's email.

  • Radio buttons: Allow the user to choose a single option from a predefined set of mutually exclusive options.

  • Web URL: Store web URLs. This is most often used to store the contact's personal website. The form will only accept the URL if it is correctly formatted. If the format is incorrect, the field will become red, and an error displays.

  • Date: Store specific dates in a form, such as the user's birthday date for example.

  • Dropdown: Allow the user to choose a single option from a dropdown menu with predefined options, similar to the Button block.

Sections

You can duplicate and delete any section you’ve added to your template.

To duplicate a section:

  1. Click within the section to highlight it, then click the Copy icon on the right side of the screen.

A duplicate section appears beneath that section.

To delete a section:

  1. Click within the section, then click Delete.

  2. Confirm the deletion by clicking Yes.

Note: You can also quickly delete a section or element, by dragging it to the content tools area on the left-hand side.