How Can I Use, Embed and Customize the Sign-up Form?

Create a Form

To create a sign-up form, go to your account menu (on the top right), select Forms and then click on New Form. 

In the Supported Features field, tick the box next to Sign-up Form. Once you have completed these steps, you have the chance to embed the form in your website. 

On the next page, you have the chance to customize your form to fit your preferences. You can insert an image from your media library, insert a captcha and add attributes – e.g., name, telephone number and any other custom attributes you've created, such as language. All of these changes are accessible through the button on the left Add Another Attribute. Also, you can change the text of placeholders and buttons in the fields that appear when you click on the arrow next to the component. Finally, you drag and drop any components of your sign-up form to change the order they appear on the screen by clicking on the tiles to the left of the text.

Embed a Form

When embedding a sign-up form into your website, you have the following two options:

1. Link / iFrame

Click on Display Hosted Form. This takes you to the form, which is hosted on our website. Copy the URL of the form and link to it directly from your homepage or integrate it via iFrame. 

2. Embed (recommended)

2.a As a Form

Follow the link to Embed Form, and select Responsive Layout. Now copy the code in the gray box. Insert this code into your website depending on where you want the form to appear. The form should then be fully functional on your site. It will also display correctly on all mobile devices.

2.b As a Pop-up

For this option, follow the link to Embed Form, but select Pop-up. You can also set the seconds before the pop-up will appear on your site. The default is set to 10 seconds. Copy the code that appears in the gray box, and insert it into your website. The form will now appear on your site as a pop-up.

If you want to customize how the form/pop-up looks or if you are unable to insert the code in the correct place, please see the section below for more information: Customization Options / JavaScript API. 

Customization Options / JavaScript API

Both the subscribe:createForm and the subscribe:createPopup functions each accept two additional parameters: 

In the first parameter, you can adjust how the form or pop-up looks. The following configurations are used as standard and you can customize them yourself:

var config = {
  "form": {
    "class": "",
    "style": ""
  },
  "container": {
    "type": "table",
    "class": "",
    "style": "width: 100%;"
  },
  "row": {
    "type": "tr",
    "class": "",
    "style": ""
  },
  "columnLeft": {
    "type": "td",
    "class": "",
    "style": "width: 40%; padding: 10px 5px;"
  },
  "columnRight": {
    "type": "td",
    "class": "",
    "style": ""
  },
  "checkbox": {
    "type": "input",
    "class": "",
    "style": ""
  },
  "separator": {
    "type": "br",
    "class": "",
    "style": ""
  },
  "input": {
    "class": "",
    "style": "padding: 5px 10px; border-radius: 2px; border: 1px solid #d8dee4;"
  },
  "dropdown": {
    "type": "select",
    "class": "",
    "style": "padding: 3px 5px; border-radius: 2px; border: 1px solid #d8dee4;"
  },
  "button": {
    "type": "button",
    "class": "",
    "id": "",
    "style": "background-color: #00baff; border: none; border-radius: 4px; padding: 10px 20px; color: #ffffff; margin-top: 20px; cursor: pointer;"
  },
  "label": {
    "type": "label",
    "class": "",
    "style": "padding-left: 5px"
  },
  "loader": {
    "type": "img",
    "src": "//www.newsletter2go.com/images/loader.svg",
    "class": "",
    "style": "margin: auto; display:block; width: auto;"
  },
  "message": {
    "type": "h2",
    "class": "",
    "id": "",
    "style": "text-align: center;"
  }
}

Simply add this configuration to the call:

n2g('subscribe:createForm', config)

or

n2g('subscribe:createPopup', config)

This allows you to use CSS styles or classes to customize how your form or pop-up looks. 

With forms, you can also use a HTML element ID as a further parameter. This is useful if you want to render the form in a different place than the script tag that you integrate: 

n2g('subscribe:createForm', config, 'targetId')

With pop-ups, you can enter the number of seconds after which the pop-up should appear. This is also available to you as a button during configuration (see above). With the following code, for example, the pop-up would appear straight away:

n2g('subscribe:createPopup', config, 0)

Of course, it is also possible to set the pop-up to be triggered by a mouse click. You can do this by assigning an event to the function (e.g., one-click event). 

For Coders

For even more specific solutions, you can add callback functions to the sign-up form. These will be executed after a successful or unsuccessful sign-up:

n2g('subscribe:createForm', config, 'targetId', successCallback(response, messages), errorCallback(response, messages), confirmCallback(state, messages))

n2g('subscribe:createPopup', config, 0, successCallback(response, messages), errorCallback(response, messages), confirmCallback(state, messages))

As the first parameter, all callbacks provide information about the status. The second parameter is information about the text in the sign-up form.

response.status == 201 Send double opt-in email (Standard message: messages.message_subscribe_doi) 
response.status == 200 User already registered (Standard message: messages.message_subscribe_duplicate) 
response.status != 200 && response.status != 201 Error (Standard message: messages.message_subscribe_error)

The confirmCallback is only activated once the DOI link has been clicked and shows the following status:

state == "doi_success" Registration successful (Standard message: messages.message_subscribe_success) 
state == "doi_duplicate" User already registered (Standard message: messages.message_subscribe_duplicate) 
state == "doi_error" Error (Standard message: messages.message_subscribe_error)

White-labeling

We can also white-label your sign-up forms (for a fee).

In this case, the sign-up form runs on a separate domain, which you can specify. We can design and program the sign-up form exactly according to your preferences. The price depends on the scale of the work involved. For more information, read the tab Custom Sign-up and Unsubscribe Pages under Pricing.