Meet the new and shiny free form builder!

  

Worthy use of web forms begins with their creation. We believe that the way forms are perceived by both creators and submitters is highly influenced by how smooth, time-efficient and feature-rich the creation process is.

The 123ContactForm web form builder renders precisely this idea (since our major platform enhancement). It has been subject to continual improvement and we are still very much preoccupied with how to enhance our users’ form creation experience.

View updates in real time

Form fields are displayed in the form builder main view. Added, deleted, duplicated, modified or rearranged fields are updated right away. To add and edit fields, use the clearly structured panel on the left side of the page. To duplicate or delete elements, click on a field in the main view and use the icons in the top right corner. To rearrange form fields, drag and drop them in the main view. All changes are made instantly, thanks to our real-time online form builder.

Form Editor

Quick tip: Fields can now be added to your web form in two different ways: 1. Click on the field icon in the left panel – the field will be added at the end of your form. 2. Drag and drop the field icon in your main view – the field will be placed exactly where you drop it.

After you have added a field, you just need to click on it in the main view to open its customization settings in the left panel.

No refresh. Just instant updates

Form updates are displayed without page refresh. Previously, refresh was triggered by new form actions and you had to wait a couple of seconds for the page to reload. Now, that is history. The new form builder integrates adjustments on the spot.

So what form fields are there?

The form builder provides 20 types of fields – 10 Basic and 10 Advanced. All fields are customizable, thus allowing for requesting various categories of information from your visitors. Not only do you have access to fields that are most popular and needed within forms, but you can also design field structure and behavior to suit your preference and requirements.

Basic fields

Basic Fields

  • Text Box. Request a simple text input from your visitor or customize the field to ask for a specific type of input (e.g.: only letters, only numbers, letters and numbers, email addresses, URLs, dates).
  • Text Area. Request a larger text input (e.g.: message, comments, suggestions).
  • Number. Use it to get numeric data from your visitors (e.g.: age, number of attendants, number of coworkers, hours spent in front of the computer per day).
  • Dropdown Lists. Ask visitors to choose one of the available options, which are displayed in a list that opens when visitors click on it.
  • Radio Buttons. Ask visitors to make a choice. Options are displayed separately.
  • Checkboxes. Request a multiple choice from your visitors. They will be able to tick as many options as they wish.
  • Headings. Add a heading to your form (so as to mark the beginning of a new section, for example).
  • Likert Scales. Ask for your visitors’ opinions on certain statements using gradual options (this is very useful with surveys).
  • Email. Request visitors to provide their email addresses.
  • Website. Request the URL of a website.

Fields that ask for a specific type of input are preset in the Field Validation dropdown to accept only the requested data. This way, if you want to obtain a certain category of information, you will receive no unwanted data – visitors will be informed through an error message that they can only submit the form if it is filled correctly.

Advanced fields

Advanced Fields

  • Name. Get your visitors’ first and last names.
  • Date. Ask for a date input (birthday, the preferred day for order delivery, for attending an event, for employment commencement).
  • Time. Request visitors to specify time coordinates: hours and minutes, AM or PM.
  • Address. Ask for an address (individual text boxes for street address, city, region, postal/ZIP code and a dropdown for selecting the country).
  • Phone. Request a phone number (3-3-4 characters preset format to make sure provided phone numbers are complete).
  • Price. Ask visitors to specify a price. Choose your desired currency.
  • HTML Block. Add customized text sections, images and tables to your form, using a What You See Is What You Get editor.
  • File Upload. Receive files from your visitors. The list of accepted file extension is too long to be included here :).
  • Google Map. Integrate a Google Map within your form to provide precise location details to your visitors.
  • Image. Add images to make your form more vivid.

Visit our Documentation section to learn more about Basic & Advanced form fields.

Customize form layout

Besides customizing form fields individually, you can also customize the general appearance of your web form. Do this in the Form Layout panel, placed above the form builder main view. Choose the number of columns your form will contain (1 or 2), set the form width (in pixels) and position Labels (field titles) and Instructions (fill-in information that may be useful to your visitors and that can be added for each field in the field customization panel).

Form Layout

Another option available in the Form Layout panel is Form Encoding. You will need this for special characters. For example, if your online form uses Hebrew, Arabic or Thai characters, you will need to select the appropriate encoding for your region. However, UTF-8 works best in most cases, so give it a go.

Preview the result

You can preview your web form all throughout the form creation process. Use the Preview button placed in the top right corner of the main view to see how your form will look like.

Form Preview

Visit the Form Builder Help & Documentation page for more details on how to get the best out of form builder features.

How can we further improve your web form creation experience? Use the Comments section below to give us your suggestions!

About the Author

Alexandra Draghici is the Project Manager of 123ContactForm. She tracks our project development and acts as a link between departments. Alexandra likes web technologies and teaching online and offline.

This entry was posted on Friday, June 24th, 2011 at 3:15 am and is filed under Features. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Meet the new and shiny free form builder!”

  1. Boosted autoresponders for your web form | 123ContactForm Blog Says:

    [...] Press Add Rule to open the Confirmation Rule lightbox. On the first line, establish the rule condition. Select the form field that will trigger reply changes and specify the requirements user input has to meet. On the second line, select the autoresponder that will be sent if this condition is met. (To customize form fields, use the web form editor.) [...]

  2. Pablo Aristides Gonzalez Says:

    necesito informacion pero en español

  3. Alexandra Says:

    Pablo, póngase en contacto con nosotros: http://www.123contactform.com/contactus.html.

  4. Giveaway: 123ContactForm Free Platinum License For an Year Worth 300$ | Freakify.com | Learn Technology Says:

    [...] what Is 123contacform.com 123ContactForm free form builder to create powerful online web forms in 3 easy steps.No programming skills are requiredjust drag [...]

Leave a Reply