Subscribe form generator

How to set up and generate code for a subscribe form.

Mailkit allows you to generate html code to be placed on your site, allowing your visitors to easily sign up to your subscriber list.

The subscribe form generator is located in the menu Profile/Subscribe forms. You can easily set the display mode and other parameters in the subscribe form generator. The process of registering recipients via this form takes place in double opt-in mode and all relevant data are stored in the system.

• Mailing list - the target mailing list to store subscribers
• Sender - the sender address used to send confirmation emails
• Mail template -  a template selected from the drop-down menu will be used to set the appearance of the confirmation email as well as confirmation page. The list will only show templates that have a confirmation page template setup.
• Return URL - a web address that the user will be automatically redirected to after signing up using the subscriber form.
• Display mode - select the mode of displaying the subscribe form. Options are:
  • Inline - display the form inline in the body of your page at the location as defined in the html code of the page.
  • Pop-out - pop-out the form in an overlay window centered on the page. This option has additional parameters:
    • Initiate on click - pop-out the window on click, eg. when a button is clicked
    • Pop-out delay - pop-out window will be displayed after the visitor has spent at least defined number of seconds on site
    • Pop-out Repeat Interval - the earliest time in days the pop-out window will be displayed to a visitor after intentionally closing the window
    • Pop-out - Minimum Site Visits - the minimum number of visits to the site by the visitor to show the window
    • Pop-out - Minimum Page Visits - the minimum number of visits of a single page on the site by the visitor to show window
  • Slide-out - slide out form from the side of the browser screen. This option has additional parameters:
    • Slide-out Scroll Position - slide out the form after the visitor scrolled at least to a specified position (percent) of the page
    • Slide-out Repeat Interval - the earliest time in days the slide-out form will be displayed to a visitor after intentionally closing it
    • Slide-out Direction - the direction from which the form will slide out, eg. left or right side of the browser window
  • Bar - display a fixed susbcribe bar at the top or bottom of the browser window.
• Fields to include - the basic set of information that you wish to collect from the subscriber during signup in the form.
• Additional custom fields - the extended information to collect on the form or pass from the form to the recipient record.

Once you've selected the settings, you can click the Generate code button. The sample subscribe code will then be displayed in a new window. This sample susbcribe code can be customized to fit your site's look and needs and fields that don't require user input (usually custom fields) can be hidden.

The default subscribe form script also contains a set of system/error messages to help fill out the form correctly, or to inform the recipient about the sending of a confirmation e-mail, for example.. 

If you want to edit a set of messages or add additional language mutations (based on the language settings in the recipient's browser), proceed as follows:

First, you need to create a JSON file with a defined structure. It is given as follows:

“lang_code” : {
	“translation” : {
		“translation_key”:”translation string”
}
}

The final JSON file can look like this, for example:

{
	"en": {
		"translation": {
			"email_added" : "Your address has been added to the mailing list.",
			"email_exists" : "Your address already exists in this mailing list.",
			"email_confirmation_sent" : "An email with a confirmation link has been sent to your address.",
			"invalid_auth_code" : "An invalid authorization code has been used.",
			"invalid_form_auth_code" : "Invalid form authorization code.",
			"invalid_email" : "An invalid email address has been entered.",
			"did_you_mean" : "Did you mean",
			"required_field_error" : "This field is required."
		}
	},
	"de": {
		"translation": {
			"email_added" : "Ihre Adresse wurde der mailingliste hinzugefügt.",
			"email_exists" : "Ihre Adresse existiert bereits in dieser mailingliste.",
			"email_confirmation_sent" : "Eine E-Mail mit einem bestätigungslink wurde an ihre adresse gesendet.",
			"invalid_auth_code" : "Ein ungültiger autorisierungscode wurde verwendet.",
			"invalid_form_auth_code" : "Ungültiger formularautorisierungscode",
			"invalid_email" : "Eine ungültige E-Mail-Adresse wurde eingegeben.",
			"did_you_mean" : "Hast du gemeint",
			"required_field_error" : "Dieses feld wird benötigt."
		}
	},
	"cs": {
		"translation": {
			"email_added" : "Vaše adresa byla přidána do seznamu příjemců.",
			"email_exists" : "Vaše adresa již je v seznamu příjemců.",
			"email_confirmation_sent" : "Na vaši adresu byl odeslán e-mail s odkazem pro potvrzení.",
			"invalid_auth_code" : "Byl použit neplatný autorizační kód.",
			"invalid_form_auth_code" : "Neplatný autorizační kód formuláře.",
			"invalid_email" : "Byla zadána nepřípustná e-mailová adresa.",
			"did_you_mean" : "Myslel jsi",
			"required_field_error" : "Toto pole je povinné."
		}
	},
	"sk": {
		"translation": {
			"email_added" : "Vaša adresa bola pridána do zoznamu príjemcov.",
			"email_exists" : "Vaša adresa už je v zoznamu príjemcov.",
			"email_confirmation_sent" : "Na vašu adresu bol odoslaný e-mail s odkazom pre odhlásenie.",
			"invalid_auth_code" : "Bol použitý neplatný autorizačný kód.",
			"invalid_form_auth_code" : "Neplatný autorizačný kód formulára.",
			"invalid_email" : "Bola zadaná neprípustna e-mailová adresa.",
			"did_you_mean" : "Myslel si",
			"required_field_error" : "Toto pole sa vyžaduje."
		}
	}
}

The values for "translation_key" (e.g. "email_added") need to be preserved, the values for "translation_string" can be defined as needed.

In order to be able to use the custom JSON file, it is necessary to define the URL of the file as langUrl when inserting the form code:

<!-- Start mailkit embed Javascript code. Do NOT modify this unless you know what you are doing! -->

<script>var e = {langUrl:”https://your-domain.com/path_to_lang_file.json”,type:"double", dml:"12345", 
fc1:"4ab1028e153aaed9",fc2:"3fcfca4G52s7aae1", dt:"56789" , returnUrl:"https://www.mailkit.cz" , autosuggest:true,
fromEmail:"helpdesk@mailkit.eu", fromName:"Mailkit"};window.eiji79hm3=e;s=document.getElementsByTagName("script")
[0];qc=document.createElement("script");qc.src="//static.mailkit.eu/_system/subform.js";qc.setAttribute("dvar",
"eiji79hm3");s.parentNode.insertBefore(qc,s);</script>

<!-- End mailkit embed Javascript code.  -->

<!-- Start mailkit form styles.  You can add your overrides, AND/OR modify the existing selectors here.-->

<link rel="stylesheet" href="//static.mailkit.eu/_system/subform.css">

<!-- End mailkit form styles.-->

<!-- Start mailkit inline html. You can modify labels and add classes but make sure that the field names, ids stay 
the same -->

<div id="mailkit_instance_inline_12345" class="mailkit_instance mailkit_inline">
<form method="POST" data-id="eiji79hm3">
<div class="mailkit_email">
<label for="email_inline">E-mail</label><input type="text" name="email" id="email_inline" value="" class="required" >
</div>
<div>
<label for="first_name_inline">Jméno</label><input type="text" name="first_name" id="first_name_inline" 
value="" class="required" >
</div>
<div class="mailkit_submit"><button type="submit">Subscribe</button></div>
</form>
</div>
<!-- end mailkit inline html. -->

The URL address for the JSON file (if the JSON file is e.g. in another domain) must be accessible from the original location where the form script is inserted, otherwise overwriting the translations will not work.

In the case of second-level languages (e.g. regional variations such as de-AT, de-BE), the translation script will first try to find a second-level translation. If it doesn't find it, it falls back to the first level translation (e.g. de in this case). If the script doesn't even find a first-level translation, it will automatically fall back to English.