How to Create Application Forms With Fields
Online application forms can be used for a variety of different functions, and they contain fields where the user can type in information. By adding JavaScript instructions to the form, pop-up prompts will remind users to add required information before submitting the form. Learn how to create an application form using this tutorial.
Other People Are Reading
Instructions
-
-
1
Open Notepad in Windows or TextEdit in Mac. Type in the following code to create a webpage. Replace the text "FORM TITLE" with the application form's title. This is the title users will see in their web browser tab.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORM TITLE</title> -
2
Create the interactive part of the form by typing in the JavaScript instructions. These instructions will prompt the user to fill out required information before sending the form to you.
<script type="text/javascript" language="JavaScript">
//<![CDATA[
<!-- start script here
function checkform(thisform)
{
if (thisform.name.value == null || thisform.name.value == "")
{
alert ("Please enter your name");
thisform.name.focus();
thisform.name.select();
return false;
}
var selected = false ;
for (var i = 0; i
//]]> -
-
3
Format the form's font by filling in the color code and font name where indicated. See reference section for online HTML color code chart.
<style type="text/css">
/*<![CDATA[*/
body
{
background-color: [add color code];
}
input.required
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #000;
}
select.required
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #000;
}
td.required
{
font: [add font attributes, size and type];
}
input.optional
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #999;
}
textarea.optional
{
width: 300px;
font: [add font attributes, size and type];
background-color: [add color code];
border: solid 2px #666;
}
td.optional
{
font: [add font attributes, size and type];
}
input.submit
{
background-color: [add color code];
border: solid 2px #000;
font[add font attributes, size and type]; -
4
Type in this code to close the JavaScript instructions.
}
/*]]>*/
</style>
</head> -
5
Create the part of the application form that the user will actually see. Add the form's title and user instructions.
<body>
<h1>[add title here]</h1>
<p>[add instructions here]p> -
6
Type in your email address. When the user completes the application form, the information will automatically be sent to this address.
<form action="mailto:[add email address here]" method="post" onsubmit="return checkform(this)"
-
7
Create a table for each form field. For instance, create a field for applicant's name, address, phone number, email address and any other relevant information that you will need.
<table>
<tr>
<td align="right" class="required"><b>[add field name here]</b></td>
<td><input name="name" class="required" /></td>
</tr> -
8
Type in this code to finish the application form:
<tr>
<td colspan="2" align="right"><input type="submit" value="register"
class="submit" /></td>
</tr>
</table>
</form>
</body>
</html> -
9
Save the text file to your computer's hard drive and upload it to the server that hosts your website.
-
1
