How To Create A Registration Form in HTML From Scratch

/ real-life wins
Vrinda Singh

Providing your customers with simple signup and registration forms on your website is essential for capturing leads, growing your mailing list, and boosting your overall sales. But there’s a problem: HTML.

HTML is the standard code used to make most web pages and web apps. But like most programming languages, there’s a steep learning curve, especially if you’ve never touched any coding in your life.

Fear not, we’re going to change that. With some simple examples, you’ll be ready to create a basic registration form using HTML. Let’s get started.

But before we begin: Do you really need to create a form using HTML? Consider using a form building tool like Paperform to save time and create a more powerful and professional looking registration form in minutes.

You might also duplicate one of our registration form templates to get started faster.

Step 1: Choose a HTML editor

To create HTML code, you’ll need an HTML editor. There are dozens on the market and many are free to download.

Popular editors include:

  • Codepen
  • Notepad ++
  • Kompozer
  • Sublime Text
  • NetBeans
  • CoffeeCup
  • Phase 6 HTML Editor

All of these editors have large interfaces that enable you to manually enter the code.

Step 2: Create a new file with .HTML extension

The next step is to tell your operating system that you intend to create a new HTML file. Do this by creating a new file and then saving it with the .html extension. It’s easy: just type the file name (whatever you choose), and then follow it with .html. For example: [myfile.html].

Step 3: Type <html> into the editor

This command tells the editor that you intend to create HTML code, and it will automatically generate the following code for you.

<!DOCTYPE html>
<html>
<head>          
      <title></title>
</head>
<body> 
    
</body>
</html>

Still Want To Build That Registration Form With Raw HTML?

Use Paperform instead — free 14-day trial

14 Day Free Trial, No CC Required

Step 4: Fill in the fields and create the form

Once you’ve reached this stage, the next step is to start filling in fields outlined by the above template and create the form.

Type:

<!DOCTYPE html>
<html>
  <head>
     <h1> Company Registration Form</h1>
  </head>  
<body>
<form>	
     <table>		
           <tr>			
               <td>				
                   Email Address:			
               </td>			
                <td>				
                   <input type=”text” email=””>			
                </td>		
           </tr>
            <tr>
                 <td>				
                   Password:			
                 </td>			
                 <td>				
                  <input type=”Password” name=””>			
                 </td>		
           </tr>	
     </table>
</form> 
</body>
</html>


Here's what this basic code will produce:

The command “tr” tells the code to arrange the following statements into a row. The “td” code stands for “table data” and tells the program that the what you type next is the data you want to have in your registration form.

You’ll notice that each time you want to create a new field in your table, you have to type the command “tr” and then close the command with “/tr.” You can add as many fields to your form as you like.

Here, we’ve just added two for simplicity, but there’s nothing stopping you from adding additional fields such as telephone numbers, reasons for getting in contact, name of the user’s favourite dog, etc.

You’ll also notice that we’ve been very specific about the input type. When the user types in their email address, the text will appear on their screen, just as it would in a regular word processing document or a search bar. But in the second field we specified the input type as “password” which instructs the program to conceal it and show each character as a little dot.

Step 5: Add placeholders

A placeholder is text inside your form's fields that's prompts users to respond to each field in a particular way.  Here's how you can easily add prompt texts to your HTML registration form:

<!DOCTYPE html>
<html>
<head>
<h1> Company Registration Form</h1>
</head>
<body>
<form>
	<table>
		<tr>
			<td>
				Email Address:
			</td>

			<td>
				<input type=”mail”  placeholder=”Email” name=””>
			</td>
		</tr>
<tr>
<td>
				Password:
			</td>

			<td>
				<input type=”Password” placeholder=”Password” name=””>
			</td>
		</tr>
	</table>
</form> 
</body>
</html>

Typing in this new code will produce a form like this:

You can also create additional options for customers to select their age or gender using a similar structure to that given above.

To create a field for gender, insert the following values to your code (right above the last </table> tag):

<input type="checkbox" name="Male" value="Male"> Male<br>
  <input type="checkbox" name="Female" value="Female"> Female<br>

This will turn into checkboxes, one for male and one for female. Here's how your form should look now:

How to make your HTML form look better

As you can probably see, the HTML form we've created isn't particularly attractive. Sure, HTML will get the job done but it probably won't help you create particularly fillable forms; they’re boring, dull, and above all, too very difficult and clunky to fill in, like something from the early days of the internet (hello, MS Paint).

The easiest solution for this is to use a dedicate form building tool like Paperform that helps you avoid the heavy-lifting of learning CSS. With a form building tool, you can create a beautiful signup form (like the one below) in minutes without having to write a single line of code.

Moreover, while HTML forms are functional, they don't support more sophisticated functions like conditional logic and pagination which are essential if you're looking to create a more impressive, robust and multi-functional form.

If you're looking to create a very basic form, one way to improve the look of your HTML form is by using CSS. CSS allows you to customise several aspects of the HTML code to make it look better.

Search fields

CSS allows you to change the shape of search fields. By using the command input [ type=search], you can perform a range of commands that allow you to change the styling of search boxes to suit your requirements.

Fonts and text

HTML uses a standard font, but CSS allows you to change it to a range of different styles. It’s worth pointing out that the exact style you end up with is usually down to the browser. Firefox, for instance, will churn out different fonts from Safari.

The trick with font styles is to choose styles that fit the aesthetic of the rest of your website. Some widgets, like “form,” do not automatically use the same font and style as the rest of the browser, meaning that your form could wind up with inconsistent text.

There's a variety of font and colour elements you can change using CSS. Here's a helpful list.

Here, we've added some CSS to specify the font type ("family"), size, weight and colour.

table {
	font-family : Helvetica;
	font-size : 100%;
  font-weight: bold;
}
 h1 {
   color: #ea503f;
   font-family: Arial;
 }

With this, your form ends up looking like this:

Why a HTML form is rarely the right solution

While learning how to code and create basic registration forms is a fun skill to pick up, you should seriously reconsider using them for any important purposes.

If you're creating a website for your business, a registration form for a client or anything that you will be assessed on as a professional, a HTML & CSS form will most likely end up looking unimpressive and unpolished (especially if you have no prior coding skills).

Thankfully, the internet has provided us with a wide range of form-building tools that can help you create a beautiful registration form that looks and behaves like a professional website - and that too, incredibly fast. Here's a helpful breakdown of the best form-building tools to consider in 2020.

Here's a registration form created using Paperform (free to try for 14 days) in 3 minutes:

Create a registration form of your own in a matter of minutes using one of Paperform's many ready-made sign-up form templates.

Try Paperform Now!

14 Day Free Trial, No CC Required

How To Increase Social Media Engagement: A Guide For 2021

Looking to boost your social media engagement, grow your following and increase brand awareness? This guide will show you how.

Rafaella Aguiar

11 Best Paypal Alternatives In 2021

Looking for an alternative to PayPal? We've got you covered with our comprehensive guide to the best eCommerce platforms for all your payment needs.

Jack Delaney

How To Be A Good Interviewer: 10 Actionable Tips

Want to be a good interviewer? In this handy guide we outline 10 simple tips to help take your interviews to the next level.

Vlad Orlov

Payment Gateway Comparison: PayPal vs Stripe vs Braintree

The right payment gateway is crucial to the running of your ecommerce business. In this guide we compare three of the best: PayPal, Stripe and Braintr...

Jack Delaney