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 to save time and create a more powerful and professional looking registration form in minutes.

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>

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 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, it'll get the job done but you can’t imagine many users wanting to fill them in: they’re boring, dull, and above all, 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 that helps you avoid the heavy-lifting of learning CSS. With a form-building tool, you can create a beautiful registration form (like the one pictured below) in minutes without having to write a single line of code.

Made using Paperform.

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 2019.

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

Created using Paperform.

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

Try Paperform Now!

14 Day Free Trial, No CC Required

Best Tools For Graphic Designers In 2019

Let’s review the most prominent graphic design tools of 2019, to help you pick the ones best suited to your unique creative workflow.

Vlad Shvets

Web Marketing For Dentists: 10 Best Ways To Get Clients

Let's take a closer look at some of the marketing opportunities available to dentists - both cosmetic and traditional.

Bethany Spence

Everything You Need to Know About Omnichannel Marketing

Omnichannel strategies are one of the hottest trends in digital marketing, allowing companies to create a seamless experience across a number of chann...

Whitney Blankenship

Hiring Your First Employee: The Ultimate 6-Step Guide

Here’s a foolproof breakdown of how you can find, hire and retain that first employee and set them up for success.

Vrinda Singh
}