How To Create Online Forms
Today I’m going to show you how to use an online form building service to seamlessly handle building, designing, and integrating your forms. There are many services available- I’m going to focus on the one with the most attractive free offering, JotForm
Simple Four Step Process
- The HTML phase: Adding the Basic Form Elements
- The CSS phase: Using the Form Designer
- The PHP phase: Integrations and Directing Form Submissions
The HTML Phase: Adding The Basic Form Elements
The first step is defining the fields of the form. These vary widely depending on the purpose of the form. The most simple contact form will have a text field for name and text area for the comment. Forms grow from there, with email address fields, sliders for a visual way to select a number, matrices, and any number of input options. JotForm offers hundreds of field types, anything from audio recording, to signature fields, to image carousels, to embedded camera widgets in order to send a picture. Using JotForm’s drag and drop interface, select the fields you want and place them on the form builder canvas. From there, adjust the labels, hover text, placeholder text, error text, and other properties associated with them.
Sometimes you want to make fields required, or don’t want it to appear unless previous values are selected. For instance, an RSVP form could have the first question indicate whether you’re attending the event. If so, more questions could be displayed about that event such as what you will be bringing and how many guests. And if not, then a kind message offering regrets for the missed engagement.
The CSS Phase: Using The Form Designer
JotForm recently launched the new Form Designer. This is a groundbreaking point and click CSS builder. It makes designing your form easy for all levels of users. The most basic workflow is to use the preset properties in the Design tab. For instance, select the layout section to set layout boundaries, or colors to establish the color scheme. Most users can get by with just this. It can match any design or style you wish.
Clicking the CSS tab brings up the CSS Helper, which is where the Form Designer really begins to shine. Selecting an element on the form will automagically create the CSS selector. No having to inspect the code, and find the right node in the tree. It’s already auto-populated in the CSS. What’s more, as soon as a field’s selected, a name cloud of valid properties appears. Pick the one you want, and the only thing that’s left to do is enter a valid value. It takes the pain out of styling forms.
For seasoned veterans, the CSS can be edited directly as well, giving users full control over their form design. And for true professionals, they can submit their designs to the Theme Store, where users can buy and sell pre made form themes.
The PHP Phase: Integrations And Directing Form Submissions
Once the building blocks are set, one must decide what to do with the submissions. Were we doing this on our own, we’d set up a PHP page (or any other server side language), and send the submissions there. This is all handled by online form builders. The most basic solution is to enter an email and have a summary of the results sent out. Online form builders really stand out when you need to integrate with other systems. Integrations all follow a similar pattern.
- select the system you’d like to integrate with.
- enter connection or log in info- Username/Password and/or API Key.
- map fields from your form submissions to the external system.
This is true for SalesForce, Box, ConstantContact, and a wide variety of third party systems that users frequently integrate with. One of the more popular options is setting up a payment portal, with PayPal or similar. JotForm’s a unique provider in that this is also included in their free offering.
A web designer was once quoted in an interview as follows:
Q: Is there anything you hate working on?
A: Web Forms. Whenever I see a web form in a project a little part of me cries on the inside.
Online form builders take the pain out of form building. JotForm is one of many, which comes with as broad array of integrations, a newly released innovative design tool, and an enticing free option. Advanced designers, and novices can benefit from using it. Regardless of the tool, using an online form builder is the right solution for many projects.
What are you experiences with using online form builders? Let us know in the comments.