{"id":1444,"date":"2012-02-20T14:28:05","date_gmt":"2012-02-20T21:28:05","guid":{"rendered":"http:\/\/wip2.websitespot.com\/?p=196"},"modified":"2012-02-20T14:28:05","modified_gmt":"2012-02-20T21:28:05","slug":"how-to-make-an-online-form","status":"publish","type":"post","link":"https:\/\/www.websitespot.com\/blog\/how-to-make-an-online-form\/","title":{"rendered":"How To Make An Online Form"},"content":{"rendered":"<p>Online forms are the most common website add-on out there. You won't visit many sites that don't contain a form of some kind. You'll forms on contact us pages, you'll find them as a way for a website to generate leads such as a mortgage company, just about any reason you would need someone to send you information is handled through a form.<\/p>\n<p>A Web page form allows users to input and submit data, such as order information or user information. Forms include form elements, where users input their data.<br \/>\nThere are several types of form elements to consider when creating a form:<\/p>\n<ul>\n<li><strong>Text box<\/strong> - Allows users to enter a line of text.<\/li>\n<li><strong>Text area<\/strong> - Allows users to enter multiple lines of text.<\/li>\n<li><strong>Radio button<\/strong> - Allows users to select an option from a group of options. Radio buttons are shown as circles with space in the center for a dot that indicates the radio button has been selected.<\/li>\n<li><strong>Checkbox<\/strong> - Allows users to select options from a group of options. Checkboxes are shown as squares with space within the borders for an X that indicates the checkbox has been selected.<\/li>\n<li><strong>List<\/strong> - Allows users to select options from a group of options. Lists are shown as a drop-down list or a list box.<\/li>\n<li><strong>Button<\/strong> - Allows users to click a button to call JavaScript code. For example, by clicking the Submit button, the user calls the JavaScript code that submits the form.<\/li>\n<\/ul>\n<h3>Form Text Fields<\/h3>\n<p>Text fields allows for letters &amp; numbers.<\/p>\n<div class=\"formshade\">&lt;form&gt;<br \/>\nFirst name:<br \/>\n&lt;input type=\"text\" name=\"firstname\"&gt;<br \/>\n&lt;br&gt;<br \/>\nLast name:<br \/>\n&lt;input type=\"text\" name=\"lastname\"&gt;<br \/>\n&lt;\/form&gt;<\/div>\n<h3><\/h3>\n<p>Here is how it will appears in on your website:<\/p>\n<div>\n<form>First name:<input name=\"firstname\" type=\"text\" \/><\/form>\n<\/div>\n<div>Last name:<input name=\"lastname\" type=\"text\" \/><\/div>\n<h3><\/h3>\n<h3>Radio Buttons<\/h3>\n<p>Radio buttons allow a user to select a specific item from a list.<\/p>\n<div class=\"formshade\">&lt;form&gt;<br \/>\n&lt;input type=\"radio\" name=\"sex\" value=\"male\"&gt; Male<br \/>\n&lt;br&gt;<br \/>\n&lt;input type=\"radio\" name=\"sex\" value=\"female\"&gt; Female<br \/>\n&lt;\/form&gt;<\/div>\n<h3><\/h3>\n<form>Here is how it will appears in on your website:<br \/>\n<input checked=\"checked\" name=\"sex\" type=\"radio\" value=\"male\" \/> Male<\/form>\n<p><input name=\"sex\" type=\"radio\" value=\"female\" \/>Female<\/p>\n<h3>Checkboxes<\/h3>\n<p>Checkboxes allow a user to select multiple items from a list.<\/p>\n<div class=\"formshade\">&lt;form&gt;<br \/>\nI have a bike:<br \/>\n&lt;input type=\"checkbox\" name=\"vehicle\" value=\"Bike\" \/&gt;<br \/>\n&lt;br \/&gt;<br \/>\nI have a car:<br \/>\n&lt;input type=\"checkbox\" name=\"vehicle\" value=\"Car\" \/&gt;<br \/>\n&lt;br \/&gt;<br \/>\nI have an airplane:<br \/>\n&lt;input type=\"checkbox\" name=\"vehicle\" value=\"Airplane\" \/&gt;<br \/>\n&lt;\/form&gt;<\/div>\n<h3><\/h3>\n<form>Here is how it will appears in on your website:<br \/>\n<input name=\"vehicle0\" type=\"checkbox\" value=\"Bike\" \/>I have a bike:<br \/>\n<input name=\"vehicle1\" type=\"checkbox\" value=\"Car\" \/>I have a car:<br \/>\n<input name=\"vehicle2\" type=\"checkbox\" value=\"Airplane\" \/>I have an airplane:<\/form>\n<p>&nbsp;<\/p>\n<h3>Submit Button<\/h3>\n<p>The submit button allows a user to submit the information that they have entered into your form. A couple of ways that this can be handled is by sending you an email directly or writing the information to a database for future use.<\/p>\n<div class=\"formshade\">&lt;form name=\"input\" action=\"html_form_action.asp\" method=\"get\"&gt;<br \/>\nName:&lt;input type=\"text\" name=\"user\"&gt;<br \/>\n&lt;input type=\"submit\" value=\"Submit\"&gt;<br \/>\n&lt;\/form&gt;<\/div>\n<form>Here is how it will appears in on your website:<br \/>\nName:<input name=\"user0\" type=\"text\" \/><br \/>\n<input type=\"submit\" value=\"Submit\" \/><\/form>\n<p>&nbsp;<\/p>\n<h2>Sample Online Form<\/h2>\n<div class=\"formshade\">I've put together a generic form so that you can see it in it's entirety. When you're creating your own form there will be many things that need to be changed but I at least wanted to give you an idea of a completed form.&lt;form METHOD=POST ACTION=\"http:\/\/www.yourdomain.com\/cgi-bin\/formmail.cgi\"&gt;<br \/>\n&lt;input type=hidden name=\"redirect\" value=\"http:\/\/www.yourdomain.com\/thankyou.html\"&gt;<br \/>\n&lt;input type=\"hidden\" name=\"recipient\" value=\"you@yourdomain.com\"&gt;<br \/>\n&lt;input type=\"hidden\" name=\"subject\" value=\"Online Form Submission\"&gt;&lt;p&gt;Your Name: &lt;input TYPE=\"text\" NAME=\"Name\" SIZE=\"40\" MAXLENGTH=\"40\"&gt;<br \/>\n&lt;\/p&gt;&lt;p&gt;Do You Own A Car?:<br \/>\n&lt;input TYPE=\"checkbox\" NAME=\"car-owner\" VALUE=\"Yes\" checked&gt;<br \/>\n&lt;\/p&gt;&lt;p&gt;Do You Own Or Lease Your Car?<br \/>\n&lt;select NAME=\"ownership\"&gt;<br \/>\n&lt;option VALUE=\"Own\"&gt;Own<br \/>\n&lt;option VALUE=\"Lease\"&gt;Lease<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/p&gt;&lt;p&gt;How Old Are You?<br \/>\n&lt;input TYPE=\"radio\" NAME=\"car-type\" VALUE=\"Lexus\" checked&gt;Lexus<br \/>\n&lt;input TYPE=\"radio\" NAME=\"car-type\" VALUE=\"BMW\"&gt;BMW<br \/>\n&lt;input TYPE=\"radio\" NAME=\"car-type\" VALUE=\"Acura\"&gt;Acura<br \/>\n&lt;\/p&gt;&lt;p&gt;Comments: &lt;br&gt;<br \/>\n&lt;textarea NAME=\"comments\" ROWS=\"10\" COLS=\"50\" wrap=\"virtual\"&gt;<br \/>\nYou can insert default text here if you wish<br \/>\n&lt;\/textarea&gt;<br \/>\n&lt;\/p&gt;<\/p>\n<p>&lt;p&gt;<br \/>\n&lt;input TYPE=\"submit\" NAME=\"Request\" VALUE=\"Submit This Form\"&gt;<br \/>\n&lt;input TYPE=\"reset\" NAME=\"Clear\" VALUE=\"Clear Form\"&gt;<br \/>\n&lt;\/p&gt;<\/p>\n<p>&lt;\/form&gt;<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h2>Form Scripts<\/h2>\n<p>Now you've built your form but what next? You will need a script to process the form and send the information to you whether it be by email or by submitting it to a database. I cover the scripts that are commonly used for emailing the information in the second part of my tutorial on <a>online form scripts<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Online forms are the most common website add-on out there. You won't visit many sites that don't contain a form of some kind. You'll forms on contact us pages, you'll find them as a way for a website to generate leads such as a mortgage company, just about any reason you would need someone to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1444","post","type-post","status-publish","format-standard","hentry","category-website-building-101"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/posts\/1444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/comments?post=1444"}],"version-history":[{"count":0,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/posts\/1444\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/media?parent=1444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/categories?post=1444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/tags?post=1444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}