New feature: Now you can display your forms inside lightbox pop-ups! (+)
[close]

How to create a beautiful contact form

Introduction

With this tutorial, we hope to show you how easy it is to create a contact form for your site with HTMLform.com.

Before beginning, we want to briefly recall some points:

- What you get with HTMLform.com is a complete HTML form for any web page: an HTML code, a database storage tool (in PHP), a data query tool (in PHP) … all packed in a ZIP file ready to be uploaded to your hosting server and prepared to be used with no configuration needed.

- There are not hidden fees: You are not bound in any way to HTMLform.com while using any of the forms designed and downloaded through our tool.

- The data entered by the users through your form is stored in a small database and is incorporated into the ZIP file that you upload to your server. These files are located in the “db” directory in your server, so it is important that you never erase it, or at least export the data to a CSV (a feature built into the form) before doing so. Remember, HTMLform.com will not store any data introduced by those who use your form. Everything is under your control.

The Basics.

First of all, we will access the form editor.

Image 1

To begin, we are asked the language of our form. Although the forms editor interface is in English, by default HTMLform.com has five languages pre-configured for the form generator. This means that the warnings and messages that the form shows to the user, such as “This field is required” or “required fields are indicated in bold”, are already defined in these languages. If your language is not among the available ones select another. As you can see, you will have the possibility of manually modifying the messages of the form and adapting them to your language in the “Form” tab.

Image 2

We want to build a simple contact form where the visitors name, email address, reason for contact and a comment field are all registered. In addition, the system will incorporate an anti-SPAM recaptcha to prevent unauthorized access.

The first thing we will do is create the “Name” field. To do this you should click on the “textbox” tool in our toolbox, on the left side of the screen.

Image 3

We now have a text field in our form. Our first field appears in our form editor.

On the left side of the screen the “Field” tab is selected along with the various attributes that define the field you just added. We will assign a label: “Name”, and mark it as a required field.

Image 4

We want to also record the user’s last name and do it in a separate field to the name.

We go back to the Toolbox tab, incorporate another “textbox”,

Image 5

we assign it a “Last Name” label and also mark it as required field.

Image 6

To collect the user’s email, select the email tool and assign it as “Email”  label. Given the need to establish contact with the user we will mark the field as required. We can use the “Description” field of the “Field” tab to briefly explain why the visitor should fill this field. We will put something like “An email address to Receive Our answer.”

Image 7

We want to classify our visitor’s contact reasons among four alternatives: Information Request, Support Request, Suggestions and Others. For this we select the “radio buttons” tool. We assign the label “Contact Reason.”

Image 8

In the “Possible Values” field we indicate the different possibilities that the visitor can select. We will do this by writing them one after another separated by a semicolon: “consultation; support;suggestions;others”

Image 9

All there is left is to do is to add the most important field of all, the comments field. We will select the “Text Area” tool,

Image 10

assign the label “Your message” and mark it as required.

Image 11

Finally, we will add the anti-SPAM reCaptcha control.

Image 12

For this, we must introduce our private and public reCaptcha keys. To obtain them, join at recaptcha.com and request the keys for the website where you will be installing the form.

Image 13

At last, we will include the submit button. This item has no label but we can specify the text that will be shown in the button. We will write “Send”

Image 14

Well, our form seems to be complete. We click on the “Preview” button to get a preview.

Image 15

Try clicking the “Submit” button. You will see how the form really highlights the required fields and informs us with an error message in each one of them. Do as many tests as you like with your form.

A little bit of style.

It is time to apply some style to our form. The form is 100% functional but it won’t hurt making it more attractive to the user, this will make it easier to fill and thus achieving more contacts.

We close the preview window and start by giving a name to our form. For that, we go to the “Form” tab and in the “Field Name” field we write the name we have decided. We will name it “Contact Form”.

To clarify the purpose of our form, we can add a description so that our website’s visitors know exactly the type of contact that we expect. We will post the following “Indicate the reason for your contact, your personal information and the message you want to send us.”

Image 18

The form would be more attractive if the “Last Name” field appeared aligned with the Name field. To this end, we only have to edit the “Last Name”  field properties by clicking on the “Last Name” label in the central panel. Then, we activate the check button “Show on the Same line as the previous field.” Also, we will assign 20 characters to the field size, instead of the default 30, so we don’t make the form too wide.

Image 19

We will assign 15 characters in size to the Name field and 30 columns wide and 6 high to the “Message field”.

Let’s Preview. By default, the form has a defined width of 500 pixels and 100 pixels for the left column which displays the field labels. We can give a little more width to this column so the “Name” and “Last Name” tags have more space and appear in the same line. We then go to the Form tab and assign 120 to the “Label width” property.

Well, our form is much better now and it looks more professional.

Image 20

Data Validations

If you want to, you can skip this section. Basically, we will show you how to give a little more intelligence to your form and make it more friendly to your visitors.

Lets pay attention to the “Email” field. It is a required field, so that when we sending the data form without introducing our email, the error “This field is required” will be displayed. If we want to show a different message we must edit the field properties and write, for example “Please write your email.” in the  ”Custom Error Message” field, You can customize this message on each of your fields and thus being more explanatory to your users.

Image 21

Now we move to the message field. It may be desirable to specify the minimum and maximum number of characters that our visitor’s message should have. We edit the field and indicate at least 50 characters in the “Min Length” field and 500 in the “Max Length” one.

Image 22

Delivery confirmation and notifications

It’s time to end our form. For this we are going to define how we want to inform our visitors that their data has been successfully sent and how we will be notified of it.

We click on the “Form” tab and in the “Confirmation Options” section we keep the “Confirmation Message” option selected. This way, when the user clicks on the “Send” button, being everything correct, a message will appear on the screen informing him that his information has been sent. You can specify a particular message in the “Confirmation Message” field, for example: “Thank you for contacting us, we will reply shortly.”

Now we go to the “Notification Options” section. We want to send an email to our account each time one of our visitors fills out the form. Activate the check “Send an email with the results to my account” and in the “Email Account” field put our email account.

The next field, the “From Account”, can be important. We must remember that all the code that runs the form will be installed and will run on your own server. This includes sending notification emails. Every email has a sender and in this field we must indicate the email address from which the mail notifications will be sent to your account. For example, if your site is my-web.com, the address of notice could be sales@my-web.com and the sender (From account) admin@my-web.com. It is important that this email account exists and is managed by the same hosting service that the server is installed in form, otherwise your mailer might interpret it as SPAM and send the emails to the SPAM folder.

Image 23

Our form is now ready to be used. If we want to add it to our website we only need to click on the “Get your form” button and indicate the email to which we want to receive the download link.

Image 24

Okay. You’ve designed your form. Now is the time to upload it to your website and publish it. To do this, we recommend that you follow this short tutorial http://htmlform.com/how-to-install-your-html-form it will only take 5 minutes!


Loading Form...
Your form builder at HTMLform.com