Commerce Fields

Ninja Forms 3.0 contains a special set of fields specifically for helping our users collect money in their forms for items, event registrations, and more.  Combined with one of our payment gateways, they are a powerful tool to start earning money from your site quickly.

We will only cover options unique to the product fields here.  For explanations on other field options, see our Field Types documentation.

Product Fields

Add a single product per field to your form.  Set the price and allow users to specify a quantity.

Product field settings

The settings above will appear like this to your users:

Product field with quantity front end

If you disable inline quantity, you may add a quantity field on another line.  In that case, your product field would simply display like this:

Product field without quantity front end

Quantity Fields

If you choose not to use the inline product quantity, you can add a separate quantity field for your users to choose the number of a product to purchase.

Choose the product you’d like to connect with your quantity field.

Select the product to attach your quantity to.

Set a minimum amount the user can order, as well as a maximum.  The “Step” value is the increments users can order in.  For example, if your “Step” value is set to “.5”, users can order 0.5, 1.0, 1.5, 2.0, 2.5 etc. of your product.

You can also “Disable Input” to force your users to purchase a specific number of products when completing your form:

Disable input on quantity field to force a quantity

As configured above, a product and quantity field would appear like this:

Product and quantity field front end output

Shipping Fields

Add a static shipping price to a users order.

Shipping field settings

Adding the shipping field to our form looks like this:

Product, quantity. and shipping field front end output

Total Fields

For display only.  Shows the automatic total amount [ (product * quantity) + shipping ] to be charged to your users.  This field is also used in your “Collect Payment” action to send the total to your payment processor.

Adding a Total field to our form looks like this:

Product, quantity. shipping, and total field front end output

Credit Card Fields

These fields are NEVER saved to your database and are only used to send processing data to your payment gateway (not used for Pay Pal)

Adding the “Credit Card” field to your form adds the following five individual fields:

  1. Credit Card Full Name
  2. Credit Card Number
  3. Credit Card CVC
  4. Credit Card Expiration
  5. Credit Card Zip

Unlike in 2.9, the 3.0 credit card fields can be easily and independently styled or moved with our Layout and Styles extension.