Perfect alignment and spacing in a form builder –Example 2

Following is another example of a different form layout that can easily be created using a form builder with perfect alignments and spacing.

The main tool we will use for this layout is the “grid“.

Steps to create this form:

1- Turn on the grid and the “snap to grid” option in the “element toolbar”.
Read more about the grid

Each element you drag will “stick” to the nearest grid intersection, so if you want it to “stick” to a certain
Intersection you will need to stop dragging (let go of the mouse) in the right bottom square.

2- Change the grid horizontal and vertical snap (in the form settings) to 20px.

3- Drag the 2 first top elements (a textbox and an email element) from the element toolbar.</strong

4- drag 2 label and place each one ontop of an input element.

5- Continue to drag all the elements on to the design area.

6- Make the textarea element wider by selecting it and moving the mouse to the right (while it’s pressed)

7- Change all the labels’ text by double clicking in the label and changing it, or by selecting the label and changing its text in the “element settings”.

8- Give each input element a name and a tab index number in the “element settings”.

9- Add items to the Contact purpose listbox.

10- save the form.

Advertisements

What kind of forms can I create with a form builder?

There is an endless array of web forms you can create very simply using a form builder.
This post will provide several examples of forms, layouts and designs in order to show the variety you can achieve when using the form builder.

1- Contact form
2- Poll/survey
3- Online invitation
4- Event registration
5- Support form
6- Order form

Each form created in the form builder could, of course, be created in other ways (other fields, other field orders, other colors, other fonts, other layouts etc.). In addition each form can be edited after it is finished.

Online contact forms
The most common web forms. Help websites/blogs/companies keep in touch with their clients/users. A contact form usually consists of the following fields: name, company, email, phone #, subject, contact purpose, detailed message.

Polls/surveys
A tool used to collect public opinions for research or other purposes.
Usually consist of questions and array of answers the form filler needs to choose from.

Online invitation
A web form designed to invite users to a certain event (such as a wedding). It usually consists of a visual image and event details (what, when and where). This form also usually collects data which indicates if the form filler intends on attending the event.

Event registration
Large scale events are always well planed and need to be organized. A registration form to an event is one way or organizing it. This form usually consists of fields such as: full name, telephone #, email address, reservation for # of people etc.

Support form
A form dedicated to provide support to users allowing them to contact the website and discuss/ask for assistance/inquire/feedback about different topics.
This form usually consists of these fields: name, email address, contact purpose (technical problem, sales, or other), phone # and description. This kind of form is much like the regular contact form only it emphasizes the support aspect.

Order form
This form is used to collect orders over the web, it does not include the purchase phase. The user fills in the product he/she is interested in and the quantity and the website owner gets in touch with him/her via email/phone in order to complete the purchase.

Create an email contact form

A contact form is the most common type of online forms in websites today.
The contact form enables a communicational channel between the website owner/manager and the website users.
Being an email form means that all the data entered in the form is automatically sent via email to the form owner – alerting a new data entry. In addition to the email, the information is also stored in a data management tool and may be edited and viewed.

Here are steps to create a contact us form:* the FormLogix template gallery offers readymade contact us templates for those who do not wish to create one from scratch.
1- Enter the form creator.
contact-enter
2- Give the form a name in the form settings.
contact

3- Drag the input elements needed:
textbox – for the name field
textbox – for the company field
email element – for the email address
textbox – for the subject text
textarea – for the description multi rowed text
contact1
4- Select each element and go to its “element settings” on the right and do 2 things:
a- give each element a caption name (for example: “name” for the name field element)
b- give each element a tab index number (starting from 1 to the first element, 2 to the second etc.)
contact3
5- Drag a label next to each element and change its text (to be the same as the element’s caption) .
contact2
6- Add buttons:
submit button – for submitting the form
clear button – for clearing the data filled in the contact fields
contact4
in order to create a clear button simply drag a regular button element -change its text to
“clear” and check the “Reset Button” checkbox (in the element settings).
contact5
7- Save the form.

Basing your form on a template

while you can use the form builder to create custom forms you can also use readymade templates and shared user forms as the basis to your form.
The readymade forms are a great solution for those who want to shorten the form creation time or want to create common forms (such as a contact form).  Using a template is easy. All you need to do is view the templates, choose the one you want and use it.

FormLogix offers 3 kinds of readymade forms:
1- templates
2- shared user forms
3- widgets

Templates
the templates are data driven readymade forms created by the FormLogix team. Data driven means that the data entered in the forms is stored in a data management tool which allows the user to filter, edit, sort, delete, analyze and so forth.
Steps to use the template:
1- login to FormLogix (login is required in order to use this feature)
2- in the data center  choose: “Create form based on template”.
(You can also reach the template gallery by pressing on the “new page from template” icon in the form creator “general toolbar”)
basedOnTemplate
3- in the template gallery: use the template list “view” links to look at the forms. Each form you choose will appear on the right side.
ViewTemplate
4- You can also search for a template using the template search box.
TemplteSearch
5- Once you find your dream template –press on the “load” link (in the template list).
This operation will open the form for you in the form creator.
ClonedForm
6- in the form creator: give the form a name and save it
* needless to say you can use this template as the basis of your form and change it as much as you like.


Shared user forms
shared forms are forms created by FormLogix users. These forms are also data driven (same as the regular templates).
Steps to use the shared form:
1- login to FormLogix (login is required in order to use this feature)
2- in the data center  choose: “Create form based on a shared form”.
basedOnSharedForm
3- in the shared forms gallery: use the forms list to look at the forms – pressing on a form’s name will make it appear on the right side. Each form you choose will appear on the right side.
ViewShared
4- You can also search for a form using the user form’s search box.
SharedSerach
5- Once you find your dream form –press on the clone icon (looks like a stamp tool).
This operation will open the form for you in the form creator.
CloneShared
6- in the form creator: give the form a name and save it
* needless to say you can use this template as the basis of your form and change it as much as you like.
saveClonedShared

 

Widgets
the widgets are simple readymade forms created by the FormLogix team. These forms are not data driven, which means that the data entered in them is not stored in a data management tool and so does not allow data manipulation such as filtering, sorting,  editing and so on.  When these forms are submitted by the form filler an automatic data entry alert is sent via email to the form owner.
The FormLogix widgets may be used via google gadgets or  widgetbox widgets.
steps to use the google/widgetbox form:
1- go to the widget directory page (http://www.formlogix.com/gadgets.aspx)
widgetPage
2- choose the form you are interested in from the page.
3- press on the “add to google”  button or “widgettbox”  button  under the form details.
4- the relevant google/widgetbox page will open and will display the widget.
5- in google:
press on “add to google” button and it will appear on your google page.
GoogleGadget1
GoogleGadget2
please note that you will need to enter your emal address in order to receive the data entry alerts. In addition you can choose the widget’s background color from a drop down list.
GoogleGadget3

 Press on “save” and you are ready to go.
GoogleGadget4

in widgetbox:
  press on “get widget” and the form code will be displayed.
Widgetbox1
 Please notice that the widget’s settings will appear on the right – please change the email address to your own so you will be the recipient of the data entry alerts.  
You may also determine the form’s background color.
Once you are done  Copy and paste the code  in your site.
Widgetbox3

How to choose the right elements for your form

The formlogix form builder contains a variety of elements designed for creating  forms.
All elements may be dragged and dropped on to the design area and all have settings that may be changed according to the form owner’s needs.

Each element is designed to fulfill a different function and should therefore be used in different circumstances. Following is a description of each element and its most important settings.

1-      Label
the label is a textual element that is used to add text to the form (titles, descriptions, etc). The label is most commonly used as the name of the field which is placed next to an input element.
label

2-      Textbox
the textbox is the most common input element. It is used to collect alpha numeric data (letters, numbers and characters). This element‘s settings include important features such as: Mandatory (forcing the user to fill in this field), max length (determining how many characters may be entered in the field) and auto complete (an option which guesses the word/phrase while being entered and completes it).
textbox

3-       Numeric textbox
this textbox element is used to collect numeric data only. Its settings are identical to the regular textbox.
numeric_textbox

4-      Password
the password element is designed to collect alpha numeric data (just like the regular textbox). The only difference is that this field hides the characters while they are being entered. The field’s settings are identical to the regular textbox.
password

5-      Textarea
the textarea element is used to collect a multi rowed text data. Its settings are identical to the regular textbox (max length is limited to 675 characters).
textarea

6-      Listbox
the listbox element is used to offer the user a list of options from which to choose from.

the important settings of this element are the “items” in which you enter the list values and the mandatory checkbox (take note-when using this option you must see that the first value in the items list is a title text such as: “please select” or “choose”)
listbox

7-      Linkform
the linkform element is a dynamic dropdown list. The values in this list are driven from another form and that is why it is called linkform (links between forms).
linkform
Read more about linkform

8-      Checkbox
the checkbox element has 2 states: off and on and it thus giving the user 2 options to choose from. Defining the checkbox as mandatory in the element settings will force the user to turn on the checkbox prior to submitting the form.
checkbox

9-      Radio button
The radio button, like the listbox, offers the user an array of options, only they are presented alongside each other in a horizontal layout (and may be shown vertically as well.) important settings:  vertical checkbox- turns the radio items layout to a vertical one. Width- the form owner can define a fixed space between each radio button to another.
radio
read more about the radio button

10-   Link
this element is a link to another form or a chosen url that may be inserted to the form.  
The important settings in this element are: url – the field in which the url of the link is defined. You can enter a url or use the picker […] to choose another form. New window checkbox – if this checkbox is turned on the link will be opened in a blank window when pressed.
link

11-   Linkbox
the linkbox element is designed for collecting links. It has no special settings.
listbox

12-   File upload
the file upload element  is used to attach documents to the form. The file types that may be uploaded are:  gif, jpeg, png, jpg, tiff, pdf, xml, htm, html, txt, doc, xls, pff, rtf, zip, mp3, avi, wav, wma, rar, xlsx, docx, dwg, skp. There is also a limit of 1.5mb per file.
upload

13-   Email
this element is designed especially for collecting email addresses. When this element is defined as mandatory in the element settings it turns on a validation mechanism that makes sure that the email address is valid. This element also has a “send copy” option which sends a carbon copy email containing the data entered in the form to the form filler.
email

14-   Calendar
the calendar element allows the user to enter a date made of the day, month and year.
it can be defined as mandatory.
calender

15-   Image
this element enables the form owner to add images to the form and even use them as backgrounds by placing other elements on top of them.  Choosing the image is done using the “path” field in the element settings. An “alt” may also be added to the image. Notice that when choosing your image you will need to enter the right width and height since a default width and height are used.
image

16-   Html
the html element is designed to allow inserting html scripts. It does not have any special settings.
html

17-   Container
the container element is used to contain other elements in it. When elements are placed in the container and the container is moved than all elements move with it without changing their relative position.
Special features that may be assigned to this element in the element settings are: private access checkbox – defining that all fields inserted to the container will not be visible to the form filler, but only to the form owner. This is used to add comments to entries after they are filled in. Mouse over color/Mouse out color – with these fields the form owner can create a roll over effect on the container.
container

18-   Multi line mode
this is an advanced element and is not commonly used.  This element creates a repeatable section and allows the user to insert as many data rows as he wants by pressing on the “add” button, or canceling them by a “remove” button.  This element is usually used in order forms.
multiline

read more about multiline mode

19-   Submit button
This element is used to submit the form. The special options in the element settings are:  text- changes the text on the button.  Reset button checkbox – turning on this option will change the button to a reset button which clears the fields in the form when pressed.
submitbutton

How to publish your web form

so you finished your contact form? All is good and well, but how do you embed it in your website? How do you use the email form?
well…the answer to this is really simple – Once your web form is finished and saved all you need to do in order to use it publicly is “publish” it.
publishing a form means externalizing it. Generating its code and using it in order for other to fill data in it.
There are 6 different publishing methods in the form builder. Choosing the right publish method depends on your needs – whether you want to embed the form to look like an integral part of your site or blog, or you want to use its url as is or as a link.  Once you choose a method (by selecting the radio button value) a generated script will appear and you will only need to copy and paste it.

The 6 publishing methods are:
URL – this is the url of the form. This url can be placed in a link or sent to others so they can enter the form. O simply given as is to enter in the browser’s address bar.
IFRAME – this code is used to embed the form in blogs.
LINK – this code is used to add a link for others to enter the form through.
SCRIPT – this code is used to embed the form in a website.
MAIL – when you choose this option a your mailing system window will open, allowing you to send an email, containing a link to the form.
GOOGLE SITES – this code is suitable for those who wish to put a link to the form with-in “Google Sites”.

form publishing options
form publishing options

read more about the publish option.

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