How to Create an Alert Message on Your Form

Written by Lance Padgett on July 11, 2014

Posted in Form Hacks

By now you’ve heard of our conditional logic feature that lets you show and hide certain fields or sections of your form. Well, I’m here to show you a unique way you can use this feature to create a pop-up alert message on your form. Your alert doesn’t have to be a warning. You can also create a friendly prompt that will help your users along a process.

Below, you’ll see an example of how you can use an alert to give users a message with helpful information. On this church contact form, the visitor first selects the team at the church he/she would like to message. The church noticed a high volume of visitors were messaging the Media Team wanting copies of the week’s sermon.

They created a message prompt that displays a link to their media page. This prompt only shows when the visitor selects “Media Team.” This helps cut down on emails for their Media Team, and allows the visitor to go to their media page where he/she can download the sermon.

contact form

On this example, this season ticket application form gives a friendly message alerting the user that he/she has in fact selected a season ticket package. This prompt is in place to simply eliminate any confusion for the form user.

ticket application form

A message prompt can be used in many ways but should always be focused on how it can help your end user through the conversion process. Whether it’s a subtle alert that just confirms an action or a helpful alert that gets the user where he/she wants to go, an alert box can clear up confusion in many ways.

Okay, now you know why you would use an alert prompt, let’s show you how to create one on your form.

  1. First, add an embed code field to your form where you would like the alert to show.
  2. Next, hop over to the logic settings for that field, and set the conditions under which the alert will show.
  3. Third, return to the field input and use the code below to insert a <div> that will hold your alert content.
POP UP ALERT BOX
<div style=”background:#b283bb;padding:20px;color:#fff;border-radius:10px;”><p>You’ve selected a season ticket package for every home game.</p></div>

alert embed code

To change the background color, pick a new hex code to replace the current color (#b283bb). You can visit colorpicker.com to choose a new hex code. You can also pick a new hex code for the current white text color (#fff).

That’s all there is to it. Check out these three examples with pop up alerts to inspire you to use a message prompt on your form.

Contact form example

Volunteer form example

Ticket order form example