We all know how time consuming and expensive development projects can become, especially if you need to outsource to third parties. Here, at display block, we are always looking for ways to make basic development work as simple as possible. A few clicks here, a few settings there, and away you go. One new such tool we are now able to offer is the ability to add pop-ups and alert bars to your website with nothing to suggest it’s coming from an external source. These pop-ups are controlled entirely within the platform, set up in an intuitive code builder environment and require no coding skill. Here are the basic steps in setting up, for example, a newsletter sign-up pop-up (try saying that 10 times fast):

Create the pop-up form

Once you create your blank pop-up form you can work your way through the various settings. These allow you to design and build your form exactly how you want in a logical and flowing way. You will have control over these elements:

• One of 4 pre-set layouts with optional images, and the page position you wish the pop-up/alert bar to appear.
• A choice of popular fonts and Google fonts and font sizes to use for your text, links and headers.
• Background colour and padding, field spacers and dividers.
• You can import your own images.
• HTML form elements which can be assigned to specific fields in the platform to capture the information including text input, text area, drop down, radio group, checkboxes.
• You can add in required check boxes to confirm marketing consent and privacy policies.
• Styling for the submit button.

You then need to decide what happens after submission. This includes:

• Whether you simply capture the data, or trigger a workflow to do something else e.g. send a welcome email.
• Whether to keep them in the pop-up window and replace the contents with a success message or to redirect them to a new page. If you display a success message you can then also redirect after that to a new page after a set period.
• If there are required fields people don’t fill out, you can customise the error message to them to help them complete the form successfully.
• You can clone the style of your original form to your success page making it seamless for the user after they submit.

You can see a demo here, which you can follow through all the way to a “welcome” email or in our case a “mystery” email to see how smooth a process it is.

Adding to your website

Once your design is complete you can simply generate the code to add to your website:

You can customise this to decide whether to auto load the pop-up window when the page is first opened or not, and if so, how long to wait. Next, you can block this pop-up from returning for a set period if it was dismissed or submitted. That way you don’t annoy your repeat users. You can also control how long to leave it up without activity and whether it appears instantly or fades in and out. Then it’s just a case of copying and pasting the code to any pages you wish this to appear.

Integration and Insights

For the more advanced coders you can also integrate your form with Google Analytics just by entering your Property ID and specifying the parameters you wish to pass back. You can add in a tag for Google Tag Manager to help you identify your form’s performance. Finally, you can add in custom Javascript if you need your form to do more than the basics.

You can also see basic insights into how many people have used the form and how long their sessions lasted to get an idea of how much interaction your form is receiving:

So, with no coding skill whatsoever you can produce a professional looking pop-up form or alert bar which you can have total control over. The demo showcases how the pop-up form and alert bar will look (if you hang around long enough) and materialise as the user browses the page, all of which took me no more than 20 minutes to create. We’ve got plenty more development tools out there to make life as simple as possible. Feel free to contact us with any projects we may be able to help with.