How to Simplify Form Building with JotForm

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

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

Frequently Asked Questions about Simplifying Form Building with JotForm