Embedding the Form
In the second step of the creation process, you will find several options for integrating the registration form into your website.
Linking / iFrame
Under "Access hosted form", you will find the direct web address (URL) of your registration form. You can link to this URL directly from your homepage or embed it as standard iFrame content.
Embedding as a Form (Recommended)
Simply copy the JavaScript snippet found under "Embed form". This snippet is fully responsive by default, ensuring optimal display on all mobile devices.
Paste this code snippet into the HTML source code at the exact position where you want the form to appear. The form will render automatically when the page loads and is immediately functional.
Note: If you wish to customize the design or if you cannot insert the code at the precise target location, please refer to the JavaScript API section for advanced options.
Embedding as a Pop-up
Enable the "Pop-up" option and specify the desired display delay (e.g., 10 seconds). Then, paste the generated code into your website. The form will automatically open as a pop-up window after the specified timeframe.
For details on customizing the pop-up's appearance, see the JavaScript API section below.
Video Tutorial: You can watch a step-by-step demonstration of how to create and integrate a form in our accompanying video tutorial.
Customizing the Form (JavaScript API)
The subscribe:createForm and subscribe:createPopup functions each accept two additional optional parameters to help you fully tailor the form to your needs.
The first parameter allows you to pass a configuration object (JSON) to define the styling. The following default layout configuration is applied automatically and can be modified as needed:
var config = {
"form": { "class": "", "style": "" },
"container": { "type": "div", "class": "", "style": "width: 100%;" },
"row": { "type": "div", "class": "", "style": "" },
"columnLeft": { "type": "div", "class": "", "style": "width: 40%; padding: 10px 5px;" },
"columnRight": { "type": "div", "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;" },
"captchaImage": {
"type": "img", "class": "", "style": "padding: 5px; border: 0px solid #fff; margin-top: 5px; width: 32px; height: 32px; cursor: pointer; display:inline;",
"style:active": "padding: 5px; border: 3px solid #ccc; margin-top: 5px; width: 32px; height: 32px; cursor: pointer;"
}
};
Simply include this configuration object in your function call:
n2g('subscribe:createForm', config); // For embedded forms n2g('subscribe:createPopup', config); // For pop-up forms
This allows you to control the look and feel directly via inline CSS styles or custom CSS classes.
Additional Parameters for Forms: You can pass the ID of a target HTML element as a third parameter. This is useful if you want to render the form in a different location than the script tag itself:
n2g('subscribe:createForm', config, 'targetId');
Additional Parameters for Pop-ups: You can specify the display interval in seconds as a third parameter. For example, the following code will open the pop-up instantly:
n2g('subscribe:createPopup', config, 0);Alternatively, you can choose to trigger the pop-up only after a user action (such as a mouse click) by binding the function to a specific event handler (e.g., the onclick event).
Advanced Customization for Developers (Callbacks)
To implement highly customized subscription workflows, you can pass callback functions that execute after a successful or failed registration attempt:
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));All callbacks pass status details as the first parameter and the default localized text strings configured in your system as the second parameter.
response.status == 201: Double Opt-in (DOI) email sent. (Default text:messages.message_subscribe_doi)response.status == 200: Recipient already subscribed. (Default text:messages.message_subscribe_duplicate)response.status != 200 && response.status != 201: An error occurred. (Default text:messages.message_subscribe_error)
The confirmCallback is triggered only after the recipient clicks the confirmation link within the DOI activation email, returning the following status states:
state == "doi_success": Subscription successfully completed. (Default text:messages.message_subscribe_success)state == "doi_duplicate": Recipient already subscribed. (Default text:messages.message_subscribe_duplicate)state == "doi_error": An error occurred. (Default text:messages.message_subscribe_error)