Nurturelabs CXP Support

We’re here to help!

If you create a subscription form in Nurturelabs CXP, double opt-in is turned on by default. However, double opt-in can be manually turned off at anytime.

To turn double opt-in back on for your form, follow the steps below:

1. Click “Site” on the left menu of your account.

2. Click the “Forms” option on the Site menu.

3. Locate the form you wish to work with, then click the “Edit” button.

4. The form builder will load. All editing and style options will appear in the right pane. Click the “Options” tab located on the right pane. 

5. Locate the “Form Action” box. Click the settings gear icon next to the list name. 

6. A modal window will appear. Click the toggle to turn on double opt-in.

7. Click the “Save” button. 

 

You can easily create and embed your subscription form to your Shopify store. Adding your form to Shopify lets you grow your email marketing list and share discount codes with customers.

Take note

  • You must configure the Nurturelabs CXP Shopify integration to use this feature
  • You can only embed modal, floating box, or floating bar forms to your store. It is not possible to use this feature to embed an inline form
  • You can only have one form embedded in your Shopify store
  • If any edits are made to the form after you embed it, you need to republish the form to your store

How it works

The Shopify form embed option is available for all customers who use the Nurturelabs CXP Shopify integration. With this option, you can use the form builder to create a modal, floating box, or floating bar form and publish it to your store without copying and pasting form code. This embed option does not work with inline forms.

There are two ways to create and embed a form in your store. One way is to create a form from the “Getting Started” checklist, and the other is to create a form from the “Forms” section in your Nurturelabs CXP account. 

Once you add the form to your store, you can share gated discount codes and collect list subscriptions.  

Note that this form is static on your store, similar to how an image is static on a page. If you publish the form then make changes to it in Nurturelabs CXP, those changes will not appear on the form in your store. You will need to republish the form to your store each time you modify it. 

With this embed method, you can only have one form published to your store. It is not possible to publish more than one form to your store using this method.

Once the form is published, it will appear on your store’s homepage. It is not possible to add the form to multiple store pages or choose a different store page.

Create a form with a template

You can choose from two templates to create a form for your Shopify store. These templates are available in the Getting Started checklist. This checklist appears when you first sign up for your Nurturelabs CXP account. If you connect your Shopify store to Nurturelabs CXP through this checklist, we will prompt you to create a form for your store.

The two templates available are “Discount Code” and “Newsletter sign-up.” Note that both templates use the modal form type.

ecommerce_form_template_options.jpeg

Discount code template

If you choose the Discount Code template, we will prompt you to add a discount code on the next screen. You must generate this code in your Shopify store. 

We will then redirect you to the form builder, where you can continue to modify your form and select a list to which you want to add subscribers.

Note that we dynamically add your discount code to the “Thank you” message option for the “On Submit” form action. 

On_submit_form_action.png

The same message and code will display for each customer who submits your form. It is not possible to display a unique message and code for each customer.

The template will not add the discount code to your opt-in confirmation email. If you want the code to appear in this email, you must add it manually.

Newsletter sign up template

If you choose this template type from the checklist, we will prompt you to select the email subscription list. We will then redirect you to the form builder to continue to modify your form.

Create a form without a template

If you didn’t choose a template from the Getting Started checklist, you can still create a form and publish it to your Shopify store. All you need to do is create either a modal, floating box or floating bar form, then follow the embed instructions below.

If you want to have a discount code appear for customers after they submit your form, you can generate the code in your store then manually add it to your form’s “Thank you” message.

Modify your form

You can modify your form as needed right from the form builder. For example, you can edit your form to match your store’s brand and colors. You also have the option to use a double opt-in method (recommended) or a single opt-in method for your form.

Embed your form to your Shopify store

An “E-commerce” option on the “Integrate your form” page appears for all customers who use the Nurturelabs CXP Shopify integration. You can use this option to publish your form to your store. This embed option works for all methods of form creation mentioned above. 

To publish your form to your store:

  1. Click the “Integrate” button on the form builder.
  2. Click the “E-commerce” tab
  3. Click the store dropdown and choose the Shopify store to which you want to publish your form.
  4. Click the “Publish to your store” button

Your form is published to your store, and you can collect list subscribers. 

With Nurturelabs CXP, you can create forms to collect information from leads and grow your lists.

In this article, you’ll learn about the different types of forms you can create with Nurturelabs CXP.

Inline form

This style form appears embedded into the page content where you add the form code to your site. You can add additional fields to your form so you can collect more information from your subscribers.

This form style also offers five different integration options: simple embed, full embed, link, WordPress plugin, and Facebook.

Floating bar form

This style form is a horizontal bar that sits or “floats” at either the top or the bottom of your webpage. This form can collect names, phone numbers, and email addresses from visitors.

Integration options include the simple embed code and WordPress plugin only.

Floating bar form

Floating box form

This form type takes the shape of a box and will sit or “float” on the bottom left or bottom right of your webpage. This form can collect names, phone numbers, and email addresses from visitors.

Integration options include the simple embed code and WordPress plugin only.

Floating box form

With Nurturelabs CXP, you can customize forms to match your brand’s colors, add images, change the font, and more.

In this article:

  • Access form customization options
  • Customize an inline form
  • Customize a modal pop-up form
  • Customize a floating box form
  • Customize a floating bar form
  • Change the “Submit” button text
  • Advanced customization
  • Turn off Nurturelabs CXP branding

Access form customization options

A form’s customization options are located under the “Style” tab in the form builder.

To access this tab for any form:

1. Click “Site” on the left menu of your account.

2. Click the “Forms” option on the Site menu.

3. Locate the form you wish to work with, then click the “Edit” button.

4. The form builder will load. All editing and style options will appear in the right pane. Click the “Style” tab located on the right pane.

Style tab in the form builder.

Customize an inline form

With the inline form, you can choose a layout and customize the styling for the form and submit button.

Layout

Click either option to choose a horizontal or vertical layout for your form.

SMCNALLY Email Marketing - Form

Form Style

The “Form Style” box lets you customize how the form will appear to your website visitors. Form style customization options include:

Form Style Customization OptionsDescription
BackgroundChange the background color of your form or make it transparent.

Background images are not supported by this form type. 
Font ColorChange the color of the text that appears on your form.
FontChange the font type on the form to match your brand. 
BorderUse this option to add a border to your form. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. 
Corner RadiusUse this option to make the corners of your form rounded or square. The corner radius is set as a pixel value. 
WidthUse this option to adjust the width of your form. Width is set as a pixel value. 

Button

The “Button” box lets you customize the look of your form’s submit button. Button customization options include:

Button Customization OptionsDescription
BackgroundChange the background color of the submit button. 
TextChange the color of the button text. 
BorderUse this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. 
Corner RadiusUse this option to make the corners of your button rounded or square. The corner radius is set as a pixel value. 
PaddingPadding is the space around your button. You can use this option to increase or decrease the padding. This is set as a pixel value. 

Note that you will not be able to adjust the button’s height or width here. You will need to use custom CSS in order to make these adjustments.

Customize a modal pop-up form

With the modal pop-up form, you can choose a layout and customize the styling for the form, input fields, and submit button.

Layout

There are four options you can choose from for your form: no image, image on the left, image at the top, or image in the middle.

SMCNALLY Email Marketing - Form

Modal Style

The “Modal Style” box lets you customize how the form will appear to your website visitors. Modal style customization options include:

Modal Style Customization OptionsDescription
BackgroundClick the color picker to change the color of your form or add a background image.
Font ColorChange the color of the text that appears on your form.
FontChange the font type on the form to match your brand. 
WidthUse this option to adjust the width of your form. Width is set as a pixel value.
PaddingPadding is the space around your form. You can use this option to increase or decrease padding. This is set as a pixel value.
Corner RadiusUse this option to make the corners of your form rounded or square. The corner radius is set as a pixel value.
ShadowUse this to add a shadow to your form. Doing so will help it stand out. You can choose from the following options: None, Light, Medium, and Heavy.

Inputs

Inputs refer to the fields that website visitors will use to submit their personal information to you. Input customization options include:

Input Customization OptionsDescription
BackgroundClick the color picker to change the color of the input fields.
Font ColorClick the color picker to change the color of the input field text. 
Corner RadiusUse this option to make the corners of input fields rounded or square. The corner radius is set as a pixel value.

Button

The “Button” box lets you customize the look of your form’s submit button. Button customization options include:

Button Customization OptionsDescription
BackgroundChange the background color of the submit button. 
TextChange the color of the button text. 
BorderUse this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. 
Corner RadiusUse this option to make the corners of your button rounded or square. The corner radius is set as a pixel value. 
PaddingUse this option to adjust the padding of your button. Padding is set as a pixel value. 

Note that you will not be able to adjust the button’s height or width here. You will need to use custom CSS in order to make these adjustments.

Customize a floating box form

With the floating box form, you can choose a layout and customize the styling for the form, input fields, and submit button.

Layout

There are four options you can choose from for your form: no image, image on the left, image at the top, or image in the middle.

SMCNALLY Email Marketing - Form

Box Style

The “Form Style” box lets you customize how the form will appear to your website visitors. Form style customization options include:

Box Style Customization OptionsDescription
BackgroundClick the color picker to change the color of your form or add a background image.
Font ColorChange the color of the text that appears on your form.
FontChange the font type on the form to match your brand. 
WidthUse this option to adjust the width of your form. Width is set as a pixel value. 
PaddingPadding is the space around your form. You can use this option to increase or decrease padding. This is set as a pixel value. 
Corner RadiusUse this option to make the corners of your form rounded or square. The corner radius is set as a pixel value. 
ShadowUse this to add a shadow to your form. Doing so will help it stand out. You can choose from the following options: None, Light, Medium, and Heavy. 

Inputs

Inputs refer to the fields that website visitors will use to submit their personal information to you. Input customization options include:

Input Customization OptionsDescription
BackgroundClick the color picker to change the color of the input fields.
Font ColorClick the color picker to change the color of the input field text. 
Corner RadiusUse this option to make the corners of input fields rounded or square. The corner radius is set as a pixel value.

Button

The “Button” box lets you customize the look of your form’s submit button. Button customization options include:

Button Customization OptionsDescription
BackgroundChange the background color of the submit button. 
TextChange the color of the button text. 
BorderUse this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. 
Corner RadiusUse this option to make the corners of your button rounded or square. The corner radius is set as a pixel value. 
PaddingUse this option to adjust the padding of your button. Padding is set as a pixel value. 

Note that you will not be able to adjust the button’s height or width here. You will need to use custom CSS in order to make these adjustments.

Customize a floating bar form

With the floating bar form, you can customize the form style and submit button. Layout options are not available with this form type.

Bar Style

The “Bar Style” box lets you customize how the form will appear to your website visitors. Bar style customization options include:

Bar Style Customization OptionsDescription
BackgroundChange the background color of your form.

Background images are not supported by this form type.
Font ColorChange the color of the text that appears on your form.
FontChange the font type on the form to match your brand. 

Button

The “Button” box lets you customize the look of your form’s submit button. Button customization options include:

Button Customization OptionsDescription
BackgroundChange the background color of the submit button. 
TextChange the color of the button text. 
BorderUse this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. 
Corner RadiusUse this option to make the corners of your button rounded or square. The corner radius is set as a pixel value. 
PaddingUse this option to adjust the padding of your button. Padding is set as a pixel value. 

Note that you will not be able to adjust the button’s height or width here. You will need to use custom CSS in order to make these adjustments.

Change the “Submit” button text

You can change the text of the “Submit” button for any form.

1. From the Forms Overview page, click the “Edit” button for the form you wish to work with.

2. Click the “Submit” button in the form builder.

3. The right menu will display the button label and a field. Type the text you wish to use for the button.

SMCNALLY Email Marketing - Form

The new button text will save automatically.

Advanced customization

Each form type in Nurturelabs CXP has a custom CSS option available. This is for advanced users who are familiar with CSS and are comfortable with using it. The custom CSS option is located under the “Style” tab for each form and can be used to add further modifications to any form element. For example, you can use this option to:

  • Adjust the width and height of input fields
  • Adjust the width and height of the submit button
  • Adjust font size
  • Adjust the font type for singular elements. For example, you can use this to make the button text font different from the rest of the form

If you want to learn more about using CSS, see this CSS Tutorial from w3schools.com.

To use the custom CSS option:

1. From the form builder, click the “Style” tab.

2. Scroll down until you see the “Custom CSS” box.

3. Click the “Inspector” button then click the form element you wish to modify.

4. Once you click the element you wish to customize, it will appear in the “Custom CSS” box. Type the CSS into this box.

The CSS you add to the form element will save automatically.

Turn off Nurturelabs CXP branding

If you are on a Plus, Professional, or Enterprise plan, you can remove Nurturelabs CXP branding from your form.

Lite plan users are not able to switch off branding.

To turn off Nurturelabs CXP branding:

1. From the form builder, click the “Style” tab.

2. Scroll down until you see the “Miscellaneous” box.

3. Click the AC branding toggle to set it to the “Off” position.

This setting will save automatically.

It’s simple to remove an Nurturelabs CXP form from a WordPress site. To do so, you need to go through the back end of WordPress. Although the process is similar, there are different form removal steps for each type of editor.

In this article:

  • How to remove a WordPress form with a Classic Editor
  • How to remove a WordPress form with the Gutenberg Block Editor

How to remove a WordPress form with a Classic Editor

If you are using a version of WordPress that pre-dates WordPress 5.0, you might be using the Classic Editor.

To remove a WordPress form:

  1. Log into your WordPress account.
  2. Open the article.
  3. Click the three dots elipses button at the top right.
  4. Click to switch from Visual Editor mode to Code Editor mode.
  5. Find the shortcode for your Nurturelabs CXP form.
  6. Click on and highlight the form code and delete.
  7. Click “Update” to save the change.

How to remove a WordPress form with the Gutenberg Block Editor

If you are using WordPress 5.0, your editor is the Gutenberg Block Editor.

To remove a WordPress form from the Gutenberg Block Editor:

  1. Log into your WordPress account.
  2. Open the article.
  3. Click on the form inside the article.
  4. Click the three dots elipses button at the top of the form.
  5. Click “Remove Block.”
  6. Click “Update” to save the change.
 

You can pre-fill form fields for known contacts with information you already have in your Nurturelabs CXP account. To pre-fill form fields, you need to append the web page’s URL path or form URL with a query parameter.

In this article:

Take note

  • You need to turn on and implement Site Tracking to use this solution
  • Contacts will see their information pre-filled on a form if they have a contact record in your account and if they have been identified through the Nurturelabs CXP Site Tracking feature
  • Each query string you add to a URL path will differ based on fields you wish to auto-fill for a form
  • Contacts can edit the information they see pre-filled on a form
  • It is not possible to use this solution with Nurturelabs CXP landing pages. Landing pages do not natively support query parameters

How it works

Appending a URL path with a query string is quick and easy. You only need to know which field you want to pre-fill on a form and the field’s corresponding personalization tag. Once you have identified the fields you want to pre-fill on the form, you are ready to create your query string.

After you add the query string to the web page or form URL, known contacts who land on your page will see their own information pre-filled on the form.

How to pre-fill form fields

This solution works for the following form field types:

  • Text input
  • Text area
  • Date
  • Date Time
  • Hidden

Step 1: Identify form fields and personalization tags

The Manage Fields page in your account lists all standard and custom contact fields. To locate the Manage Fields page, click “Settings” (gear icon), then click “Manage Fields.”

On the Manage Fields page, you will see a list of your standard and custom fields. Each field has a personalization tag. Copy the personalization tag for each field you want to pre-fill on the form, then paste it to your clipboard or another file.

As an example, we will pre-fill the following form fields: First name and Email address. The First Name field has a personalization tag of %FIRSTNAME% and the email address field has a personalization tag of %EMAIL% .

Step 2: Create the query string

Next, you need to create the query string using the format below:

?fieldname=%PERSONALIZATION-TAG%

If you want to pre-fill multiple fields, then your query string will have this format (note the “&” between each field name):

?fieldname=%PERSONALIZATION-TAG%&fieldname=%PERSONALIZATION-TAG%

Continuing with the example above, here is a query string that will pre-fill the first name and email address fields on a form:

?firstname=%FIRSTNAME%&email=%EMAIL%

Step 3: Append your webpage or form URL with the query string

Once you create your query string, you can add it to the end of the URL path of your webpage or form URL.

Webpage URL

  • This will pre-fill fields for any form type
  • You will need to work with your web host provider to add the query string to the end of your webpage URL path in the address bar
  • An example of a webpage with a query string could look like this:
    www.nurturelabscxp.com/support?Firstname=%FIRSTNAME%&email=%EMAIL%

Form URL

  • This works with inline forms only
  • You can add the query string to the end of the form’s URL path then share or use the Form’s URL however you like. For example, you can pre-fill form fields for a multi-page form or add the query string to the end of the Form’s link when sharing your form

To retrieve the URL for your inline form:

1. From your Nurturelabs CXP account, click “Site” then click “Forms.”

2. Click “Edit” for the form you want to work with.

3. Click the “Integrate” button.

4. Click the “Link” tab.

The Form’s link will look something like this:

https://youracaccountname.activehosted.com/f/213

5. Next, add the query string to the end of the form’s link.

As an example, I want to pre-fill the email address on my Nurturelabs CXP form. To do so, I would format the form URL like this:

https://youracaccountname.activehosted.com/f/213?email=%EMAIL%

Once the query string is added to your form’s link, you can share it anywhere you wish.

Advanced: Use JavaScript to pre-fill single and multi-select fields

Before you start:

– This is for advanced users only

– The Nurturelabs CXP Support team is not able to help you implement or troubleshoot any code you add to your webpage

– The examples below use standard JavaScript code. There are other ways to write this code

If you are comfortable with coding your own solutions, you can use JavaScript to pre-select answer options for checkbox and dropdown form fields. This JavaScript needs to be added to the source code of your webpage.

The examples shown below are for the dropdown menu and radio button field types. However, you should be able to use JavaScript to pre-select answer options for the following field types:

  • Dropdown
  • Radio button
  • Checkbox

Nurturelabs CXP forms that have double opt-in enabled will have a Form Submit action and an Opt-in Confirmation Action.

The Form Submit action is triggered when a contact submits your form.

  • If single opt-in is enabled, all contacts regardless of their list status will see this action.
  • If double opt-in is enabled, only contacts who do not have an active status for your list will trigger this action.

The Opt-in Confirmation action is part of the double opt-in process and is triggered when:

  • A contact clicks on the confirmation link contained in their opt-in confirmation email.
  • A contact already has an active status for your list when they submit your form.

In this article, we’ll show you how to publish your Nurturelabs CXP form to your website using embed code. The instructions illustrated below use an inline form, however, these instructions can be used for any form type.

In this article:

  • Form embed code types
  • Publish a form to your website

Form embed code types

When you create a form in Nurturelabs CXP, we’ll automatically generate different integration options you can use to collect subscribers. One of those options is an embed code(s).

Depending on the type of form you create, there will be one or two form embed codes that you can use:

Simple embed code

  • Simple embed code is available for all form types
  • This embed code uses Javascript. Any changes you make to your form in your Nurturelabs CXP account will appear on your published form in real time

Full embed code

  • Full embed code is available for inline forms only
  • Full embed code uses both CSS and HTML. This can be thought of as a static form. That means that any changes you make to your form in your Nurturelabs CXP account will not show up on your published form. You will need to re-paste your form code to your site in order to see those changes. As an alternative, you can make changes directly into the form code you pasted on your site

Publish a form to your website

In order to publish a Nurturelabs CXP form to your website, you’ll need to locate your form’s embed code then paste it into the HTML of your website.

1. Click “Site” on the left menu of your account.

2. Click the “Forms” option on the Site menu.

3. Locate the form you wish to work with, then click the “Edit” button

4. Click the “Integrate” button located on the top right of the form builder.

5. On the “Integrate Your Form” page, we’ll provide you with both the Simple Embed code and the Full Embed code. Hover your mouse over the embed option you wish to use.

6. Paste the form code into your website’s HTML where you want the form to appear.

If you are using a website builder, please refer to that platform’s specific instructions on adding form code to their site. 

With Nurturelabs CXP, you can use single opt-in with your subscription forms.

A single opt-in means that contacts will not be asked to confirm their subscription to your list. Once they submit your form, subscribers are added as “Active” contacts to your list right away. 

This option is configured on Nurturelabs CXP forms. Double opt-in is turned on for all subscription forms by default. This setting can be turned off at any time.

Enable single opt-in for your subscription form

1. Click “Site” on the left menu of your account.

2. Click the “Forms” option on the Site menu.

3. Locate the form you wish to work with, then click the “Edit” button.

4. The form builder will load. All editing and style options will appear in the right pane. Click the “Options” tab located on the right pane.

Options tab

4. Locate the “Form Action” section under the “Options” tab. Click the settings gear icon next to the “Subscribes to list” form action.

Form action

 

5. A modal window will appear. The “Opt-in Confirmation” option will be set to “On.” To turn it off, click the toggle. 

6. Click the “Save” button.

Edit form modal

Nurturelabs CXP offers different types of fields that you can add to an inline form. You can use these fields to collect additional information from contacts, add images or text to your form, or safeguard your form from spam contact submissions.

In this article, we’ll discuss how to add fields to your form and what field types can be used in your form.

Additional fields can only be added to inline forms. It is not possible to add fields to floating box, floating bar, or modal forms.

Add a field to an inline form

  1. From the Forms overview page, click “Edit” for the inline form you wish to add a field to.
  2. The Form Builder will open. To add a custom contact or standard field to your form, drag the field from the right side column and drop it into your form.
  3. To create a new custom contact field, click the “Add Custom Field” button on the bottom right menu and follow the prompts to create a new field. Once the field is created, you can drag it and drop it into your form. 

Note that any new field created with the form builder will be added to the General Details field group. 

Form fields

Both standard fields and custom contact fields can be added to an inline form. 

Note that modal, floating box, and floating bar form types only use name and email address fields. 

Standard fields

Each Nurturelabs CXP account comes with standard fields that you can use in your inline forms.  Below is a list of all standard form fields along with a description of how they can be used.  

  • First Name
    Will collect the first name of your subscriber.
  • Last Name
    Will collect the last name of your subscriber.
  • Phone
    Will collect the phone number of your subscriber.
  • Organization
    Will collect the company name of your subscriber.
  • Header
    Will allow you to add additional text to your form.
  • HTML Code
    Will allow you to add a block of your own custom HTML code.
  • Image
    Will allow you to add an image to your form (eg, company’s logo).
  • CAPTCHA
    Will require the contact to confirm if they are a human. This is used to prevent spam form submissions.
  • List Selector
    Will give the contact the option to select a list(s).
  • Subscribe/Unsubscribe
    Will give the contact the option to subscribe or unsubscribe from your list(s).

Custom Contact Fields

In addition to standard fields, you can use custom contact fields to collect additional information from contacts. Each Nurturelabs CXP account can use custom contact fields in inline forms:

  • Text input
    Contacts can submit one line of text.
  • Text area
    Contacts can submit multiple lines of text.
  • Date
    Contacts select a date from a calendar or input it into the date field.
  • Drop-down menu
    Contacts can select a single option from a pull-down list.
  • Multi-select list
    Contacts can select more than one option from predefined options presented in a list form.
  • Radio button
    Contacts can select one option from a predefined list of options by clicking on a radio button.
  • Check boxes
    Contacts can select more than one option from a predefined list of options by clicking in a checkbox.
  • Hidden fields
    Used to pass data into web pages and collect information such as UTM parameters.

The double/single opt-in process is configured on the Form level. By default, our forms use double opt-in.


Whether you use double opt-in or single opt-in is a decision you should make based on what makes sense for your business and how each list will be used. Below, we will walk you through each option and the pros and cons for each.
What is a double opt-in?
A double opt-in is a two-step process a contact must go through in order to be added to your list as an active contact so they can begin receiving email campaigns:

Step 1: Submit form. Subscribers are added as “unconfirmed” contacts to your list. You cannot send any emails to contacts that have this status and they do not count against your contact limit.

Step 2: Confirm subscription/interest. Once a subscriber submits your form, they are sent an email with a confirmation link. If they click on the confirmation link, their status is changed from “Unconfirmed” to “Active” and you can now send emails to them.

If a contact does not confirm their status, they cannot receive any emails sent to that list.

Contacts with an “Unconfirmed” status do not count against your contact limit.

Pros of a double opt-in:

  • Ensures contacts want to hear from you and that their information is correct.
  • Contacts who go through a double opt-in are more likely to engage with your communications.
  • You’ll have fewer spam complaints, which may help your deliverability.
  • Satisfies requirements from some countries/regions that require a double opt-in process.
  • Helps guard against spam contacts from being added as active contacts to your account.

Cons of a double opt-in:

  • Some contacts who want to hear from you may not complete the second step of your double opt-in process, which means they won’t receive your messages.
  • You may have a slightly smaller list of active contacts than if you were using a single opt in.

What is a single opt-in?
A single opt-in means that contacts will not be asked to confirm their subscription to your list. Once they submit your form, subscribers are added as “Active” contacts to your list right away.

Pros of a single opt-in:

  • Allows contacts to join your list so they can start receiving messages right away.
  • One less step a contact needs to take before they receive messages from you.

Cons of a single opt-in:

  • Contacts may end up on your list who did not want to receive messages from you and they may mark your email as spam. This can hurt your deliverability.
  • Spam contacts are added to your list as active contacts, and they will count against your contact limit.

The opt-in confirmation email is an email sent to contacts who submit your subscription form.

Take note

The opt-in confirmation message can only be sent to contacts if:

  1. You have the double opt-in enabled on your Nurturelabs CXP form
    Single opt-in forms do not use opt-in confirmation emails. 
  2. The contact does not have an “Active” status for your list
    If a contact is active for your list and submits your form, they will see your confirmation action instead of receiving your opt-in email. 

Edit the opt-in confirmation email

To edit your opt-in confirmation email:

  1. Click “Site” on the left menu of your account.
  2. Click the “Forms” option on the Site menu.
  3. Locate the form you wish to work with, then click the “Edit” button.
  4. The form builder will load. All editing and style options will appear in the right pane. Click the “Options” tab on the right pane.
  5. Locate the “Form Action” section. Click the settings gear icon next to the list name.

    Settings_gear_icon.png

  6. A modal window will appear. Click the “Edit” button for the opt-in email.
  7. The email designer will open. Here you can drag and drop different content blocks into your confirmation email and update the email content.
  8. To edit the “From” information, including your “From” name and email address, or to update the subject line of your opt-in confirmation email, click the gear icon located on the top right of your screen.
  9. A modal window will open. Here you can modify your subject line, “From” name and email, “Reply to” email, and send a test of your email.
  10. When finished, click “Done” located on the top right of your screen.
  11. Click “Save” to save your changes and go back to the form editor.

Labels are keywords that you can apply to your forms to keep them organized. Once you add a label to a form, you can filter the Forms page by that label to quickly find what you need. While similar to folders, labels offer more flexibility as you can assign more than one label to a form.

Take note

  • Forms, automations, and campaigns share the same labels. Any labels created on the Forms page are available to use with automations and campaigns
  • Edits made to labels on the Forms page are also reflected on automations and campaigns pages
  • Labels are edited or deleted from the Forms page only. 

Viewing form labels

Any labels you create for your forms will appear in the “Filter” dropdown on the Forms overview page. This dropdown will also contain labels you created for your Automations and Campaigns.

form_label_dropdown.png

How to create a label for a form

To create a new form label:

  1. Click “Site” on the left menu.
  2. Click the “Forms” option on the left side of your screen.
  3. Locate the form to which you want to add the label. 
  4. Click the checkbox next to the form’s name.
  5. Click the “Add Label” button that appears at the top of the Forms page.
  6. Click the “Create New Label” button.
    create_new_label_button.png
  7. A “Create New Label” modal will open. Type the label name into the field provided.
  8. Click a color tile to assign a color to the label.
  9. Click the “Create” button.

The new label will be applied to the selected form. In addition, you can apply this label to other forms, campaigns, and automations.

label_added_to_form_example.png

How to add a label to a form

You can add a label you’ve already created to a single form or multiple forms.

  1. Click “Site” on the left menu.
  2. Click the “Forms” option on the left side of your screen.
  3. Locate the form to which you want to add the label.
  4. Click the checkbox next to the form’s name.
  5. Click the “Add Label” button that appears at the top of the Forms page.
    add_label_button.png
  6. Click the label that you want to apply to your form.

The label will be applied to the selected form.

How to remove a label from a form

You can remove a label from a single form or multiple forms.

  1. From the Forms overview page, locate the form containing the label you want to remove. 
  2. Click the checkbox next to the form’s name.
  3. Click the “Add/Remove Label” dropdown at the top of the Forms overview page.
    add_remove_label_option.png
  4. Locate the label you wish to remove from the form in the list of options. It will have a green checkmark.
    label_with_green_checkmark.png
  5. Click the label.

The label will be removed from the form.

How to edit a label

To edit a label:

  1. From the Forms overview page, locate the label you wish to update.
  2. Click the pencil icon that appears to the right of the label.
    edit_label_icon.png
  3. An “Edit Label” modal will open. Type a modified name into the field provided.
  4. Click the “Save” button.

The label will be updated on the Forms, Automations, and Campaigns pages.

How to filter forms by label

If you have several forms in your Nurturelabs CXP account, filtering them by a label can help you quickly locate what you need.

  1. From the Forms overview page, click the “Filter” dropdown.
  2. Click the label you wish to use as a filter.

The Forms page will list all forms that contain that label.

The subscription update form is used to collect updated information from your contacts. Each list in your account has its own subscription update form and settings. This form can be added to a campaign by using a personalization tag. Once the email is sent to contacts, the personalization tag will be replaced with a link to the update form, and contacts will see their own information pre-populated in the form fields. 

You may want to use this form to ask contacts to update their information, such as email address, name, and any other information you’re collecting in custom fields.

In this article, you will learn how to:

To access and modify your subscription update form:

1. Go to the “Lists” page and click on the drop down for the list you want to gather updated information from.

2. Select “Advanced Settings.”

3. Click on the “Public Pages” tab from the List Settings pop up modal.

4. Click “Edit” for “Subscription Updates.”

5. Add additional fields to your form by clicking them. You can also create a new field by clicking “Add a new field.”

6. Click “Save.”

7. Under “Theme and Style options,” you can select from 1 of 5 pre-designed themes.

8. Under “Confirmation of updates being saved,” you can modify your confirmation message that will appear when a contact submits your subscription update form. To modify the message, click the message and select “Edit.” Add your customized text to the message builder on the left side menu. Then click “Update.”

You can also redirect contacts to a URL instead of showing them a message. To do so, click “Redirect to URL instead.”

To insert your subscription form into your email to send to subscribers:

  1. In your campaign or automation email, click on the area where you want to add the form.
  2. Select “Personalize” from the modal tool bar.
  3. From the “Add a personalization” pop up, click “Message” then select “Update Subscription Account Link.”

The personalization tag for this form will be inserted into your campaign:

When a contact clicks on that link, they will go to your form. If they have any pre-existing information for the fields on your form, they will see that information pre-populated. If a contact sees a blank field, then that means they do not have any information for that field.

Once a contact enters their updated information and clicks “Update,” their contact profile page will reflect those changes. The update will also appear under the “Recent Activities” stream:

 

In this document, we’ll show you how to use the HTML Code block and share with you some basic HTML and CSS tricks that you can use to customize your forms.

Please note that this is an advanced feature and does require knowledge of CSS and HTML. If you are not familiar with HTML or CSS, we recommend working with a member of your team who is. 

HTML

The HTML block allows you to add text with embedded links to your inline form. You may want to use this if you wish to link contacts to a video or privacy policy page on your site. You can also format the text as well as its alignment in this specific block.

Please note that the HTML block can only be used on inline forms. Float box, floating bar, and modal forms do not have the option to add an HTML block.

Adding the HTML Code block to your form

To get started, simply drag and drop the “HTML Code” block to any place on your form. This block is located under the Fields > Standard:



To add your custom HTML, click that HTML Code block in your form. Once you do, you will be able to enter your code into the box on the right side of your screen:



Now you’re ready to add your own HTML to your form.

Basic HTML Code

You can use the following to add styling to the text in your HTML Code block.

Line Break

In this example, we added a link break between two sentences in our HTML block. This is how we set it up:

Send us your name and email to sign up for our newsletter. <p>Don’t forget to add us to your contact list!</p>

Bold Text

Tags used <b> </b>

In this example, we wanted to bold a sentence in our HTML block. This is how we set it up: 

Send us your name and email to sign up for our newsletter. <b>Don’t forget to add us to your contact list!</b>



Underline text
Tags used <u> </u>

In this example, we wanted to underline a sentence in our HTML block. This is how we set it up:

Send us your name and email to sign up for our newsletter. <u>Don’t forget to add us to your contact list!</u>



Add link
Tags used <a href> </a href>

In this example, we wanted to add a link to our privacy policy for subscribers to click on. This is how we set it up:

Send us your name and email to sign up for our newsletter. <a href=”https://www.activecampaign.com/privacy-policy/”>Read our privacy policy here.</a>


Insert line
Example code used: 
<div style=”height:10px;border-bottom:1px solid #CCCCCC”>
&nbsp;
</div>

In this example, we used a separate HTML code block to create a line to insert between two form elements.





Create a bulleted list
Tags used <li> </li>

In this example, we wanted to list out what subscribers can expect to hear about when they sign up for our newsletter. This is how we set it up:

Learn more about the following: <li>Home energy check up</li><li>Solar consultation</li><li>Insulation</li>



Add color to your text
Example code used:
<span style=”color: #267ec2″; <p>Send us your name and email to sign up for our newsletter</p> </span>

In this example, we wanted to add color to the text in our HTML code block. The code used is found above.

CSS

You can use the Custom CSS box and Inspector to modify visual elements of your form, such as adjusting the width of your submit button, adjusting font type and size, centering text in an element, changing the color of your text, and more. This option is located under the Style tab. All form types include the custom CSS box and Inspector.



To use the Custom CSS box and inspector, click the “Style” tab located on the top right of your form editor. Then click the inspector button and target the element you wish to add custom styling to by clicking it.

Adjust the width of a form element

You can either use a percentage or pixel to determine the width of an element. In this example, we’re going to adjust the width of the “Submit” button:

  1. Go to “Style” then click “Inspector.”



  2. Target the “Submit” button by clicking it.

  3. In the CSS box, enter:width: numberpx; And replace “number” with your own number. In this example, we used 250px:

The submit button is now 250 pixel wide:

Adjust font type and size

You can use the CSS box to change the font for any element in your form. In this example, we’re going to modify the submit button by changing the font to Georgia and adjusting the font size to 25 pixel:

  1. Go to “Style” then click “Inspector.”



  2. Target the element by clicking it. In this example, we’re choosing the “Submit” button.
  3. In the CSS box, enter:font-size: 25px;font-family: Georgia !important:

The submit button’s font size and type is now adjusted:

Center text using CSS

  1. Go to “Style” then click “Inspector.”



  2. Target the element containing the text you wish to center by clicking it

  3. In the CSS box, enter:text-align: center

Your text is now centered:

Add color with CSS

  1. Go to “Style” then click “Inspector.”



  2. Target the element containing the text you wish to change the color for by clicking it.

  3. In the CSS box, type: color:#hexcodeforcolor; and replace “number” with your own number. In this example, we used #f441b8

Your text now has color applied to it:

 
In this article:

Take note

  • Inline forms are available on all plan tiers
  • Floating Box, Floating Bar, and Modal forms are available with Plus, Professional, and Enterprise plans
  • The type of form you create determines your customization options

Create a form

Forms are created in the Forms section of your Nurturelabs CXP account.

1. Click “Site” on the left menu of your account.

2. Click the “Forms” option on the Site menu.

3. If this is the first time you’re creating a form, a “Create a form” modal window will appear. Click the “Create a form” button. 

If this is not the first time you’re creating a form with Nurturelabs CXP, click the “Create a form” button on the top right of your screen.

4. Type the name of your form into the field provided and click the form style you wish to use.

5. Click the “Action” dropdown then click an action to select it. You can choose from:

  • Add a Tag
    Adds a tag to each contact who submits your form.
  • Email Results
    Sends a notification to anyone on your team each time a contact submits your form.
  • Subscribe to a list
    Subscribes the contact to your list. You can use a double opt-in (default) or single opt-in.
  • Add to a Deal (Plus, Professional, and Enterprise plans)
    Creates a deal for each contact who submits your form.

Note that you can add as many actions as you like to a form. You can also update actions and add more actions to your form during the form creation process or after it’s been published.

6. Click the “Options” dropdown to select an option to match your action. 

The items displayed in this dropdown will differ based on the selected action. For example, if you choose “Subscribe to List” for your action, then you need to select which list contacts will be subscribed to from the “Options” dropdown.  

7. Click the “Create” button.  

You will be directed to the form builder where you can begin to customize your form.

Add fields to your form

The types of fields you can add to a form depends on the type of form you’re creating.

Modal, Floating Box, and Floating Bar forms

The information you can collect from contacts using these form types include:

  • Name
  • Phone
  • Email (required by default)

To use these fields in your form:

1. From the form builder, click the “Options” tab.

2. Use the toggles in the “Fields” section to make the Name and Phone fields visible on your form.

SMCNALLY Email Marketing - Form

Any changes you make to your form will save automatically.

Inline forms

Inline forms offer more variety with the kind of information you can collect from contacts. For example, you can collect basic information such as name and phone number as well as information for any custom contact field you create in your account. In addition, you can add the CAPTCHA field to your form, making submissions more secure.

The “Fields” tab for this form type has two sections: Standard and My Fields. “Standard fields” are the fields we supply you with. “My Fields” are custom contact fields that you create.

Fields available with the Inline form:

Field NameDescription
Full nameFull name of contact
First nameFirst name of contact
Last nameLast name of contact
Email Email address of the contact
PhonePhone number of the contact
AccountAccount name for the contact (Plus, Professional, and Enterprise plans)
HeaderUse this field to add a header to your form
HTML CodeUse this field to add custom HTML to your form
ImageUse this field to add an image to your form
CAPTCHAUse this field to add extra security to your form
List SelectorUse this field to let contacts choose which list(s) they can subscribe to
Subscribe/UnsubscribeUse this field to let contacts subscribe or subscribe from the selected lists on your form
Custom fieldsAny custom contact field you create

To add any of these fields to your form:

1. From the form builder, make sure that the “Fields” tab is selected in the right menu.

2. Drag the field from the right menu to your form.

Make form fields required

You can make one, some, or all fields on your form required. This means that contacts will not be able to submit your form until they provide all information requested.

Modal, Floating Box, and Floating Bar forms

1. From the form builder, click the “Options” tab on the right menu.

2. Click the “Required” checkbox. This is located to the right of the field’s name in the right menu.  

Inline forms

1. From the form builder, click the field you wish to make required.

2. The right menu will display the fields header, default text, and a required option. Click the “Required” checkbox.

SMCNALLY Email Marketing - Form

Allow blank fields to overwrite existing data

By default, each form you create has “Allow blank fields to overwrite existing field data” selected. This means that if a contact submits your form and does not complete all fields, those blank fields will also appear as blank in their contact profile record, even if you collected information previously for these fields.

This setting applies to the following field types: text input, text area, checkboxes, date fields, and multi-selection lists.

To change this, click the “Options” tab in the form builder for any form. Then uncheck this option located in the “Advanced” section.

SMCNALLY Email Marketing - Form

Change default text and headers for your input fields

You can change the default text that appears in the input fields on your form.

sarahnicholaev - Form

1. From the form builder, click the input field you wish to change the default text for.

2. Type the new text into the “Default Text” field provided in the right menu.

If you’re working with an Inline form, you can also change the field header. This option appears in the right menu when you click the field in the form builder.

Customize the look of your form

You can change the look of your form by adding background images, changing the form’s color, changing the font type, and more.

Remove Nurturelabs CXP branding from your form

Nurturelabs CXP branding appears on every form you create by default. If you are on a Plus, Professional, or Enterprise plan, you can remove this branding from your form. Lite plans are not able to remove this branding.

1. From the form builder, click the “Style” tab on the right menu.

2. Scroll down to the “Miscellaneous” section.

3. Click the branding toggle to set it to the “Off” position.

Additional customization for Modal, Floating Box, and Floating Bar forms

These form types have additional customization options that dictate when and how the form should appear for site visitors.

These settings are located under the “Options” tab in the right menu of the form builder.

Modal

  • Choose if the form should fade in or no effect
  • Choose if the form should appear when the page visitor scrolls or no delay
  • Hide the form after they interact with the page, show the form once then hide it, or never hide the form
  • Choose how long the form should be hidden for that page visitor

Floating Box

  • Choose if the form should fade in, slide in, or no effect
  • Choose if the form should appear when the page visitor scrolls or no delay
  • Choose if the form should appear on the bottom left or bottom right of the page
  • Hide the form after they interact with the page, show the form once then hide it, or never hide the form
  • Choose how long the form should be hidden for that page visitor

Floating Bar

  • Choose if the form should fade in, slide in, or no effect
  • Choose if the form should appear when the page visitor scrolls or no delay
  • Choose if the form should appear on the bottom or top of the page
  • Hide the form after they interact with the page, show the form once then hide it, or never hide the form
  • Choose how long the form should be hidden for that page visitor

Customize form messages

When a contact submits your form, you can choose to show them a thank you message or you can direct them to a page on your site.

1. From the form builder of any form, click the “Options” tab on the right menu.

2. Locate the “On Submit” section.

3. The “Show Thank You” option is selected by default. Here you can input different text by typing it into the box provided.

sarahnicholaev - Form

To direct contacts to a URL instead, click the “Show Thank You” dropdown then click “Open URL.” In the field provided, type the URL you wish to direct contacts to.

sarahnicholaev - Form

About the opt-in process

An opt-in is consent from a contact who wants to receive your marketing emails. Usually, contacts provide this consent by submitting a subscription form. If you’re using forms to grow your email marketing lists, double opt-in is enabled by default.

You can customize the opt-in process that a contact experiences when they submit your form. This customization is available for all form types.

 

With Nurturelabs CXP, you can customize your form by adding an image to it.  

In this article:

Take note

  • The following form types support images: Inline, Modal, Floating Box
  • The following form types support background images: Modal and Floating Box
  • Learn more about the types of forms you can create with Nurturelabs CXP

Add an image to an inline form

Inline forms are available on all Nurturelab CXP plan tiers.

You can add an image to your inline form with the “Image” field. This option is located on the “Fields” tab of the form builder, under “Standard.”

To add an image to your inline form:

  1. From the Forms Overview page, click the “Edit” button for the form you wish to add an image to.
  2. Under the “Fields” tab, click on the “Image” field and drag it to your form.

3. Click the image field in your form to open the Content Manager.

Empty image field in inline form

4. Click the image you wish to display in your form. If you wish to use a new image, you can click “Add file” to upload it to the Content Manager.

The image will display in your form:

Image in inline form

Add an image to a floating box or modal form

Floating Box and Modal forms are available on the Plus, Professional, and Enterprise plan tiers.

The ability to add an image to a floating box or modal form type depends on the form layout you select. Not all layouts for these two form types are able to display images. In addition, there can only be one image per form.

  1. From the Forms Overview page, click the “Edit” button for the form you wish to add an image to.
  2. Under the “Style” tab, select a layout for your form that uses an image. There are three different layouts you can choose from that will display an image:
Form layout options with images
  1. Click the image field in your form. This will open the Content Manager.
Floating box form empty image
  1. Click the image you wish to display in your form. If you wish to use a new image, you can click “Add file” to upload it to the Content Manager.

Your image will be added to your form:

Floating box form with image

Edit an image in your form

After you add an image to your form, you can use the Image Editor to edit it. Editing the image in the form will not affect the original stored in the Image Editor.

  1. Click the image in your form.
  2. The Content Manager will open. Hover your mouse over your chosen image and a toolbar will appear.
  3. Click the pencil icon.

The Image Editor will load and you can begin customizing the image.

The Image Editor offers several options that you can use to customize an image:

Crop

This option lets you reframe an image by trimming or removing outside edges. This will change the image’s aspect ratio. To crop an image, click Crop. Using your mouse, select the area you want to keep. Note that you can drag the corners and sides of your selection. When finished, click “Apply.” All areas that were not included in the selection will be removed.

Transform

This option lets you flip the image either horizontally or vertically. To flip an image, click “Transform.” To flip the image horizontally, click “Flip X.” To flip an image vertically, click “Flip Y.” You can also use the scroll bar to customize the image rotation clockwise or counter clockwise.

Text

This option lets you type text directly on the image. You can add different stylings to text, such as bold, italic, and, underline. You can align your text to the left, center, or right within the text block. Click “Color” to use different color options and use the slider to adjust the size of your text.  To add text to an image, click “Text.” Click the styling options you wish to use and click the area where you want to add text. Add text to the text field. Note that you can use the corners and sides of the text field to resize and flip the text block. You can also adjust the placement of the text by dragging the text block.

Line

This option lets you draw directly on the image using various colors and widths. You can also choose between “Freehand” draw and “Line” draw or use both in conjunction with one another. To draw on an image, click “Draw” then select “Freehand” or “Line,” select your color, and select your width.

Shape

This option lets you place a shape over the image. You can choose from rectangle, circle, and triangle shapes. “Fill” lets you select a color to fill the image. “Border” let’s you select a color for the shape’s outline.  You can also use the slider to select the width of the border.

Undo and Redo changes

Clicking the “Undo” option will revert the last change you made to the image. You can click “Redo” to reapply the change to your image that was removed with the “Undo” button.

Reset edits

Clicking the “Reset edits” option will restore the image to its original version.

Add a background image to your form

Floating Box and Modal forms are available on the Plus, Professional, and Enterprise plan tiers.

You can add a background image to any Modal or Floating Box form you create in Nurturelabs CXP. Note that with this option, you will need to use the URL of where the image is hosted in order to add it to your form.

1. From the Forms Overview page, click “Edit” for the Modal or Floating Box form you wish to add a background image to.

2. Under the “Style” tab, click the color picker.

Color picker

3. A small modal window will open. Type or paste the URL of the image you wish to add to the background of your form.

Image URL Field

The background image will be added to your form and the change will save automatically. Note that it’s not possible to adjust or edit this image from the form builder.