User Guide

How to Set Up a Contact Form in JotForm

Last Update: May 28, 2017

Contact forms are one of the most commonly used form types. They are usually one of the fastest way for the readers to get in touch whenever they need assistance, have feedback, reports or ideas to share. Creating a contact form manually is labor intensive, hard, and can be frustrating. If you want to create great and modern looking contact form in minutes, Jotform’s Form Builder is the best tool for the job.

Jotform is the easiest WYSIWYG form builder. Simply drag & drop the form fields to where you need them, save your form and you’re done! That’s it, you don’t need to write even a single line of code.

To set up a contact form in Jotform:

1. Navigate to www.jotform.com

2. Login and create a form by clicking the “Create Form” button. 

         a. If you want to create a form from scratch, select Blank Form

         b. If you want to select from over 8,000 ready made forms, click Use Template

         c. You can also import any unrestricted public JotForm with the Import Form option.

 

  

         Let’s create a form from scratch so we can look at all the Jotform features.

 

3. While you are in the form builder, drag fields from the left panel to the form panel.

 

 

Here’s an example of the most common fields used in a contact form.

 

 

 

4. When finished, save your form and you are done!

If you want your contact form friendlier and more professional, here are a few best practices you might want to consider.

    A. Make your Form Specific. Contact us is a broad term. It could mean anything. You have to be more specific with your form about what to contact or what the contact form is all about. How? Add a sub heading.

 

    Example: Which one looks better?

 

 

 

    B. Add Helper Information. Filling out a form can be tricky. Using Sub Labels, Hints/Placeholders, Hover Text and Static Text fields will help eliminate mistakes. Add extra information as much as possible or necessary. Below is a form with some helpers.

The screenshot below shows how you can add sublabels, either you can type directly on the field or open the properties of that field and find the "Sub Label" option under the "General" tab.

 

The screenshot below shows where you can find the "Placeholder" and "Hover Text" options. You can find it on the properties window under the "Advanced" tab.  

    

Another way to add a helper is by using a "Text" field, here you can add descriptions, instructions or any other informational text to display to the user. 

 

 

    C. Avoid Using Captchas. We know captchas serve a purpose but sometimes it can be frustrating and lead to decrease conversion rates. With Jotform, you don’t have to use captcha unless you continually receive fake submissions. Jotform has a built in spam prevention systems. If you still want to add a captcha field, you can check this guide: How to Add a Captcha Field

    D. Keep it Simple. As the saying goes, simplicity is beauty. Don’t confuse your users by adding unrelated information or ads to your contact form.

 

That’s it! Now tell us which methods you like to use in your contact forms in the comments section below!

6 Comments...

  • mkitty

    trying to figure out where this will go?

  • mc2explore

    Designed my first contact form, but the lack of flexibility in formatting result in it being too long. Can items be positioned differently on a page?

  • Readywriter

    How do I connect the contact form to my blog.

  • Dweat40906

    I have created a contact form for my church app. I have used the Jot plug in and pasted the published link into the plug in.
    I can fill out the form, however when I click the Submit button I am taken to the middle of the screen. The submit button will not work. Please help.

  • Jameshooper

    How do I remove the logo at the top of the form?

  • t28sjg

    I have set up the contact form, but when I embed it onto a webpage I have huge amounts of blank space underneath - how do I resolve this?
    Many thanks

Send Comment