Add Subscription Field in Payment Forms

The Subscription field allows you to create forms with Subscription Items to accept Recurring Payments. This article will guide you through adding the Subscription field in your Fluent Forms for your WordPress Site.

NOTE

Subscription requires Fluent Forms Pro. See Upgrade to Fluent Forms Pro Add-on.

Add Subscription Field

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

For example, I choose an existing form to show the whole process.

Once you open the Editor page, go to the Input Fields in the right sidebar, open the Payment Fields module, and add the Subscription field.

NOTE

Enable Payment Fields on your form first. See How to Create a Payment Form With Fluent Form.

You can see that a Subscription 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 Subscription field.

1. Subscriptions

2. Advanced Options

1. Subscription

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

A. Element Label

This is the field title the users will see when filling out the Subscription 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 that the user will see. 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. Subscription Type

Choose how pricing is presented to users. Fluent Forms offers two subscription types:

• Single Recurring Plan — One plan with a fixed billing schedule.
• Multiple Pricing Plans — Several plans for users to choose from.

Single Recurring Plan

Use this option when you offer one recurring plan. Configure these settings:

• Plan Name: Enter the name shown to users.
• Price Billing: Set the subscription price.
• Billing Interval: Choose Daily, Weekly, Monthly, or Yearly.
• Enable User Input Amount: Let users enter a custom amount within your minimum and default limits. Add a Label for the amount field.
• Has Signup Fee?: Charge a one-time signup fee when the user subscribes.
• Has Trial Days?: Offer a free trial before billing starts.
• Total Billing Times: Set how many times to bill the customer. Leave blank or enter 0 for unlimited billing.

Multiple Pricing Plans

Use this option when you offer more than one plan. Configure these settings:

• Plan Display Type: Choose Radio Button or Dropdown for how users select a plan.
• Pricing Plans: Each plan uses the same options as a Single Recurring Plan.

Click Add New Plan to add a plan, or click the Trash icon to remove one. Enable the Default toggle on a plan to pre-select it.

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

Each option in the Advanced Options tab is 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.

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. Conditional Logic: This option allows the Subscription field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this Documentation.

Once you complete all the customization, don’t forget to add the Payment Method field to collect the payments. Recurring billing is supported by gateways such as Stripe and PayPal, so make sure one of them is configured.

NOTE

Payment fields work only after you configure your gateway. See Configure Payment Settings with Fluent Forms.

Embed the Form into Frontend

Once you complete the customization, click the Save Form button to save all the changes you made. Also, to see the form preview, click the Preview & Design button in 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.

Preview of Subscription field

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

This way you can easily add the Subscription fields in Fluent Forms!