Sign-up forms are the best & safest way to build your list with consenting contacts.
The platform provides you with the HTML code for a secure and GDPR compliant sign-up form to add to your website.
Each form includes reCaptcha and double opt-in by default.
Generating a signup form
Every list in your account will have a “signup form” menu item. Clicking that will open the signup form modal.
From there you can copy the code to paste somewhere or download an HTML page containing the HTML code.
Completing a sign-up form
Whilst this code will work out of the box once hosted online, there are two lines of code you should modify to optimise the user experience.
Success Page
This allows you to specify what page the user sees once they’ve submitted their email address.
To take your new sign-ups to a page of your choice once they have successfully signed up, replace: NO-REDIRECT with the url you want them to end up on. eg:
<input type="hidden" name="successUrl" value="http://example.com/success.html"/>Error Handling
There is always the chance that someone enters in an email address that is not formatted correctly, ie: doesn’t have an @ sign etc.
When the form is posted there is some basic validation performed on the email address and if there is an error, the default page is an empty page containing the error.
To send your subscribers to a branded page in the case of an error, add the url of that page to the value of the “errorUrl” field eg:
<input type="hidden" name="errorUrl" value="http://example.com/error.html"/>If you would like that error page to show the error itself, put our error tag into that page:
{~error~}This way, in the case of an error, the form will redirect to the page holding the content of your errorUrl and the {~error~} tag will have been replaced by the error itself. Your subscriber can then hit back in the browser, correct the error and submit successfully.
Adding the error tag is optional, you are free to simply use a more generic error page but you risk your subscribers not knowing why they have a problem.
Go Live
Once you have added your success and error urls, a completed form could look like this:
And with the help of a little CSS, it could render like this:
reCaptcha
To avoid subscription bombing, it has become best practice to add some kind of “are you human” test to signup forms. Anyone who has been a victim of subscription bombing will know that the effects on your deliverability can be dire and takes a lot of work to come back from.
Our favourite method is Google’s reCaptcha and this is integrated into the platform.
All sign-up form users are required to pass reCaptcha before your account will accept the form contents.
Using recaptcha
When you test your new form, if there is any kind of validation problem with the details in the form, you will be redirected to the error page.
If you have not supplied a custom error page, you will see a clear page containing only the error.
These are the three errors you could see if reCaptcha has not been set-up correctly:
Error Message: “ERROR: reCaptcha failed”
Explanation: If you see this error message, it means that a form has been submitted without the reCaptcha box being checked and subsequently not passing the reCaptcha test.
Solution: Go back to the sign-up form (eg: back in your browser) and submit the form again with the box ticked.
Error Message: “ERROR: Profile requires reCaptcha”
Explanation: If you see this message, it means that your profile requires reCaptcha but the form you submitted did not contain the reCaptcha code or it has been incorrectly added.
Solution: Follow the steps on this page for adding reCaptcha and try again.
Error Message: “ERROR for site owner, Invalid domain for site key”
Explanation: This error will show when you open the form, rather than after you have submitted it.
You will likely only see this message if you have opened an HTML file stored locally on your computer, eg: double clicking on it; instead of it being hosted online where you will need to type/paste its url into your browser.
Solution: Upload the HTML page online and type/paste in its url to your browser. If you have your Image Library’s FTP details you could host it there.
Error Message: “This page says, Cannot contact reCaptcha. Check your connection and try again”
Explanation: This error will be a pop-in alert from your browser (eg: Chrome) and show when you open the form, rather than after you have submitted it.
You will likely only see this message if you have opened an HTML file stored locally on your computer, eg: double clicking on it; instead of it being hosted online where you will need to type/paste its url into your browser.
Solution: Upload the HTML page online and type/paste in its url to your browser. If you have your image library’s FTP details you could host it there.
Double opt-in
GDPR’s requirement for unambiguous consent has shown that a sign-up form can have any email address entered by anyone. Meaning that an address someone enters might not be theirs. The safest way to remove that ambiguity is to have the owner of the address confirm their subscription from inside their inbox by sending them an email with a link to click. This is known as double opt-in also referred to Confirmed opt-in (COI).
When someone successfully submits a signup form into the email platform the default plain text double opt-in email is set with a unique link for that person to click to complete the opt-in.
Until they have clicked that link, that contact will exist in your list and profile but their status will be ‘limited’. This means they have not completed the double opt-in process and will not be sent any campaigns until they do.
Branded double opt-in message
It's recommended to have a fully branded double opt-in message to maintain the momentum of engagement and support the subscriber onboarding experience.
You can achieve this by creating a double opt-in sign-up automation against your list.
In order to do this, you will need to create the double opt-in message to choose when you set-up the automation. You can create your message in any editor and use the “Optin URL” snippet or make a new Drag & Drop message and select & modify one of the two ‘Double opt-in” templates from the template library.
Double opt in link to include, this could be behind a line of text or a button:
{~optInUrl~}
Toggling double opt-in
Whilst double opt-in is best practice and border-line legally required, it is still optional. Under GDPR consent is not the only way you can qualify to market to a person and/or you may have your own way to obtain unambiguous consent without using our double optin.
If this is the case and you need to disable it, as well as deleting a double opt-in signup automation you may have on that list, you need to add one line of HTML into your form:
<input name="doubleOptin" type="hidden" value="false" />Extending a sign-up form
It is best practice to ask for as little as possible in a signup form, to optimise engagement & convenience for subscribers, then ask for more later as part of the long tail.
However, sometimes you want to have a first name for a more personalised experience. You may even want to ask a lot in order to qualify a lead. All of this is possible simply by adding a few more html inputs with the right names (feel free to share this page with a coding colleague to refer to).
Text inputs
Whilst it is best practice to ask for as little as possible on a form, it is sometimes popular to ask for one more thing, like a first name for instance.
If, for example, the list you are sending data to had a field called “firstName” you can manually add another HTML input named ‘firstName’, eg:
First Name: <input type="text" name="firstName"/>As long as that line is inside the opening and closing form tags, it will deliver the value entered in that text box to the list field of that name on that email address’s record.
This works for any text field you may like to collect, you are limited to 250 characters per field and the field names are case sensitive.
Radio Buttons
This is used when you want to give someone multiple options to choose from and allow them to only choose one, eg: gender.
The rules are the same as the text fields, the name of the input needs to match the field name in your list.
<input type="radio" name="gender" value="male"/> Male<input type="radio" name="gender" value="female"/> female
Check Boxes
This is used when you want to give someone multiple options to choose from and allow them to choose more than one, eg: preferences;
Weekly Newsletter: <input type="checkbox" name="preferences[]" value="news"/>Special Offers: <input type="checkbox" name="preferences[]" value="offers"/>
This is slightly different because it needs to deliver more than value for the same field name, to do this you add a square bracket to end of the field name.
When these values are delivered to the list field, they will be comma separated, eg: if both options were chosen from the above example, that record’s preference field will say “news,offers”.
Other input types
For other fields types like drop down menus, the rules are the same as text and radio buttons, as long as the input name is the same as the field name in the list, the selected value will be sent in with that record.
If the input allows more than one value to be selected, add square brackets on the end of each inputs’ name.
Legacy forms
Securing older forms,
Whilst all new profiles and accounts created since August 2017 require reCaptcha to accept sign-ups and have HTTPS, some profiles and forms pre-date that and might not be secure.
HTTPS
Before Google started to penalise sites for not having HTTPS, some users preferred to use their own ‘custom domain’ to post to instead of ours. However, this is incapable of being an https domain, consequently if the site the form it is hosted on becomes https (as most are now) posting to that domain will cause browser security errors.
In order to avoid this, please endure the ‘action’ url in your forms all say:
Add reCaptcha to a form
In order to add reCaptcha to a PureCampaign sign-up form, you need to do three things to the sign-up form HTML:
1. Ensure the Action value in your form is:
2. Add the following lines of HTML code to the signup form HTML.
The <script> tag can be anywhere on the page, ideally above the <div> tag; it is fine to be inside of the <form> tag html.
The <div> tag needs to be inside of the <form> tags and will be where the reCaptcha interface appears, so we recommend you put it just above the submit button.
3. Let us know you have a reCaptcha enabled sign-up form live.
Log into your PureCampaign account and fill out the Contact Customer support form to let us know you have put a reCaptcha form live. We will do a quick check to ensure you are protected.
If you already have other sign-up forms posting into your PureCampaign profile(s) which you do not want reCatpcha to be used on, please let us know because they may no longer work.
Self hosted reCaptcha and integrations
If you have your own ‘human verification process’ and/or you have an integration which you believe needs to post in contacts like a sign-up form and reCaptcha will block this – which is its purpose, please contact support and we will advise you of the best approach to facilitate your needs.
Validation
Instead of relying on our form error handling, you may like to add your own validation in the HTML. There are a lot of basic validation resources out there to check email format so people can only submit a full email address.
Some go a bit further and check for typos in domains, check that the domain itself accepts emails and some go as far as checking the email itself works, whether it is a temporary address, a commonly used made up address, a false address or even a spam trap.
Preference centres
It is possible to use these forms as a full preference centre, where you can direct your subscribers to a form which pre-populates with their existing values from a list and allow them to update them.
If you are interested in adding any of this advanced functionality to your forms, please contact us.