Build web forms with Cognito Forms and its alternatives

Form Builder is an online application to create responsive all kinds of forms. Using responsive, the size of the screen presenting the form is distinguished and the design is tailored for that specific device. Finally the end outcome is a form that looks very professional on every device, every time, which boosts submission rates.

Cognito Forms

Need to collect data from your potential customers, and then sell your products to them? Cognito Forms just might be what you need—for free. You can make detailed forms, with repeating sections that let you collect as much data as responders want to share.

There’s calculated fields, file uploads, conditional logic, and more, all to help you make the advanced forms you need.As surprising as it may be, Cognito offers all of that for free. You can make as many forms as you want and collect up to 500 entries without paying anything. Then, you can add products to your forms and use them to sell your stuff, and Cognito will charge you just 1% of your sales price. That makes it incredibly effective to start out and then scale up the price as you sell more stuff. And, if you used Adobe FormsCentral, Cognito can be a great service to switch to since it can import your older Forms Central forms.

…so what are some alternatives to Cognito Forms?

FormTitan

FormTitan A powerful cloud based form builder tool for creating online web forms.It is so simple that in a matter of minutes you can create your form and start using it. It requires no programming skills – Titan does it all for you. FormTitan enables you to create an endless array of forms: contact forms, feedback forms, order forms, purchase forms, online invitations, surveys and polls etc.Formtitan is packed with a conversion rate optimization engine, its allow not just to build a very nice form but will also help you to build it in a way that it will have a better conversion rates.
In the world of Online forms, conversion rate is the number of visitors who submitted a formdivided by the total number of visitors to that form. Conversion Rate Optimization simply refers to the process of improving your form by increasing your conversion rates.

JotForm

JotForm comes with a ton of pre-made templates for you to work with.

It is a drag-and-drop form builder; just select a tool you require, and  drag it onto the building area where you can preview what your form  looks like. You can customize and create your own form or choose a template from one of the many categories.

The templates help you start  somewhere, giving you ideas to create your own form. However, if you’re  satisfied with the template and want no other options, just go ahead and get the HTML code and paste it on your website.

Form Builder for Bootstrap

This paid service is described as an element gallery which can be used by web developers as well as web designers. It consists of useful HTML snippets which can be used by them.

Google Forms

In an internet dominant time, people have turned to websites to expand their businesses, organizations and companies. Building a website would entail employing the work of professional web builders which costs thousands of dollars.

This review will take a look at what Form Builder brings to the table to help you decide if this is an app you would want on your website or not. Taking a look at its pros and cons should help you get a better grasp of Form Builder.

FormLogix

The only form builder that allows you to design your
form without any layout restrictions. Creating basic web forms without having to deal with their design. Adding dependencies to create a compound flow in the form.

With FormLogix you can createan endless array of forms: Contact forms, Feedback forms Surveys, Online polls, Order forms Event registration forms etc.

Orbeon Forms

Orbeon Forms is your solution to build and deploy web forms. It handles large forms with complex validation and extensive collections of forms, all situations typical of the enterprise or government.

It implements the W3C XForms standard and is available in an open source Community Edition, as well as a commercially supported Professional Edition. Orbeon Forms is used around the world in a number of industries, including governments, banking, healthcare, telecom, and education.

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.

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.

Changing the web form’s background

A web form’s background is most important for its design. when creating a form the default background color is white, but this can easily be changed.
There are 3 options to determine a background:

1- Making the form background transparent..
This option is great if you want to place the email form in your web page, which already has a background.
Changing the color to transparent is easy – all you need to do is:
a- Open the form in the form creator.
b- Go to the background color listbox in the design toolbar.
c- Choose the first color in the list (it looks white but when you choose it the form’s white background disappers and looks gray)
d- Save the form

2- Changing the form’s background color to another.
All you need to do is:
A- Open the form in the form builder.
B-go to the background color listbox in the design toolbar.
c- Choose one of the colors in the list.

or
d- go to the “Background Color” field in the form settings
e- Enter a valid color number like: #000000 (black) or the color’s name like: red

d- Save the form

3- Placing a background image.
If you have an image you want to use as background you can do so by:
a- Dragging an image element from the element toolbar.

b- Choosing the image file in the element settings”path” field.
c- fixing the pic’s dimentions (width and height) in the element settings.

d- Pressing “apply”.
e- Saving the form.

Creating an online order or purchase form

In the following post i will discuss the differences between an order form and a purchase form and provide a step by step instruction of how to create a simple order form (I will elaborate on the purchase form in the next post).

Many people have started to collect orders and even sell their products online. In order to add this kind of email form to your website you will probably need to spend a large sum of money to hire a professional programmer. Another alternative, especially for those who do not have any programming skills, is using a form builder.

What is the difference between an order form and a purchase form?
An order form – is a form in which the users choose a product and order it. This form does not deal with the purchasing process at all. Usually the multi-line element is used in this form to collect the info of several items.
A purchase form – a form in which the users can choose the item they want to buy and pay for it online using PayPal/Google checkout/Swreg/Moneybookers. In order to create such a form you have to use the “Payment Integration” option.

Here is a step by step instruction of how to create an order form in the form builder:
1- drag elements to collect the user’s personal information –
textbox to collect his/her name
textbox to collect his/her address
textbox to collect the phone number
email element to collect the user’s email address

a multiline which contains a textbox for collecting the product name, a numeric textbox for collecting the
quantity of each product and a textarea for collecting free text (remarks).

* Don’t forget to give each element a name (element settings>caption) and tab index number (element
settings>tab index).
Read more about the cation
Read more about tab index
2- Drag labels for each element. Change their text to be same as the element’s name and
place them next to the relevant elements.

3- Drag 2 labels and create section titles: Personal details and Order details.

4- Drag a submit button.

5- Design the form (colors, positioning etc)
6- Save the form.

Please tune in for the next post about creating a purchase 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”)

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.

4- You can also search for a template using the template search box.

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.

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”.

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.

4- You can also search for a form using the user form’s search box.

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.

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.

 

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)

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.


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.

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

in widgetbox:
  press on “get widget” and the form code will be displayed.

 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.

Designing the form-how to beautify the form?

Since the form builder has no rigid layout and the design is flexible one needs tools to help him design his form:

Colors, borders  and fonts
background color
you can change the background color from the design toolbar (third from the top) which allows you to choose from a list of colors or from the form settings on the right, in which you can insert any color number (for example: #ffffff).

or

Font color
you can change the font color from the design toolbar font color list or from the font color field in the element settings.

Font style

You can control the font style from the design toolbar by setting the font family, size as well as determining if the font is bold, underlined or italic.


Borders
You can change/add borders to elements by using the border style in the design toolbar.
Choosing border style (solid, ridge etc), width (in pixels), and color (from a color list).

Element alignments and Spacing

Alignment using a grid
the grid is a network of horizontal and vertical lines that covers your design area. Using this option may be done by turning on the “show grid” and “snap to grid” checkboxes located in the element toolbar. Once you turn the grid and snap on all selected Elements will be pulled into alignment with the nearest intersection of grid lines.
find out more about the grid

Alignment options (left, center, right, top, middle and bottom)

You can align a few elements together by using the alignment options in the design toolbar.  By choosing a few elements (by selecting them with the mouse while the “ctrl” key is pressed) you can choose to align all the elements to the left, for example. All element will align according to the element which resides furthest to the left.
find out more about aligning tools

select the elements and press on “align left”


the elements will align left

Same spaces between elements (horizontal and vertical)
You can select a few elements that have a different vertical spacing between them, for instance,  and by using the “make save vertical space” option you can change the spacing between them to an equal one.

select the elements and press on “make same vertical space”

the elements will be arrangedwith an equal vertical spacing between them

1-      Images
you can add images to your form and even place elements on top of them to act as backgrounds. This can by done by simply dragging the “image” element on to the design area. A default formlogix image will appear and you will be able to replace it with your own from the element settings (using the “path” field). Please notice that you will need to change the image width and height according to your image’s proportions.