Building a website can be easy. There are an abundance website templates available, and hosting is cheap. Web designers often start with a prefabricated design and customize it to meet their client’s needs. This works well and keeps a great many clients happy.
This happiness continues, until it comes to forms. Adding forms to a site can be time consuming, tedious, and can require accessing all aspects of the site. First the HTML needs to be built. Then it needs to be styled with CSS. Adding some JavaScript for error checking is a nice touch. Spam protection is a must, so CAPTCHA integration is necessary. And then you need to send the submission results to the server and do something with them. Store them in a database, send in an email notification, integrate with a third party system- all these and more are what awaits web developers in building 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 JavaScript phase: Adding Conditional Logic
- 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.
The JavaScript Phase: Adding Conditional Logic
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.
Using the conditional logic interface, fields can be selected and various conditions added. This builds JavaScript in the background to enforce the preset requirements. A wide variety of conditions are available including Skip to Page (for multipage forms), Send Email upon submission (to have notifications sent to specific addresses based upon form data), and updating a form field value based upon previous values. The conditions wizard will save developers a lot of time in writing JavaScript manually.
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.