Marketing Automation Consultant | Johan Claeys
Help us spread the word
how to create an online signup form

How to create an online opt-in or signup form?

An opt-in is a form of consent given by web users, acknowledging interest in a product or service and authorising a third party to contact them with further information. The common type of opt-in form simply collects an email address, and possibly a name, and offers something in return  

Tip: How to create an online opt-in or signup form? - is also available as an ebook (pdf) for offline reading. 

Lead generation Form


An Opt-in or Sign-up lead generation form is a device central to online marketing. It is the front door to your contact database. In this eBook, I will explain how such forms are created and used.

Lead generation helps you build a customer base. It’s one of the very first steps in the process of converting visitors into actual, paying customers – online marketers can’t afford to mess it up.

A lead is generated when a stranger provides vital marketing information, usually his/her contact details, in exchange for the services or products that the business offers.
Opt-in and Sign-up lead generation forms are everywhere on the internet. You probably encountered – and filled out – many of them by now.

Generally, they are simple in design and ask for little more than a name and an email address. But there are some details that I certainly remember struggling with when I was learning to make and use them. That’s why I decided to make this ebook.

If you have been following my series of courses on the fundamentals of email marketing, you know by now where you should use opt-in or sign-up forms.
But in this eBook, I’m going to explain how to make them, when to use them, and how to integrate them with the engine of email marketing management - the email autoresponder.
But first, let’s just go over what we mean by these forms.

What is an opt-in or sign-up form?

Common types of Sign-up lead generation Form

dont-miss-out

The most common type of sign-up lead generation form simply collects an email address and in some cases, a name. Potential leads provide you this information because you offer them something in return. Marketers offer different kinds of things in exchange for leads. Some offer free trial periods for premium versions of software and some offer ebooks.

In this example, the concert organizer is offering to send you the dates of the next concert. This is tantalizing for huge fans who do not want to miss out on the experience. They will provide their names or email address because you’re offering them something that they need.

The website’s visitors will just fill out the form, and click the button, and their details will be forwarded to the concert organizer.

Other sign-up lead generation forms would ask visitors to make an account or sign up in exchange for services.

It’s not always easy to get people to do that though. Some forms have too many fields that turn visitors off.

People do not want huge forms that demand too much information for many reasons, the most common of which is that they do not to waste their time. Some people are also wary because of privacy concerns.

When would you use such a form?

Possibilities for collecting email online

You would want to use a lead generation form whenever you want to collect information online. 

many-many-uses

Lead generation forms are used in many scenarios. You can use one when you want people to sign up for your newsletter or subscribe to one of your offered services.

You may want to use when you’re offering online courses. You could use it for event registration, like for webinars. You could even use it to generate interest and invite participants for fun contests, quizzes, or video training. There are many, many uses – the possibilities are endless!

Options for building forms

Directly coding on your website (HTML & CSS)

So how would you build such a form?

html-code

So how would you build such a form?


If you have the required skills in programming, you can code the lead generation form directly into your site. However, most people do not have the background to do this.

Standalone Form Builder

A standalone form builder can be a good solution for a beginner. Some examples are 123ContactForm, JotForm, WuFoo and Optin Monster.  

Lead generation forms can be built through third-party apps like these; the form builder simply generates an embed code.

There is no need for you to learn advanced HTML programming to be able to use embed codes. An embed code is a snippet of HTML code and all you have to do is to copy and paste it where you want it on your website.

If this does not make sense to you, most website owners and forums where website owners congregate would be able to help. You could also visit the resource pages of the source of the Form builders you’re going to use.

Form creation using JotForm

Furthermore, allow me to explain how forms work in JotForm. Suppose you created a contact form, you will see that your fields will appear in a list. Afterwards, you can always return to your contact form to edit and make revisions.

Once you edit your existing form, you will see different elements that are available and make up your form.

contact-form

On the left, you can improve your form by putting additional elements. For instance, you may think of adding a phone element to your form. By simply clicking and dragging, you will have the phone element available in the form that will appear on your webpage.

Once you’re done creating the form you want for your website, just click on the Publish button on the interface of the Form Builder.

Click on the button which says “Copy Code” and you’ll get the embed code for your form. 

Website application plugin. 

WordPress which is one of the most commonly used applications for creating personal websites, has a number of plugins with which you can create lead generation forms from within the WordPress app.

A plugin can be downloaded to allow you to work on the lead generation forms directly as from within your website application.

thrive-architect-logo
thrivetleads-logo

I personally use plugins called Thrive Leads and Thrive Architect, but others include Instapage and Unbounce.

Form creation using Thrive Leads & Thrive Architect
Thrive Architect is a plugin for WordPress. So after creating our WordPress page, we may edit the page by clicking a button on Thrive Architect’s interface – the one that says “Edit with Thrive Architect.” In this example, I’m trying to create an opt-in form for my ebook offer.

wordpress-pages

After doing that, you will be able to see the different building blocks available on the left pane. It’s fairly simple to use because now, you can drag and drop as well as put elements that you need in order to create a form.

thrive-lead-generation-element

In this particular case, I chose elements within the category for Lead Generation. After all, I’m building a lead generation form. In the image below, what happened was that I dragged the lead generation block into the content box.

thrive-sign-up

So now, I have to decide on the elements that I would like to put up there. As in the following image, the form has been built for me with a name and an email address.

I can now customise this form further by editing the form elements and selecting individual input fields in order to change, for example, the name of that input field from “Name” into ”First Name”.

Eventually, I would change the colour of the fields, their position, and the text styling, among others. And I can also do the same with the button. The fields can individually be dragged around. I can select one input field, and decide to move it up.

And by simply saving the page, I will have my form created for me. As you can see, it’s quite straightforward to build forms in Thrive Architect. 

Landing Page Builders

Another option that you can use for building and hosting forms is a Landing Page Builder. Landing pages are standalone pages that do not have the usual menus of your website, and which can be used rather like an online pamphlet or brochure. This is very useful for special offers or events.

landingpage-builders-logog

There are several third-party applications that are really good like LeadPages, ConvertFlow, ClickFunnels, and Instapage. They allow you to build such standalone pages and host them for you. You can decide to embed the pages on your own WordPress or on a different website. 



These apps also allow you to build and integrate an opt-in lead generation form from within the application.

Form creation using Instapage
Next, I’ll show how you can create an opt-in form in a standalone page builder solution like Instapage that is very visual.

instapage-homepage

You can easily select elements and in fact create an opt-in form through clicking on a button, like shown in this example, which will generate a pop-up or a light-box.

I can then select an image from the elements on top. I can customise the format of the image and put a header element as the headline. That way, I can now invite people to download an eBook.

Lastly, a form element for my Free eBook is added onto that light-box. Again, it's a visual element that I can drag onto that box. I just have to customise the input fields and the button text.

So as you can see, it is quite straightforward and easy to build a light-box in our standalone, landing page builder, Instapage.

Email Storage Solution

Email storage solutions will also have forms that you can embed on your site.

email-storage-solutions-logos

An email storage solution is one that will collect, store and manage your email contact details, and these are usually list-centric, which means that they focus on segmenting your contacts into different lists.

MailChimp is a popular email storage solution, and it also has a plugin that allows you to build lead generation forms on your WordPress site. Others include AWeber and VerticalResponse.

Form creation using MailChimp

MailChimp is an email automation solution, which means that you can use it to send messages to customers at times of your choosing. To begin with, you will need to create a list from where you will create your forms.

form-creation-mailchimp

MailChimp is list-oriented, and as such, the forms will provide the list in it.

Mailchimp-download-book

Once you have selected your list, you can create a sign-up form which you want to build and design.

As you notice in the picture, MailChimp has created my form using the default settings -- all the input fields are available. This is done by simply selecting General Forms.

I can now reposition the fields if I like. I can also add fields. For example, if I want a phone on that form, it will be added as a field, and also added as a field in my list.
So I now have my form ready with the phone number field. The next step is to design it.

I can select the different parts of the form like the page and decide on a color for that page. For example, I chose pink for the page and if I want another color for the body of the form. I can just select the colors I want. I can really customize this form completely.

form-creation-mailchimp

Once it is customized, I can share the URL or embed the code on my website.

That’s how easy it is to create a lead generation form in MailChimp for downloading an ebook.

Marketing Automation Solution.

Marketing automation solutions - like ActiveCampaign, ConvertKit, Marketo, InfusionSoft, SalesForce Pardot - are similar but are more contact-centric, which means that they focus more on building the profiles of the individuals in your lists.

marketing-automation-solution-logos

Form creation using Active Campaign

When you dive in ActiveCampaign, you will find a form tab and a green ‘new form’ button, which will enable you to create a sign-up form (for example, a Newsletter).

form-creation-activecampaign

What you can do during form creation is to indicate an action, so by default you will be subscribing the form data into a list of your choice. For example, the Newsletter list.

Once you have done that, ActiveCampaign will create the form by default with the Full Name and Email address fields displayed.

You can further customize the form by selecting additional fields. For instance, you can select the Website field element and simply drag and drop it additionally onto that form.

subscribe-form-activecampaign

You can also continue the styling by selecting the necessary background color, font color and customize the button. In the options tab, you can also decide what the form needs to do once it is submitted.

Host your forms elsewhere. 

Whatever application you use to create your form, you can decide on embedding and publishing the lead generation form on your website, landing page builder, or any service of choice that can host your forms


host-forms-elsewhere

This generally comes down to copying some code or snippet that you paste into the page for display.

Other Proven Display Modes

A look at positioning of lead generation forms

positioning-lead-generation-forms

Perhaps you have noticed on websites the common positioning of lead generation forms. They may be embedded within the text, floating as a bar or a box. They could also be modal, often referred to us pop-ups or light boxes, popping over the website content as people leave or enter your site.

Inline form

inline-form


The inline form is the display format you will most often see.  Here, you display your lead generation form inline, in between text or paragraphs, on your web pages. 

Variations of inline display are as post footer or as a widget on the right-hand side of your blog or website page, seen in the following image.  Inline forms slightly interrupt the browsing experience.

Floating bar form

floating-bar-form

The floating bar form is the one that comes sliding in. With the floating bar, you convert subscribers without interrupting their browsing experience, displaying your campaign at the top or bottom of the browser window.

Floating box form

floating-boxes-form

​Floating header and footer bars are highly noticeable!  You see them mostly in combination with a countdown timer for time-sensitive offers - for creating a sense of urgency to persuade visitors to make an immediate purchase.

You can also trigger a specific floating bar based on the visitor’s date or time to announce seasonal offerings. Or use them as call-to-actions to engage with you such as on social platforms.

You will likewise notice that Floating Bars are used to promote content upgrades for your blog post.

Modal or Light-box pop-up

modal-popup

​The light-box is an "unignorable" way to get in front of your visitors and turn them into subscribers. You can convert subscribers by really interrupting their browsing experience. Some modal pop-ups can be annoying for visitors and therefore it is a good idea to tweak the settings as regards when they should show up.

For example, you could tweak the light-box to pop up:

  • on Page Load
  • after a certain period of time 
  • when the user scrolls to a specific part of the content
  • when the user scrolls to a percentage of the way down the content
  • when the user clicks an element
  • when the user is about to exit the page
  • when the user reaches the bottom of the page

Form Display variations

We have covered four of the most proven display modes. You will notice that many display modes are also available in many standalone Form Builders or Landing Page Builders where you have other variations for displaying your lead generation forms. For example, Thrive Leads has nine form display variations to choose from.

thrive-leads-popups

Experiment and choose

By now, you have understood that there are many possibilities when you create forms, and you will need to decide on a lot of things. Following are just some of the decisions you need to make:

Would you prefer an all-in-one solution like Thrive Architect, that allows you within WordPress to create different kinds and styles of forms and also link them to your email service solution?
Would you rather set them up yourself and link the form and the email solutions and Do you have the IT skills to do that?

Embedding Your Form

How about embedding your form elsewhere?


 I have shown you how it is possible to build and link your form from within WordPress, but what if you want it embedded elsewhere such as a Joomla or a Drupal site?

joomla-logo
drupal-log

How can I display working forms elsewhere?

So, that’s all beautiful to see. Websites, landing pages, floating bars, modal pop-ups, floating boxes and even third-party services can display my lead generation form. 
But how do I actually integrate my forms? How do I make it happen?

thrivethemes-logo
thrive-architect-logo
wordpress-logo

It’s pretty simple. Just copy an embed code which is a snippet of JavaScript or HTML that the form builder produces and paste it in the correct position on your website.

javascript embed

Now, one of things to consider is whether you’re using JavaScript or HTML.
If you use JavaScript, then any edit you make to the lead generation form in your Form

Builder is automatically reflected in the form you place on your web asset. In a sense, the JavaScript functions like a mirror.

That is not the case with the HTML embed.  Any edit you make to a lead generation form in your form builder is NOT automatically reflected in a form that you integrate via embed.  For changes to be reflected, you have to make edits directly in the main code.  This option is ideal for developers who want to have complete control over the form’s creation.

Opt-ins and signup forms are the front doors to your email storage solution.
By now, you should have a very good overview of how to make a working opt-in or sign-up form.

Make sure your opt-ins and signup forms are well designed and well-embedded onto your website!

Thank you for giving time to read this eBook.

About the Author Johan Claeys

I am a fluent multilingual Digital Automation Specialist, focused on listening to needs in terms of digital marketing. Interfacing with clients to help them with their online marketing, working with the client to nurture their customers via robust systems for collecting and managing emails. Via carefully thought-out Lists, Tagging and Automations helping to turn a jumble of emails into a valuable Contact Directory where contact is maintained without spamming.

follow me on:
>