Build a «Notify me» web form

In this article you will find out how to create a signup webform that comes up with a click on a button.

Log in to your SendPulse account

Open «Subscription forms» menu

forms

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

new_form

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

form_type

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

mailing_list

Then go to 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

element

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

design

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

form_options

Here you need to specify the website the form will be placed at, check the form type and other details

data_and_fom_type

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

Such forms have additional parameters.

They can appear «on page load»

condition

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

button_code

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

scroll

«When cursor leaves the page» 

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

notification

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

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

confirmation_text_box

text status will show «Verified» when its ready

confirmation_text_status

When everything is set, click «Apply changes».

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

mailing_list

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

code

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

*Mind that whenever you edit a form in the form builder, you should update the code on your website.

 

default_button

Now you just need to place the form on the website, or add a short code to an existing element of the web page (in this case the short code 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

form-button

Should you need to customize the button design — edit the HTML-code of the button when adding the code on the webpage, but that requires a certain expertise in HTML-coding.

Rate this article about "Build a «Notify me» web form"

User Rating: 0 / 5 (0)

    Other useful articles

    Popular in Our Blog

    Try SendPulse today for free