User Guide

 

How to Create Your First Web Form

How to Create Your First Web Form

First time JotForm users often ask how to create a simple web form, how to set up Email Notifications, what are the ways to embed a form to a website, how to test the form to see if it's 100% working, and how can I see responses in my email and JotForm Inbox - Got a tight schedule? Learn it all in 2 minutes with the video below.

1. Decide what to ask first

First of all, think about what kind of questions you want to ask to our visitors. The best web forms maintain higher conversion rates by keeping it short & simple. Many users will simply abandon a form if it has too many questions. So keep your web forms as short & clear as possible.

2. State the purpose in the heading

Although you know why you're creating this web form, a confused visitor might land on the web page without knowing what your form does. Put a short heading such as "Contact Us" to your form. Put additional info in the sub-heading if necessary.

3. Use predefined Form Fields (e.g. Full Name, Email, Address, etc.)

Ask the visitor for his or her name & email address so you know who submitted what and this will allow you to followup with them if needed. Click ADD FORM ELEMENT on the left of the Form Builder and all the standard Form Fields are under the BASIC tab.

4. Use a Long Text Entry field for long answers (comments, description etc.)

A large comment box allows visitors to provide longer responses. Use the Long Text Entry field (textarea) under the QUICK ELEMENTS section of the BASIC tab.

5. Setting up Email Notifications

With Email Notifications, you’ll receive an alert in your email every time someone completes your form. Click SETTINGS at the top > EMAILS on the left > click the PLUS (+) icon to add a new Email Notification.

Since you're creating an email that'll come to you as the form owner, select NOTIFICATION EMAIL. The AUTORESPONDER is used when you need to send a confirmation email to the user who submitted the form.

For a more in-depth discussion on Email Notifications, refer to our guide on Setting-Up-Email-Notifications.

6. Embed your form to a website

Embedding your form in a website is crucial for collecting data continuously. To get your embed codes, click PUBLISH at the top > then EMBED on the left nav. Choose a different embed option depending to what suits you best.

There are also specific ways of embedding the form on several Website Builders and CMS platforms. If you're using one, go to the PLATFORMS menu instead and pick the one you're using.

Copy & paste the codes into your website's source code, usually within the body tag, and your form will be integrated the moment you save the changes in your editor.

If you're not sure which one to choose, read our guide on Which-Form-Embed-Code-Should-I-Use

7. Test your web form & see it working

Test your form on your live website to see that you're getting notifications to your email and your JotForm inbox. If anything doesn't come through, come back and check your steps correctly.

Congratulations on setting up your first web form! Return to this article anytime if you get lost. Tell us about your experience in creating your first web form in the comments section below!

Send Comment

210 Comments...

See all comments
  • nauan

    nice post keep it up

  • Almin Valyani

    I made the form/contact us tab, copied the code now have no idea where to put the code on my facebook page to make it work...

  • SUNNY

    I created a small website. In contact details form the name field color (background of the field which is White) & color of the text typed(which is White) are same(both are white). I am unable to change text color to Black. Pls help me

  • Buganim997

    I can't publish my form why ? It say this form is disabled ! Please help

  • SAESSAS

    hola , como uso el lector de codigos QR en un formulario?

  • rizqyanm

    why submit button not appear?

  • Sarit Hovav

    I need to create a credit card authorization form to embed into my website that is secured with an SSL certificate. I don't want the information to come to JotForm due to security. Is this possible?

  • rawat

    dear sir when i submitted form . i see thank you page but did not see submission data

  • Estefana perryman

    Creative piece . I loved the info , Does someone know where my company might get ahold of a sample WI WB-11 form to fill in ?

  • kubra

    Thanks for sharing this guide, it is very useful!

  • naseer ahmed

    how to creat live audio streming website i need help can any give help me

  • Karinakar

    I personally really enjoy Site.pro http://site.pro/. Like the way it is organized and had no problems using it, ever. So, I strongly encourage you to check it out

  • Raiyed

    What do I do after copying the code??

  • azaPefe

    http://google.com

  • azaPefe

    http://google.com

  • Sivesh Sukumar

    Is there any way to get get my form submissions uploading to a database as well as to my email?

  • Jenai

    Can I create a jotform that will take the user out to provide thier location via google maps pick & return the lat/long in its response?

  • Projonmo Bangladesh

    How to Create gander tab on Registration Form?

  • cespal

    Hi, I can't create a form with transparent ackground. Allways appear in white. And I can't change in anyone place, css...
    What can I do, please?
    Thank you very much

  • ander90

    WAOUU!!! IT'S VERY GOOD. BUT I DON'T KNOW HOW TO AD THE PASS WORD OBJET

  • CintaJannah

    nice

  • Jama

    my boss was searching for form name some time ago and found an excellent service with an online forms database . If people need to fill out 1993 DA 31 too , here's a da31 form

  • Stankiewicz

    Useful commentary - BTW , if your business has been searching for a 1993 DA 31 , my husband encountered a sample form here da 31 fillable.

  • Jama

    It was great to stumble upon this post. I think it could also be useful for everyone to know how and where to fill a form online. I've found some decent tutorials on how to fill 1993 DA 31 out online here da31 .

  • Payday#Loans

    How do you protect your website's content from copyright infringement?

  • MEEK EMMY

    I need a form

  • ts9964

    I have created a form to ask people to click the areas that apply, but on the spreadsheet these cannot be filtered separately. what is the best way to add buttons to give each answer on a separate column?

  • Shinnixstar

    Nice...i need link for creating it

  • ajbanks

    Where is the video??

  • Priyanka25

    it's tricky, not as simple as it's shown

  • berilokten


    1. First of all you need to click log in.
    2. Click on “create form”.
    3. Choose blank form and click “create”.
    4. Click on “tittle me” and edit it what you want (ex: My Form).
    5. You can drag and drop the tools from toolbar to white area.
    6. Finally click on “Auto save”

  • podevin

    I already create Forms in my website on construction. I just want to know how quick and better it is if I use Jotform!

  • williamsreg

    Everything moves so fast, can hardly follow the sequence. To be a useful tool the video needs to be a little slower. Drop the irritating music which I did by putting it on mute but voice narration would be a much better user experience.

  • Pharmc714

    Very nice site! cheap goods

  • SaveOASanimals

    is there a template for a letter writing campaign? e.g. that can be used to send letters to politicians?

  • wsdacvirtualshow

    Hope I can do it

  • shanlee

    when I click a link on my page to open the form (suppose to be in a lightbox), there is momentarily a lightbox and then the page is replaced with a full page form (no lightbox). Please help. I've put the code below:




    var JFL_50395077146256 = new JotformFeedback({
    formId:'50395077146256',
    base:'http://jotform.ca/',
    windowTitle:'Mini Contact Form with CSS3',
    background:'#5a6673',
    fontColor:'#FFFFFF',
    type:1,
    height:500,
    width:700,
    openOnLoad:false
    });


    …there's a close body tag at the end of my html

    myemail@gmail.com

  • shanlee

    I was wondering how I can make the form (in a lightbox) open when clicking an html element/link on my page.

    Right now the code I pasted in includes its own link that becomes added to my page, but I want to link the form to my own element.

    Thanks in advance

  • MPPMe

    Can you advise me if the data entered can be saved to Excel File

  • nope

    cool

  • Dale

    I dont want to use a javascript version of the form as my CMS strips out javascript. What are the alternatives?

  • reigndark30

    HOW CAN I GET THE LINK ?

  • SyedAsad

    Sir,
    How to create facebook login page?

  • clippingandroid

    nice

  • mgnn12

    woiooooow

  • Creatix

    Cool :)

  • Smithc467

    Hi! Someone in my Myspace group shared this website with us so I came to look it over. I'm definitely loving the information. I'm bookmarking and will be tweeting this to my followers! Great blog and terrific design and style. cbdddaefbfdagbee

  • gricheabderaouf

    good

  • Terri Thomas

    How do I see all of the data all at once - a list of the info from the people who register?

  • Mike

    Can you put an actually helpful video on this page? The current one is blurry and says nothing.