Newcomers to web forms – Create a simple contact form

Welcome to the form creation domain. Today I will show you how easy it is to create a simple contact form for your website.
A contact form is a very common form that most websites use. This email form enables users to get in touch with the website owner/web master in regard  to various issues such as sales, support, feedback etc.

Let’s get started – Following are the steps to create your contact form:

1-  Make a form plan. Decide on the data you wish to collect and the way you want your form to look and make a written plan. What data is important to you? Do you want to collect the form fillers name? is important for you to get his address? Do you want the user to categorize what the contact purpose is or will you be satisfied with him describing the purpose freely in a multi row free text field?
What would you need to do in order to nicely embed your form in your website? Would you want the form to have a certain background color? Font family and size? Would you want to add an image to the form?
These questions are important in order to decide on the fields you want to create.

2- Enter the form builder and set the form name and size in the form settings on the right.
 on to the design area:

3-  start dragging the elements

Name field –  Textbox element
–          Drag a textbox for collecting the form filler’s name. Go to the element settings on the right and change its caption to “name”.  set the tab index number to “1”. Press on “apply”.
–          Drag a label element and place it next to the textbox. Change its text in the label’s settings to “name”. Press on “apply”.
addelements

elementcaptiontab

Company field- Textbox element

–          Drag a textbox for collecting the form filler’s company name. Place it below the name textbox you dragged earlier. Go to the element settings on the right and change its caption to “Company name”.  set the tab index number to “2”. Press on “apply”.
–          Drag a label element and place it next to the textbox. Change its text in the label’s settings to “Company name”. Press on “apply”.

Email field – email element

–          Drag an email element for collecting the form filler’s email address. Place it below the company textbox you dragged earlier. Go to the element settings on the right and change its caption to “Email”.  set the tab index number to “3”. Press on “apply”.
–          Drag a label element and place it next to the textbox. Change its text in the label’s settings to “Email”. Press on “apply”.

Subject field – textbox element

–          Drag a textbox element for the subject. Change its caption and tab index as you did in the previous elements.
–          Drag a label element and place it next to the textbox. Change its text in the label’s settings to “subject”.

 Message field – textures element

–          Drag a textarea element for the message field. Change its caption and tab index as you did in the previous elements.
–          Drag a label element and place it next to the textarea. Change its text in the label’s settings to “message”.
4-   Add a submit button to the form
contactform
5-
   Save the form  (and…TA DA!…the form is done)

6-   Press on “preview” (in the general tobar-5th icon from the left)  to check the form.
preview

Advertisements

One thought on “Newcomers to web forms – Create a simple contact form

Comments are closed.