How to Create Your First Web Form

February 27, 2025

Jotform makes it simple to create web forms without any coding. Whether you need a contact form, event registration, or survey, the intuitive drag-and-drop builder allows you to design and customize forms with ease.

From selecting the right template to adding form fields and setting up email notifications, each step ensures a smooth experience for both you and your users. With flexible publishing options, you can easily share your form and start collecting responses in no time.

Creating Your First Form

Jotform gives you multiple options to start creating a form, making it easy to choose a method that fits your needs. Let’s do it:

  1. On your My Workspace page, click on Create on the top-left side of the screen.
Create Button in Workspace Jotform
  1. In the window that opens up, click on Forms.
Form Option in Workspace Jotform
  1. Now, you can choose Start from Scratch or Use Template to select from over 10,000 premade forms.
Start From Scratch or Use Template option in Jotform
  1. Assuming you choose to Start from Scratch, select one of the following layouts:
    • Classic Form — Displays all questions on a single page.
    • Card Form — Shows one question per page for a guided experience.
Select Form Layout in Jotform
  1. Finally, you’ll be redirected to Form Builder, where you can start building your form using Jotform’s drag-and-drop interface.
Form Builder in Jotform

Pro Tip

If you’re unsure, start with a template and customize it to fit your needs.

Adding Form Elements

The foundation of your form is built using form elements. Jotform offers a variety of predefined elements, payment options, and widgets that you can drag and drop into your form. Here’s how:

  1. In Form Builder, click on the Add Form Element menu on the left side of the page to see the complete list of elements and widgets.
Add Element Button in Form Builder Jotform
  1. Under the Form Elements menu on the left, make selections from the following tabs:
    • Basic tab — Includes essential fields like Name, Email, Short & Long Text, Multiple Choice, Dropdown, and Date Picker.
    • Payments tab — Allows you to integrate payment gateways like PayPal, Stripe, and Square to accept online payments.
    • Widgets tab — Offers advanced fields such as e-signatures, file uploads, rating scales, and progress bars.
  2. Just scroll down the list, and then drag and drop the elements onto your form.
Basic, Payments, Widgets Tab in Form Builder in Jotform

Pro Tip

Keep your form short and focused. Only include the fields that are essential to avoid overwhelming users.

Customizing Your Form

A well-designed form improves engagement and enhances the user experience. Jotform allows you to personalize the look and feel of your form to match your brand. Here’s how to do it:

  1.  In Form Builder, click on the Paint Roller icon on the top-right side of the screen to open Form Designer.
Paint Roller Icon in Form Builder Jotform
  1. Now, in the Form Designer menu, you can customize the following aspects of your form:
    • Colors tab — Change the background, button, and text colors.
    • Styles tab — Modify font styles, spacing, and field alignment.
    • Themes tab — Apply a pre-made design theme to give your form a professional look.
    • Layout tab— Choose between a single-page (Classic) or one-question-per-page (Card) format.
Form Designer Menu, consist of Colors, Styles, Themes and Layout Tab in Form Builder Jotform

You might also want to check out our guides about:

Pro Tip

A visually appealing form improves engagement. Keep the design clean and easy to read by using consistent colors and spacing.

Setting Up Email Notifications

Email notifications help you stay updated on form submissions. You can receive responses instantly and also send confirmation emails to users. By default, Jotform automatically generates an email notification when you create a form. But, if you need to create a new one, here’s how to do it:

  1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.
  2. In the menu on the left side of the page, click on Emails.
  3. Then, click on Add Email.
Add New Email option in Form Builder Jotform
  1. Next, select Notification Email.
Notification Email in Form Builder Jotform
  1. Click on the Recipients tab and enter your email address in the Recipient Email field.
  2. Now, just click on Save and you’re done.
Recipient option in Form Builder in Jotform

You might also want to check out our guides about:

Pro Tip

Autoresponders reassure users that their submission was received. Personalize them with a thank-you message or additional instructions for a better experience.

Publishing and Sharing Your Form

Once your form is ready, you’ll need to share it with your audience. Jotform provides multiple ways to do that. Here’s how:

  1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
  2. Then, click on Copy link and send it directly to your users via email or social media.
Copy link of the Form link in Jotform

You can also check out our guide about How to Send a Form via Email.

Testing Your Form

Before going live, it’s essential to test your form to ensure it functions correctly. Checkout the steps below to see how it’s done:

  1. In the orange navigation bar on the top-right side of the page, toggle Preview Form to the On position.
  2. Then, fill it out and click on Submit to submit a test entry.
Preview and Submit Option in Form in Jotform

Now, check if you receive email notifications and if submissions show up in your Table Submissions.

And that’s it! You’ve just created your first Jotform web form. With easy customization, email alerts, and sharing options, collecting responses is a breeze. Give it a try and see how it works for you.

Jotform AI Agents
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Kumarshankaran Aiyar - Profile picture
  • Obvious Ndlovu - Profile picture
  • Lisa Sheard - Profile picture
  • Al Gallacher - Profile picture
  • Idona Griffithq - Profile picture
  • Vibha Patel - Profile picture
  • Jennifer Solomons  - Profile picture
  • Ezoie Tellly - Profile picture
  • Ismar Vicente - Profile picture
  • Deborah Anderson - Profile picture
  • Gabriella Ohnemus - Profile picture
  • Leo - Profile picture
  • Ida CXS - Profile picture
  • caglayan - Profile picture
  • Fernand - Profile picture
  • JOHN PETER MBAHONGERIKI - Profile picture
  • Manish - Profile picture
  • vdubina145 - Profile picture
  • emmanuelkamwagha649 - Profile picture
  • laura.sola - Profile picture
  • evansomoke10 - Profile picture
  • nlla31415 - Profile picture
  • trodgers068 - Profile picture
  • printerofflinehelpus - Profile picture
  • Richard Armogenia - Profile picture