Skip to main content

Overlay subscribe form

Louise MacBean
  • Updated

The subscribe form in your website overlay defines the key sign-up information.

Note: Before you start, make sure you have raised a request to our support team so that they can prepare the necessary custom field for your account.

Go to Campaigns > Website Overlay

Screenshot_2021-05-13_at_10.00.28.png

Set up your subscribe form using the fields available:

Field Description
Title

This is the header for your overlay.

Enter a message that will attract new subscribers, like an exclusive offer, free content or a discount for signing up.

E.g. 10% OFF YOUR FIRST ORDER!

Use the Text Style button to change the size and line height (spacing) of your text.
Content

Use this box to expand on the main message, e.g. minimum spend or how often you will contact them.

Use the Text Style button to change the size and line height (spacing) of your text.
Placeholder text

This is the text that displays in the submission field of the overlay before the visitor enters their email address.

Use this field to provide an example of the information they need to enter here, e.g. ‘Email’ or ‘yourname@email.com’
CTA text Enter the ‘call to action’ text here, e.g. Join, Subscribe, Sign up, etc.
Privacy policy text Required field that gives your visitors the opportunity to understand how you are using their data.
Privacy policy URL The URL on your website where your privacy policy is hosted.

Screenshot_2021-05-13_at_10.15.38.png

Next you can customise your overlay subscribe form:

Block name Description
Font Select one of the 16 available web safe fonts.The font you choose will be applied to all of the text in your subscribe form.
Colours Enter the hex code or use the colour picker to define colours for the following:
  • CTA Background - the call to action button
  • CTA Text - the text on your CTA button
  • Title - the header text
  • Content 
  • Privacy policy 
  • Background - the background colour of your overlay.
Background image

Image size:

  • Height: 350px
  • Width: 500px

Click Browse image to choose a background image from your files. The image displays behind the text on your form.

You can use our Best practice example - .psd as a template - this is safe for devices with a view port width of 360px or more:

  • blue area - text safe area
  • grey area - the positions of your form elements; inputs, button and privacy policy. 
  • white area - extra design space.

The CTA field (where the contact enter their email address) has a width of approximately 384px.

💡 Pro tip: If you have a custom font on your website, you can use this field to upload an image of the text instead of entering the Title and Content.
Alt text

Include a description of your background image for accessibility.

This is great for site visitors with visual impairments who may be using screen readers to navigate.

See: Accessibility in website overlays

Screenshot_2021-05-13_at_10.06.05.png

Next you can customise your Overlay success message.

Related articles

Comments

0 comments

Article is closed for comments.