Creating and editing forms in Jotform

Administrator
Jul 13, 2023
3 min read

Updated: Aug 26, 2024

We create forms in Jotform and embed them to our website. Support specialists are tasked to do this from time to time.

Use case includes:

Registration forms
Card payment forms
Feedback forms
Gift forms
Polls/surveys
Screening job candidates

Watch these videos too see how to edit and design in Jotform:

How to think like a designer when editing a form in Jotform

How to use Jotform and embed it on Weebly

How to edit product payment form in Jotform

We have multiple payment forms that we need to update from time to time (see Trello SOP here). Using this old payment form as an example, here's a guide on how to change the basic payment elements in Jotform.

Select the payment form and go to the card payment widget.
Click the form and small action icons will pop up. Select "Payment Settings".
Hover the mouse pointer on the product you want to update. Click the pencil icon.
Change the name and description of the product. Toggle on the "Show subtotal on form" button.
Switch to the "Options" tab and add the feature you think is appropriate. Quantity Selector: You can add a Quantity Selector feature wherein clients can purchase X number of products at once. If you add this, it'll simply ask you for the max number of products that can be purchased at once. Product Options: If you're offering different products at different prices, select the Product Option feature. Fill out the "Label" of the product and enable special pricing per option and write the different programs and prices. Since this is a card processor, don't forget to add 3% transaction fee on top of the base prices of the programs.
Publish the form and you're done.

Passing down form data to another form in Jotform

Check this first to see Jotform's simple documentation about it.

Sometimes we will need to use two or three forms for registration or RSVP. Usually, the first form is the lead capture form where we get the user's personal information. The second form is typically the payment form.

Lead capture form → Payment form → Thank you page

Lead capture form → Upsell form (if 101 selected) → Payment form → Thank you page

We do this so users won't have to input the same data over and over again, which is inefficient for them. Please watch video below for an explainer.

Removing the white space at the top of a form in Jotform

If a VA is designing a form in Jotform and you want to decrease the space at the top of the form, please read this article.

Below is the code to put in the advanced designer tool to remove white space at top:

.form-all {

padding-top: 0;

}

To also remove the space between the logo and the form:

.form-all {

box-shadow : none!important;

padding-top : 0;

margin-top : 30px;

}

To remove the whitespace around the form in mobile version:

@media screen and (max-width:480px){ .supernova body { margin: 0 !important; } ul.form-section.page-section { padding: 0 !important; } .supernova { background-color: transparent; } }