Screenshots online form, website form and HTML form

Online Form

What an online form 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.

Advantages of online form over paper form

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.

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 limit the length of a form field to limit the number of characters entered.

Synonyms Online Form

The following terms are also frequently used for the online form. All these terms actually mean the same thing.

  • web form
  • website application form
  • internet form
  • html form
  • HTML5 form

Types of an online application form

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.

However, the different types of an online form can be differentiated according to the respective application.

Contact form

Probably the most frequently used form on the Internet is the contact form.  Here you usually just leave a name, phone or e-mail for contacting and a short message about your request. The contact form is actually a “must have” 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.

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.

Reservation form

The reservation form 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.

Appointment request form

An online form for making an appointment 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 date field and a time field. If necessary, a selection field for the day of the week, which preferably fits best. Personal data such as e-mail or telephone number are mandatory for queries and further appointment coordination.

Booking form

The booking form 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 personal data for queries, are the arrival and departure dates as well as the number of children and adults. Further option and selection fields can be added for special requests or services, such as

  • Lake view/sea view
  • Non-smoking room
  • Car park
  • Breakfast

For further special wishes and agreements you should also always keep a free textarea field available.

Survey form

The survey form 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 Doodle-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 radio buttons or checkboxes.

  • Which of these 5 parties would you choose in the next state election?
  • Which of these 3 beer brands do you prefer?

These are only two exemplary questions for an online survey.

Evaluation form

The evaluation form is a special form of the survey form.  With 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:

  • How did you like shopping today?
  • How satisfied were you with your stay?
  • Were you satisfied with your booking today?

Since most people don’t like to read a lot, the type of reviews are mostly given visually in the form of 1-5 stars.

Registration form

Registration forms are again very common among online forms, as there are many things to register for:

  • Registration with a club
  • Registration for participation in an event

The probably best known form of such an internet form is the newsletter registration.

Basic structure of an online form

An internet form or web form always begins and ends with the <form> tag. The following code example shows a small form in which the first name and last name can be entered. The input fields are of type <input> and the label of the respective field is of type <label>. The form contains two buttons (<button> tags) with which you can reset (Reset) or send (Submit) the entered data. Clicking on the Submit button calls the page defined under action. This page then takes over the further processing of the data. These pages are often PHP pages as well.

<form action="send.html" id="contact">
<label class="h2" form="person">Name</label>
<label for="firstname">First name</label>
<input type="text" name="firstname" id="firstname">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname">
<button type="reset">Reset</button>
<button type="submit">Send</button>
</form>

In addition, there are many other HTML tags and attributes for special data fields of an Internet form, such as <textarea>, <select>, <option>, etc. These data fields are often combined with JavaScript, which means that the browser checks the values entered before the form data is sent.

Create online form

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 DA-FormMaker, including form templates, or you can get ready-made form templates from Internet services.

Tips and tricks around the online form creation

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.

File types for file upload

Files can also be uploaded using an online form. However, you usually do not want to allow all file types, but only certain files, such as image files.

Signature field in online form

It is also possible to insert a signature field into an HTML form. 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.

Auto-complete the location information

In a web form with the data fields postcode (zip code) and city you can complete the city entry automatically when entering the postcode. This saves the user typing work and also avoids misspelled words.

Border color and border style of a form field

Using CSS, you can adapt the border color and style of a form field to your own design requirements.

Pass values to HTML form

This article describes how to pass data or value when calling a web form, so that for example form fields can be preset with these values.

Form field frame with round corners

Internet forms look chic and modern when the frame of the form fields is displayed with rounded corners. 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.

All other tricks for online form

Leave a Reply

Your email address will not be published. Required fields are marked *