Design and Create Beautiful Forms With JotForm

Design and Create Beautiful Forms With JotForm

Many people publish their email address on their contact page and call it good enough. It’s quick, easy, and gets the job done. People will be able to contact them by sending them an email. But there are drawbacks to doing this.

One important reason not to is publishing your email address exposes it to spammers. Bots will pick it up and will start sending you loads of useless emails. Also, by using an email address you have to rely on the user to provide you the information you need. For instance maybe you need their phone number, contact address, and for them to send along a picture. Some users will forget to include something. A better solution is to create a form and guide users to sending the correct information.

We recommend using JotForm for creating your forms.


JotForm was founded in 2006 by a group of web developers who built websites and provided consulting services.

Its numbers tell the story:

  • It has 1,600,000 users
  • Presently 6,000,000 forms are hosted using their service
  • The site has 7000 form templates to choose from
  • It’s available in 18 languages
  • 123,000,000 forms have been submitted through JotForm

With JotForm anyone can create beautiful forms even when they have no coding or programming knowledge. Forms can be embedded into any website, and also have a permanent link which can be emailed directly.

Here’s how form creation works. First you build the basic structure of the form. This is JotForm’s core service. Drag and drop fields onto the form, add labels, conditions, and integrations. JotForm can be integrated with many services such as SalesForce, Google Docs, and Constant Contact.


Now that the form is built, it’s time to add style to it. For this, use the Form Designer, as pictured below.


As you can see, the form starts as plain and simple, with no colors added.

Note on the top-right side of the image there are some colored squares. These are different color schemes which you can choose. Clicking on one of the squares will apply that color scheme on the form. The result is shown below.


Colors can be manually adjusted as well.

Let’s now try changing the font of the text for the form. I clicked on “Font Options” on the right and a drop down list displaying different font names appeared. This feature is actually seamlessly linked with Google Fonts which brings you the best and latest font selection on the web.


I chose the Oswald font which you can see in the above image. Using a similar process, you can select options on the right hand panel and update them.

The point and click interface is great. But if you know how to write CSS code and want to do advanced editing, you can still do that. Just click on the CSS tab on the top right.


If I click on any part of the form the respective CSS code will be highlighted on the right. This makes CSS editing quite easy as coders won’t have to search for different lines of code. Once part of the form is selected, you can select the field property on the top. This builds most of the CSS statement for you. The only thing that’s left is to enter a valid property value.

Theme Store launch

On December 15th, JotForm launched a brand new section on their website known as the Theme Store. Furthering their endeavors in the field of form building, this Theme Store, as the name suggests, will be a marketplace for form themes. Here any designer can create a form and then sell it on the site. Users in turn can purchase them, or use one of the many free form themes available. The Theme Store will have many themes and will be updated on a daily basis.

I strongly recommend checking out this tool. Go and take a look and then let me know what you think in the comments below.

Aidan Huang is a web enthusiast and ingenious blogger who loves all things design, interesting and technology. He is the editor-in-chief at Onextrapixel and have founded several other interesting blogs. Do keep in touch with him on Facebook and follow him on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.