Web
Article

How to Simplify Form Building with JotForm

By Craig Buckler

This post was sponsored by JotForm. Thank you for supporting the sponsors who make SitePoint possible!

It’s our fault. We were the ones who opened Pandora’s box. The proliferation of good, open source Content Management Systems such as WordPress mean clients can edit their website content without our assistance. Until they attempt to modify a form.

Forms are an integral part of content. You can understand why a client asks, “If I can add a heading, why can’t I add an email request box?” The reality is more difficult. Even the most basic form requires development expertise:

  1. Create the form using HTML5 fields.
  2. Develop fallback code for older browsers, e.g. IE9 doesn’t support new HTML5 field types or built-in validation.
  3. Develop validation code both client-side and server-side.
  4. Perhaps create or use custom fields such as map pickers, date handlers, file uploaders, etc.
  5. Implement security measures to ensure spammers cannot hack or use the system.
  6. Send the inquiry data in an email, or submit it to the server.
  7. Log the inquiry in a repository such as a database.
  8. Test the form on a variety of desktop, tablet and mobile devices.
  9. Create custom reports to summarize the inquiry data.
  10. Integrate the system with monitoring, analytics and/or sales systems.

Ironically, the slicker and simpler the user experience, the more development effort is required. If you’re happy to proceed, the client will inevitably contact you 30 seconds after deployment…

  • “Can we add just one more field?”
  • “Can you send our CEO a weekly PDF summary of response statistics?”, or
  • “Can we output all this data to our CRM system for marketing analysis?”

The simplest forms rapidly mutate into mission-critical monsters.

Even if you find a reasonable form builder plug-in for your CMS, they’re rarely suited to non-technical end users. Some custom code will always be required to handle data flows and logging.

Fortunately, there’s an easier option…

Enter JotForm

JotForm allows you or non-developers to build and edit forms with an easy WYSIWYG interface. You can define forms for your clients or hand the whole system over. The basic workflow:

1. Create your form structure
The initial screen allows you to add form fields, labels and titles. There are almost 400 pre-built custom widgets available including captchas, referral trackers, tabs, photo capture and even voice recorders.

JotForm edit

You can also define response email addresses, submission actions and set up integration with applications such as Dropbox, SalesForce and payment systems including PayPal. More than 100 apps are available.

2. Use the Form Designer
JotForm’s new Form Designer then allows you to style the form’s color and layout. As well as standard graphical and responsive design tools, it includes a point-and-click CSS Helper. This highly-touted feature makes building CSS easier than ever. Selecting the field on the screen builds the CSS selector and presents a list of available properties to choose from. All that’s left for the user is to enter the values.

JotForm theme designer

3. Publish your form
Finally, your form can be used within a standalone page, an iframe or embedded using a script — all the code is provided. It can be readily integrated with WordPress, Drupal, Joomla, or even a Facebook page:

JotForm publish

The JotForm Theme Store

JotForm’s recently released Theme Store makes form building even easier. In fact, the Theme Store eliminates the need for form building so you can immediately start customizing a ready-made theme. A range of award-winning free and commercial themes are provided which can instantly style your form without you having to define color schemes, images and CSS.

JotForm Theme Store

Topically, there are seasonal snow and santa themes should your clients wish to style their forms for various calendar events during the year.

As a bonus, when you do create your form-based masterpiece, it can be submitted to the JotForm Theme Store. Once it’s submitted you can opt to earn a commission every time someone chooses it, or you can share it for free.

JotForm empowers your clients and frees you from the daily development drudgery of form building. There’s a free starter account so you can try JotForm without registration then upgrade as your submissions and storage space requirements grow.

Meet the author
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.