In Fluent Forms, the Payment Summary field allows users to view a summary of their total payments based on the selected items or products and you can use it in any form.
This article will guide you through adding the Payment Summary field in your Fluent Forms for your WordPress Site.
Add Payment Summary Field #
To learn how to add the Payment Summary field to the Fluent Forms, follow the steps with the screenshots below –
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.
If you don’t have an existing payment form, read this Documentation to create a new one. 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 Payment Summary field.
If you don’t have the Payment Fields Module enabled in your Fluent Forms, read this Documentation to learn how to enable it.
You can see that a Payment Summary 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.
- Payment Summary
- Advanced Options
1. Payment Summary #
Here, you will get the following setting option for customizing the field.
- Empty Payment Selected Text: Here, you can set a text you want to show when no payment item has been selected yet.
2. Advanced Options #
All the Settings under the Advanced Options tab mentioned in the screenshot are briefly explained below –
A. 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.
B. Container Class: Use this option to add your custom CSS classes to the field’s wrapper.
Once you complete all the customization, don’t forget to add the Payment Method field to collect the payments. Plus to collect the recurring payments, you can add the Subscription field.
Remember, the added payment method in your Form will not function unless you properly complete the payment configuration process.
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 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 Payment Summary field #
Here, is the preview of the added Payment Summary field under the Payment Form.
This way you can easily add the Payment Summary fields in Fluent Forms!
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our @support team. Thank you.
