This tutorial saves 2 hours of development time

“Focus your time on getting users to your landing page than building it”

Landing pages are crucial in building a list of subscribers that identify deeply with the problem you are trying to solve; so much so that they can't wait to try out your solution. As a founder, the last thing you want is to put in hundreds of hours development time in a product that no one needs.

In this tutorial, we will add an HTML form to our landing page so we can collect email addresses of visitors that are interested in the product. We will use GetForm’s generated POST endpoint to save and access the information collected.

In a rush? We have the source code ready to go on CodePen. Feel free to use it in commercial projects.

What we will build

At the end of the tutorial, we can expect to get a result like below.

Let's get started!

Prerequisites

  • Create an getform.io account
  • Have a ready HTML landing page or use on the free templates from Cruip.

Add a simple HTML form

First up, we need to add a simple HTML form to our landing page. It will include – an Email Address input and a Submit button. Let's add the HTML below to our index.html.

<form>
	<input type="text" name="email_address"><br>
	<input type="submit" value="Submit">
</form>

Note: For better conversions rates, always add the call-to-action at least twice on the page – one at the start and the other at the very end. Check out other SAAS company landing pages to see what works for them here.

Add CSS Styling (Optional)

Completely an optional step, but it’s important to make the form look like it belongs on the page. We are using Vanilla CSS to give the form some character. Let's update the HTML in our form like below.

<form class="site-search single-block-form">
	<input
          type="text"
          name="email_address"
          placeholder="Enter your email"
          class="sbf__input"
	/><br />
    <input
          type="submit"
          value="Get Started Free"
          class="sbf__button button"
    />
</form>

Let's add this CSS to our main.css and add some styling.

*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.single-block-form {
    display: inline-block;
    position: relative;
  	width: 400px;
  	border: solid 1px #6241FF;
}

.sbf__input {
  	width: 100%;
}

.sbf__button {
    position: absolute;
    right: 0;
    top: 0;
}

input[type="text"] {
    display: inline-block;
    line-height: normal;
    padding: 14px 10px 10px;
    vertical-align: middle;
    border: 0 none;
}

.button {
  	background-color: #6241FF;
    border: medium none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 0;
    padding: 14px 30px 10px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms ease 0s;
    vertical-align: middle;
    white-space: nowrap;
}

Full source code available on CodePen here.

Set up GetForm

Create a new form on GetForm and give it a name; any name is fine. Once the form is created, we can copy over the POST url generated for us. It should be of the format: YOUR_GETFORM_ENDPOINT = getform.io/f/87229a67-264a-4dbc-9485-w5e3e661a247.

We can now update the form and add our POST endpoint like so.

<form method="POST" action="{{YOUR_GETFORM_ENDPOINT}}">
	<input type="text" name="email_address" /><br />
	<input type="submit" value="Submit" />
</form>

Let’s test out our system by submitting our email address. The captured information will now be available in the getform.io dashboard.

Conclusion

In this tutorial, we saved 2 hours of our development time by learning how to set up a POST endpoint on GetForm and submitting captured information to it.

Complete source code available at CodePen. Feel free to use it for your commercial projects.

Next Steps

  • Set up GetForm integration with Mailchimp and send an automated thank you email to your subscribers
  • Host your landing page on Surge