How to Build a "Notify Me" Web Form

In this article, you will find out how to create a signup webform that comes up after a user clicks on a button.

Log in to your SendPulse account

Open «Subscription forms» menu 

Click «Create a new form,» then start the Form Builder

Here you need to pick a form style: let's select a «Popup» type of form for this example

Pick a mailing list to be linked to the form, or create a new list. 

Then go to the builder to start building a new form
Add elements to the form from the left-hand panel and use the right-hand panel to edit those elements.

Edit texts on the form, buttons, and prompts in the «Element» tab

The font color, style, and size, as well as background color, alignment, and other effects, are set in the «Design» tab

When you're done with form design, go to «Form options»

Here you need to specify the website where the form will appear, check the form type and other details

To get the form to come up after a click on a webpage element, button, text, or a link, select «Pop-up» or «Floating» form styles.

Pop-up forms have additional parameters.

They can appear «on page load»

«On button click» — in this case, button code will be generated with the form code

«When scrolling to a part of the page» — specify what portion of the page must be scrolled down

«When cursor leaves the page» 

Then you can edit the notification text, text of the confirmation email and so on

In this example, we will select the «On button click» display condition

The text of the confirmation email undergoes the moderation procedure, so check its status before publishing the form on your website

text status will show «Verified» when it's ready

When everything is set, click «Apply changes»

Use the «Preview» button to see how the form will look on the website

After that, click «Save» then «Save and get code»

A window will pop up suggesting that you copy the code either from the «Script» or «HTML» tabs

*Remember that whenever you edit a form with the form builder, you need to update the code on your website.

Now you need to place the form on the website or add a shortcode to an existing element of the web page (in this case, the shortcode is sp-show-form="106993")  according to your web hosting provider's standards.

This is the default view of the button. The form opens with a click on the button

If you need to customize the button's design — edit the HTML-code of the button when adding the code on the webpage, but that requires some expertise in HTML-coding.

Last Updated: 12.05.2023