---
title: Add Payment Item Field in Payment Forms 
description: "In **Fluent Forms**,  the **Payment Item** field allows you to showcase single or multiple **Items (Products)** options in your form, allowing users to select and buy their desired Item/s that exist in the form**.** This article will guide you through…"
url: "https://fluentforms.com/docs/add-payment-item-field-in-payment-forms/"
updated: "2025-06-03"
category: Field Types / Payment Fields
---

# Add Payment Item Field in Payment Forms 

In **Fluent Forms**,  the **Payment Item** field allows you to showcase single or multiple **Items (Products)** options in your form, allowing users to select and buy their desired Item/s that exist in the form**.**

This article will guide you through adding the **Payment Item** field in your Fluent Forms for your WordPress Site.

## Add Payment Item Field

To learn how to add the Payment Item field to the Fluent Forms, follow the steps with the screenshots below –  

First, go tothe**Forms**section from the **Fluent Forms Navbar,**chooseadesired**Payment Form,**and click the **Pencil/Edit** icon to open the **Editor** page of that form.

> If you don’t have an existing payment form, read this [Documentation](https://fluentforms.com/docs/how-to-create-a-payment-form-with-fluent-form/) to create a new one. For example, I choose an existing form to show the whole process.

![1. Open desired form 4 scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/1.-Open-desired-form-4-scaled.webp)

Once you open the **Editor** page, go to the **Input Fields**in the right sidebar, open the **Payment Fields** dropdown section, and add the **Payment Item**field.

> If you don’t have **the Payment Fields Module** enabled in your Fluent Forms, read this **Documentation** to learn how to enable it.

![2. Add Payment Item field scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/2.-Add-Payment-Item-field-scaled.webp)

You can see that a **Payment Item** field is added to the form. You can edit this field by**hovering over it** and clicking the **Pencil Icon**.

It will take you to the **Input Customization** tab on the right side and offer you the following options for customizing the coupon field. 

1. Payment Item
2. Advanced Options

![3. Input Customization tab 1 scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/3.-Input-Customization-tab-1-scaled.webp)

### 1. Payment Item

Here, you will get various settings options for customizing the field. 

![4. Payment Item customization option scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/4.-Payment-Item-customization-option-scaled.webp)

**The Settings under the Payment Item mentioned above are briefly explained below – **

#### **A. Element Label**

This is the field title the users will see when filling out the **Payment Item**field in a form. You can enter any text here to help users understand the purpose of the field.

#### **B. Label Placement**

Using this option, you can determine the position of the label title where the user will see this. The available options are **Top**, **Right**, **Bottom**, **Left**, **Hide** **Label**, and **Default.** All of those are self-explanatory except the Default. If you select the **Default** option, it will represent your global label placement settings.

#### **C. Admin Field Label**

The admin field label is a field title displayed only to admin users. That means, if you want to show a different field label for your admin users when they view the form submissions, you can configure that using this option. 

#### **D. Product Display Type**

Here, you will get **Four different options**to add item/s (Product/s) and collect payments through the added item/s. These are:

1. Single
2. Radio
3. Checkbox 
4. Select

##### Single

Select this option if you want to offer one Item/Product to your user for collecting payments.

- **Payment Amount**: Here, you can set the **Amount (Price)** for your added **Item**.
- **Amount Label**: Here, you can set the **Label** for your **Payment Amount**.

![5. Single tab 48582](https://fluentforms.com/wp-content/uploads/2025/02/5.-Single-tab.webp)

##### Radio 

Select this option if you want to offer multiple items to your users for choosing one or more item/s when making a payment. This option allows you to display the item selection as **Radio** buttons.

- **Payment Items**: You can add as many items as you want with fixed prices. Click the **Plus** icon to add items and the **Minus** icon in the right corner to delete them. Enable the **Photo** checkbox in the top-right corner to **add** **product images**. To **set**the**default product/s**, check the **radio** button next to it. To clear all default selections, click **Clear Selection** at the bottom-left corner. You can also rearrange product rows using the drag-and-drop feature. 

![6. Radio tab 48582](https://fluentforms.com/wp-content/uploads/2025/02/6.-Radio-tab.webp)

##### Checkbox 

This option exactly works like the Radio Option except it allows you to display the item selection as **Checkboxes**. This option also offer multiple items to your users for choosing one or more item/s when making a payment.

![7. Checkbox tab 48582](https://fluentforms.com/wp-content/uploads/2025/02/7.-Checkbox-tab.webp)

##### Select

Select this option if you want your users to choose only one item among multiple items when making a payment. This option allows you to display the item selection as a **Dropdown List** from where you can select any one Item. 

- **Payment Items**: You can add as many items as you want with fixed prices. Click the **Plus** icon to add items and the **Minus** icon in the right corner to delete them. Enable the **Photo** checkbox in the top-right corner to **add** **product images**. To **set**the**default product/s**, check the **radio** button next to it. To clear all default selections, click **Clear Selection** at the bottom-left corner. You can also rearrange product rows using the drag-and-drop feature. 

- **Placeholder**: Here, you can set a desired text to guide your users about the purpose of the **Payment Item**field. It is the equivalent of the HTML input placeholder attribute. The user will see this text when the input field is empty. 

![8. Select any one item tab 48582](https://fluentforms.com/wp-content/uploads/2025/02/8.-Select-any-one-item-tab.webp)

#### E. Required

Select the **Yes** radio button to make this field mandatory for users to fill in for successful form submission. Otherwise, check the **No** radio button to keep this field optional to fill in.

### 2. Advanced Options 

All the **Settings** under the **Advanced Options**tab mentioned in the screenshot are briefly explained below – 

**A. Container Class**: Use this option to add your custom CSS classes to the field’s wrapper.

**B. Help Message**: You can use this option to guide your user thoroughly. Add your text here, which will be shown as a help message to the user. To learn more, read this Documentation.

**C. Name Attribute**: The input field’s name attribute is the HTML equivalent of the same name. You don’t need to modify this.

**D. Layout**: Select the Layout for checkable items. 

**E. Dynamic Default Value**: If you would like to pre-populate the value of a field, enter it here.

**F. Conditional Logic**: This option allows the coupon field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this [Documentation](https://fluentforms.com/docs/set-up-forms-with-conditional-logic-in-fluent-forms/). 

![9. Advanced Options scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/9.-Advanced-Options-scaled.webp)

Once you complete all the customization, don’t forget to add the [Payment Method](https://fluentforms.com/docs/add-payment-method-field-in-payment-forms/) field to collect the payments. Plus to collect the recurring payments, you can add the [Subscription](https://fluentforms.com/wp-admin/post.php?post=48578&action=edit) field.

> **Remember**, the added payment method in your **Form** will not function unless you properly complete the payment configuration process.

![10. Payment Method field scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/10.-Payment-Method-field-scaled.webp)

## Embed the Form into Frontend

Once you complete the customization, click the **Save** **Form** button to save all changes you made. Also, to see the form preview, click the **Preview & Design**buttonin the middle.

To integrate and display the form on a specific Page/Post, **copy** the **Shortcode** from the top right side and **paste** it into your desired **Page/Post**.  

![11. Save Form scaled 48582](https://fluentforms.com/wp-content/uploads/2025/02/11.-Save-Form-scaled.webp)

## Preview of Payment Item field

Here, is the preview of the added **Payment Item** field under the Payment Form. 

![12. Form Preview 48582](https://fluentforms.com/wp-content/uploads/2025/02/12.-Form-Preview.webp)

This way you can easily add the **Payment Item** fields in Fluent Forms!
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [@support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.