{"id":2615,"date":"2020-03-10T20:47:51","date_gmt":"2020-03-10T19:47:51","guid":{"rendered":"https:\/\/da-software.de\/?p=2615"},"modified":"2020-03-15T19:34:00","modified_gmt":"2020-03-15T18:34:00","slug":"online-form","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2020\/03\/online-form\/","title":{"rendered":"Online Form"},"content":{"rendered":"<p>What an <strong>online form<\/strong> is is probably self-explanatory for most people. A form in a general meaning, or as we know it from former times and some dusty offices, queries data in a structured way. The contents can then be entered in prefabricated data fields, which are often also limited by length. Thus, the form is intended to simplify the retrieval of information, its transmission and further processing. What is known from the paper form was transferred to the digital world of the Internet and the online application form was born.<\/p>\n<h2>Advantages of online form over paper form<\/h2>\n<p>Due to the many programming solutions, the online form naturally offers many advantages over the paper form. The saving of paper may be seen a little bit critical, because the CO2 consumption for the provision of the internet infrastructure for the online form stands against it. But the big advantage is that no paper needs to be replaced at all, because the online form is always available via the Internet. The data entered can be transmitted digitally and can therefore be processed directly, for example in databases or certain algorithms. On the other hand, there is often a tiresome typing out of the paper form and administration of the forms in folders, archives, documentation centres. An online form can be distributed to several recipients or processors at the same time. The paper form must be copied or a running day inserted.<\/p>\n<p>Another advantage is that you can control the data input. For example, you can define mandatory fields that must be filled in. Or you can check the correctness of the data entry, for example, whether the data entered in the field E-mail or phone number really has the form of an e-mail or phone number. In addition, you can <a title=\"limit lenght of input field or texarea\" href=\"https:\/\/da-software.de\/en\/2020\/01\/limit-the-number-of-characters-in-the-text-field-of-an-html-form\/\">limit the length of a form field<\/a> to limit the number of characters entered.<\/p>\n<h2>Synonyms Online Form<\/h2>\n<p>The following terms are also frequently used for the online form. All these terms actually mean the same thing.<\/p>\n<ul>\n<li>web form<\/li>\n<li>website application form<\/li>\n<li>internet form<\/li>\n<li>html form<\/li>\n<li>HTML5 form<\/li>\n<\/ul>\n<h2>Types of an online application form<\/h2>\n<p>There is no technical categorization of online forms, since most forms are based on HTML. However, the further data processing after submission may differ. You can simply forward and send the data by e-mail, you can save it in a text file or XML file or store it in a database. The database storage is of course always recommended if you need all data centrally in order to be able to evaluate them later, for example for statistics.<\/p>\n<p>However, the different types of an online form can be differentiated according to the respective application.<\/p>\n<h3>Contact form<\/h3>\n<p>Probably the most frequently used form on the Internet is the <a title=\"How to create a contact form\" href=\"https:\/\/da-software.de\/en\/2019\/10\/contact-form\/\"><strong>contact form<\/strong><\/a>.\u00a0 Here you usually just leave a name, phone or e-mail for contacting and a short message about your request. The <strong>contact form<\/strong> is actually a &#8220;<em><strong>must have<\/strong><\/em>&#8221; for every website, because such an online form makes it much easier for the website visitor to contact us (usability) without having to open his e-mail program or log into his e-mail account.<\/p>\n<p>For the website operator the contact form also has some advantages. He avoids some calls at possibly inappropriate times and can deal with the answering of contact requests within the scope of his own time management.<\/p>\n<h3>Reservation form<\/h3>\n<p>The <a title=\"create reservation form\" href=\"https:\/\/da-software.de\/en\/2019\/11\/reservation-request\/\"><strong>reservation form<\/strong><\/a> includes specially tailored data fields to make an online reservation. Thus it is mainly used for restaurants, pubs and similar locations. So the customer can easily make a reservation request and receive a confirmation without any problems. On the side of the restaurant operator, one can use such a reservation system in the background, which automatically makes a table assignment, automatically sends out the confirmation and blocks the table for further reservations. Important fields here are, besides the personal data, of course the number of persons, the time and if necessary the occasion.<\/p>\n<h3>Appointment request form<\/h3>\n<p>An <strong><a title=\"create application form for appointment request\" href=\"https:\/\/da-software.de\/en\/2019\/11\/appointment-agreement-appointment-request\/\">online form for making an appointment<\/a><\/strong> has very extensive use cases. Wherever a service is offered and customers want to approach the client or vice versa, an appointment is made. This can be an appointment with a dentist or hairdresser as well as an appointment with the club chairman or class teacher of the junior. The appointment request form therefore also requires certain data fields that refer to the appointment. These are in particular a <em>date field<\/em> and a <em>time field<\/em>. If necessary, a selection field for the <em>day of the week<\/em>, which preferably fits best. Personal data such as e-mail or telephone number are mandatory for queries and further appointment coordination.<\/p>\n<h3>Booking form<\/h3>\n<p>The <strong><a title=\"create booking form\" href=\"https:\/\/da-software.de\/en\/2019\/11\/booking-form\/\">booking form<\/a><\/strong> is used for booking requests. Such online forms are mainly used by operators of a holiday apartment, hotel, camping site or clubroom. It is similar to a reservation with the only difference that in most cases it concerns overnight stays that last for several days. Important data fields of such a form, apart from the obligatory <em>personal data<\/em> for queries, are the <em>arrival<\/em> and <em>departure dates<\/em> as well as the <em>number of children<\/em> and <em>adults<\/em>. Further option and selection fields can be added for special requests or services, such as<\/p>\n<ul>\n<li>Lake view\/sea view<\/li>\n<li>Non-smoking room<\/li>\n<li>Car park<\/li>\n<li>Breakfast<\/li>\n<\/ul>\n<p>For further special wishes and agreements you should also always keep a free textarea field available.<\/p>\n<h3>Survey form<\/h3>\n<p>The <strong>survey form<\/strong> is also very often used. The survey form is used to conduct a survey or a kind of opinion research. You can also use it to organize a <a title=\"Organizing Meetings - Official Homepage of Doodle\" href=\"https:\/\/doodle.com\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Doodle<\/a>-style appointment between different people or companies. A survey always involves choosing from various options. That is why an online form for a survey always contains one or more concrete questions as well as the corresponding choices in the form of <em>radio buttons<\/em> or <em>checkboxes<\/em>.<\/p>\n<ul>\n<li>Which of these 5 parties would you choose in the next state election?<\/li>\n<li>Which of these 3 beer brands do you prefer?<\/li>\n<\/ul>\n<p>These are only two exemplary questions for an online survey.<\/p>\n<h3>Evaluation form<\/h3>\n<p>The <strong>evaluation form<\/strong> is a special form of the survey form. \u00a0With this type of online application form, a customer can, for example, submit a product rating or write a review. Also at the end of a purchase or booking process, a customer rating can be requested, for example:<\/p>\n<ul>\n<li>How did you like shopping today?<\/li>\n<li>How satisfied were you with your stay?<\/li>\n<li>Were you satisfied with your booking today?<\/li>\n<\/ul>\n<p>Since most people don&#8217;t like to read a lot, the type of reviews are mostly given visually in the form of 1-5 stars.<\/p>\n<h3>Registration form<\/h3>\n<p>Registration forms are again very common among online forms, as there are many things to register for:<\/p>\n<ul>\n<li>Registration with a club<\/li>\n<li>Registration for participation in an event<\/li>\n<\/ul>\n<p>The probably best known form of such an internet form is the <strong>newsletter registration<\/strong>.<\/p>\n<h2>Basic structure of an online form<\/h2>\n<p>An internet form or web form always begins and ends with the <strong>&lt;form&gt; tag<\/strong>. The following code example shows a small form in which the <em>first name<\/em> and <em>last name<\/em> can be entered. The input fields are of type <em>&lt;input&gt;<\/em> and the label of the respective field is of type <em>&lt;label&gt;<\/em>. The form contains two buttons (<em>&lt;button&gt;<\/em> tags) with which you can reset (<em>Reset<\/em>) or send (<em>Submit<\/em>) the entered data. Clicking on the Submit button calls the page defined under <em><u>action<\/u><\/em>. This page then takes over the further processing of the data. These pages are often <a title=\"Further processing of form data with PHP href=\" target=\"_blank\" rel=\"noopener noreferrer\">PHP<\/a> pages as well.<\/p>\n<pre><code><strong>&lt;form<\/strong> action=\"send.html\" <strong>id<\/strong>=\"contact\"&gt;\r\n&lt;label class=\"h2\" <strong>form<\/strong>=\"person\"&gt;Name&lt;\/label&gt;\r\n&lt;label for=\"firstname\"&gt;First name&lt;\/label&gt;\r\n&lt;input type=\"text\" name=\"firstname\" id=\"firstname\"&gt;\r\n&lt;label for=\"surname\"&gt;Surname&lt;\/label&gt;\r\n&lt;input type=\"text\" name=\"surname\" id=\"surname\"&gt;\r\n&lt;button type=\"reset\"&gt;Reset&lt;\/button&gt;\r\n&lt;button type=\"submit\"&gt;Send&lt;\/button&gt;\r\n<strong>&lt;\/form&gt;<\/strong>\r\n<\/code><\/pre>\n<p>In addition, there are many other HTML tags and attributes for special data fields of an Internet form, such as <em>&lt;textarea&gt;<\/em>, <em>&lt;select&gt;<\/em>, <em>&lt;option&gt;<\/em>, etc. These data fields are often combined with JavaScript, which means that the browser checks the values entered before the form data is sent.<\/p>\n<h2>Create online form<\/h2>\n<p>The basic framework for creating an online form is given above. With a little bit of HTML experience you can create your own form. However, you quickly reach the limits of effectiveness if you want to create the entire form, including design adjustments, by hand in this way. The online form is best created with a suitable tool, such as <a title=\"create online form\" href=\"https:\/\/da-software.de\/en\/software\/da-formmaker\/\">DA-FormMaker, including form templates<\/a>, or you can get ready-made form templates from Internet services.<\/p>\n<h2>Tips and tricks around the online form creation<\/h2>\n<p>As different as the use cases for Internet forms are, as different are the requirements for the online form. A few tricks help to integrate the desired functions into the web form.<\/p>\n<h3>File types for file upload<\/h3>\n<p>Files can also be uploaded using an online form. However, you usually do <a title=\"file upload with online form\" href=\"https:\/\/da-software.de\/2018\/01\/html-formular-datei-upload-nur-bestimmten-dateitypen-zulassen\/\">not want to allow all file types<\/a>, but only certain files, such as image files.<\/p>\n<h3>Signature field in online form<\/h3>\n<p>It is also possible to insert a signature <a title=\"Signature on online form\" href=\"https:\/\/da-software.de\/en\/2020\/03\/signature-field-in-html-form\/\">field into an HTML form<\/a>. This allows you to more or less to confirm a certain fact. The signature is made on the desktop PC by mouse pointer. For devices with touch operation, the signature is made with a suitable pen or finger.<\/p>\n<h3>Auto-complete the location information<\/h3>\n<p>In a web form with the data fields postcode (zip code) and city you can <a title=\"Auto-complete the location in the web form\" href=\"https:\/\/da-software.de\/2018\/03\/stadt-und-ort-in-formular-mit-plz-autovervollstaendigen\/\">complete the city entry automatically when entering the postcode<\/a>. This saves the user typing work and also avoids misspelled words.<\/p>\n<h3>Border color and border style of a form field<\/h3>\n<p>Using CSS, you can adapt the <a title=\"Create frame color and design of form field\" href=\"https:\/\/da-software.de\/en\/2020\/03\/adjust-form-fields-border-or-frame-with-css\/\">border color and style of a form field<\/a> to your own design requirements.<\/p>\n<h3>Pass values to HTML form<\/h3>\n<p>This article describes how to <a title=\"Transfer data to an online form\" href=\"https:\/\/da-software.de\/2018\/05\/variable-in-html-formular-uebergeben\/\">pass data or value when calling a web form<\/a>, so that for example form fields can be preset with these values.<\/p>\n<h3>Form field frame with round corners<\/h3>\n<p>Internet forms look chic and modern when the frame of the <a title=\"CSS form field border radius\" href=\"https:\/\/da-software.de\/en\/2020\/03\/form-field-with-rounded-corners\/\">form fields is displayed with rounded corners<\/a>. This looks especially good on mobile devices. But think about it: design is subject to fashion; at some point in time, rectangular edges could be modern again.<\/p>\n<h3>All other tricks for online form<\/h3>\n<ul>\n<li><a title=\"Two web forms on one website\" href=\"https:\/\/da-software.de\/2018\/03\/zwei-formulare-in-eine-html-seite-einbinden\/\">Two forms on one HTML page<\/a><\/li>\n<li><a title=\"Embedding HTML form in Magix\" href=\"https:\/\/da-software.de\/2018\/03\/formulare-responsiv-in-magix-web-designer-einbinden\/\">Use online form in Magix Web Designer<\/a><\/li>\n<li><a title=\"Submit form data to Evernote\" href=\"https:\/\/da-software.de\/en\/2018\/04\/send-html-forms-to-evernote\/\">Send form data to Evernote<\/a><\/li>\n<li><a title=\"GDPR secure web form\" href=\"https:\/\/da-software.de\/2018\/05\/dsvgo-checkbox-fuer-kontaktformulare\/\">GDPR query in online form<\/a><\/li>\n<li><a title=\"No zoom on smartphone for online form\" href=\"https:\/\/da-software.de\/en\/2018\/11\/prevent-zooming-in-html-forms-on-mobile-devices\/\">No zoom of the web form<\/a><\/li>\n<li><a title=\"enter current date and time in form field\" href=\"https:\/\/da-software.de\/2019\/02\/html-eingabefeld-mit-datum-und-zeit-vorbelegen\/\">Preset form field with current date and\/or time<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>This article explains everything about the basics and creation of an online application form, also called internet form or HMTL form, as well as their special use cases.<\/p>\n","protected":false},"author":2,"featured_media":2616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[20],"tags":[168,121,123,92,162,166,111,125,167,143,144,87],"class_list":["post-2615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-accommodation-request","tag-booking-form","tag-booking-request","tag-da-formmaker-en","tag-html-form","tag-instructions","tag-internet-form","tag-online-form","tag-overnight-stay","tag-reservation","tag-reservation-request","tag-software"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=2615"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2615\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/2616"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=2615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=2615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=2615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}