Create a simple form with an email form builder

Creating a simple form (such as a contact form) using a form builder is really easy.
In order to help you get started i have attached a link to tutorial movie on the subject and an identical step by step written instruction on how to create this email form.

The tutorial : create a simple form

Steps by step detail on how to build a simple email form:
1- after logging in (when you are in the data center) – choose ‘Create new form’ option.

2- Delete the default  sentence  “to start simply drag an element from the toolbar’.

3- Turn on the ‘Show Grid’, ‘Snap to grid’ and ‘create with label’ checkboxes which will help you start designing the form easily:
Show grid – this option makes a grid appear and you can use it to align your elements.
Snap to grid – this option makes sure that when you drag/move an element it will always be pulled into alignment in the nearest intersection of grid lines.
Create with label – this option makes each element you drag be accompanied with a label and wrapped in a container (to save the time and work in dragging the elements and labels separately and placing them next to each other).

4- Start dragging your elements
a regular textbox (for the name field)
a regular textbox (for the company field)
an email element (for the email field)
a regular textbox (for the subject field)
a textarea (for the message field)
a button (for submit button)

Notice that when you drag an element (drag and hold) you will see a blue corner next to the top left element corner. This corner is the ‘snap to grid’ indicator and while you are trying to decide where to place the element, this indicator will show you the nearest intersection of grid lines so you can decide when to let go of the element and place it.

5- Stretch the subject element – simply select it and change its width (either in the element settings or by literally stretching it).

6- Change the message element width – so it is the same as the width of the subject above it.

Use the ‘make same width’ option to make the container and the element itself the same width.

7- turn off the checkboxes: Show Grid’, ‘Snap to grid’ and ‘create with label’ (detailed in bullet #3) – you do not need them anymore.

8- Select all the element (ctrl+a) and move them down to make room for the form header.

9- Drag a label and change its text to ‘contact us’. While it is selected you can change its style (font size, family, color etc).

10- Change the text of all the labels. Select a label and either double click on it in the design area to change its text or simply change it in the ‘element settings’.

11- Change each element’s caption and give it a tab index number. The caption will actually determine the field’s name and will later appear in the data management, in the emails and so on.  The tab index number- (an ascending order starting with 1) will define the order of the fields (tabbing order, report order, email order).

12- Change the form’s background color by using the ‘background color’ icon in the ‘element style’ section.

13- Select all the element’s container holder and change the border style to ‘none’. This will make the border invisible.

14 – Align the submit button according to the elements above it. In order to do this make sure that the submit button is located to the right of the textarea above (move it right if you need to).  Select the textarea and the button and press on ‘align left’.

15- Save the form.

Advertisements