Contact Form

What is a contact form?

Via a contact form, the visitor of a website can contact the operator/owner of the website. The contact form makes it easier to make contact because the request or message can be written and sent directly via the website without having to take the detour via e-mail. For this reason each web page should offer this possibility of the establishment of contact.

Structure of a contact form

There are certainly many different requirements for a contact form depending on which service you offer on your website or generally what content you provide on the homepage for visitors and what information exchange is therefore necessary.
However, the following basic elements or form fields should always be part of a contact form:

  • Name
  • Email
  • Message

Name field

The form field for the name is not necessarily a mandatory field in a contact form, but you should always give the user the opportunity to leave his name. If you write the answer, you can address the person directly and, if you can deduce it from the name, you can also add the gender-specific salutation (Mr/Ms).

Email field

The form field for the email is a mandatory field in the contact form, because only in this way can the inquirer also answer by email. If it is only a contact form for a callback request, then the e-mail field is of course not a mandatory field.

For the email field you should also add a check whether it is an email address. Because quickly a typing error is undermined and the reply letter runs into emptiness. In the simplest case one checks whether the @ character is contained. However, it is better to check the entire syntax, for example whether there are characters before the @ character and whether the @ character contains the syntax for the domain part. This can be done with regex expressions.

Message field

Also this form field is quasi a mandatory field so that the user of the contact form can leave his message or questions. Sometimes it makes sense to limit the number of characters for the message field and to visualize it accordingly, so that no novels are written or whole dictionaries are copied in.

Screenshot of an example of a message field with character delimiter
Example of a message field with character delimiter

Create contact form

In the simplest case, there are three simple form fields. Of course you can sit down and compose such a form yourself with HTML. However, when checking mandatory fields and checks for correct input, as with the email address, it becomes very complex. Therefore it is better to use a form generator like DA-FormMaker. In just a few steps, you can use the form wizard to create a finished contact form that is ready to be uploaded. Fast contemporaries need less than 5 minutes.

For this, one selects the template for the contact form from the available templates. Furthermore, there is the possibility to create a form for appointment requests, reservation requests or bookings.

Screenshot 1: Create a contact form
Step 1: Select template for contact form

In the next step you can choose a suitable design. Here you can choose between the W3.CSS design, bootstrap design or the classic design. In the preview window on the right you can see what the design looks like.

Screenshot 2: Create a contact form
Step 2: Select a design template

In the third and penultimate step you make a few basic settings and are almost done. The recipient address is entered here. The data of the form will be sent there by e-mail after clicking on “Send“. You can also assign a certain subject to this email. In addition, you can enter an individual text, which appears in front of the form fields.

Screenshot 3: Create a contact form
Step 3: Make basic settings: Recipient address, introductory text and email subject

In the last step you have the possibility to preview the form, export it or edit it further and adapt it to your individual requirements.

Screenshot 4: Create a contact form
Step 4: Upload the contact form, preview or edit it

The following picture shows an exemplary generated contact form. This is responsive, so it automatically adapts to the image formats of desktop, smartphone and tablet. The contact form shown here was created in W3.CSS design.

Screenshot : Contact form
Example of a finished contact form in responive design

One comment

Leave a Reply

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