Add a payment form to a page {VIDEO}

Use the Forms + Payments module to easily build mobile-friendly forms and gather data with payments directly on your website.

IN THIS ARTICLE:

How to add a payment form to a page

1

Drag and drop the Forms + Payments module onto the page

Navigate to the page on which you'd like to create a payment form. Once there, click Add Content, locate the Forms + Payments module in the Core Modules section of the content tray, and drag and drop it onto the page.

2

Enable payment fields

Once the Forms + Payments module has been added to the page, hover your cursor over the empty form to reveal two tabs: Basic and Prebuilt. If you’ve subscribed to eCatholic Payments, you can activate a third tab that will allow you to add Payment fields to the form.

To do this, click the form’s Settings icon, which is located in the top right corner of the form. Once the Online Form Settings dialog appears, click the Payments ($) tab. Then set Enable Payment Fields to On (pictured above).

3

Configure the Payment Settings

After payment fields have been enabled, you can adjust the settings listed below as needed.

Online Payment Form Settings

  • Account - Use the dropdown menu to select the account to which funds should be allocated.
  • Subaccount - Enter an existing Subaccount to define where the payments will be coming from. (e.g., The name of the subaccount is often identical to the name of the page or payment form. By default, the Page Title is listed as the Subaccount.) Avoid changing the Subaccount name once you begin accepting payments via the form on your website.
NOTE: See Accounts and Subaccounts for instructions on how to configure these important elements in your eCatholic Payments Center.
  • Require Payment - You can require immediate payment or allow visitors to choose to make their payment at a later date.
  • Payment Type - Select whether you plan to accept Credit Card payments, eChecks, or Both.
  • Enable Member ID - Select whether you'd like the form to include a field that would require visitors to enter a Member ID or envelope number. Once activated, you can:
    • Edit the name of the field. (e.g., "Envelope Number")
    • Choose whether the field should be required.
    • Add a short message to help visitors complete the field correctly.
    NOTE: If you already assign a Member ID or envelope number to individuals/families, using the Member ID field in your payment forms can allow for easy importing into your member database software.
  • Enable Comments - Select whether you'd like to add a text field in which visitors can enter comments. Once activated, you can edit the name of the field, choose whether the field should be required, and add a short message to help visitors complete the field correctly.
  • Submit Button Text - Edit the text that appears on the form's "Submit" button. (e.g., "Pay Now")

Once finished, click Save.

DON'T FORGET: This is where you can also edit general form settings as well, such as defining submission limits, adding an alert email address, and more.

4

Drag and drop fields into the form

Hover your cursor over the form to reveal three tabs: Basic, Prebuilt, and $. All three tabs contain fields that you can drag and drop into the "Drag Fields Here" area of the form. Continue adding fields as needed.

NOTE: Click the Copy icon to duplicate a single field or group. Rearrange fields or groups of fields by clicking and dragging the orange handle, which is located along the right edge of each form field.
5

Customize your fields

Hover your cursor over a field and click on the Settings icon to customize individual form fields. Use this method to edit field titles, set fields to "Required," enter field instructions, and much more. 

6

Publish the form

Once you've finished adding fields and editing the form's settings, click the Publish button at the bottom of the page. Your visitors will then be able to complete the form and submit their payment directly on your website.

Managing data from your Payment forms

The Form Results Manager allows you to easily manage data submitted via your online payment forms. In the Form Results Manager, you can:

  • View total paid and unpaid amounts
  • Update billed amounts
  • Record cash or check payments and much more.

See How to manage payments in the Form Results Manager for full details.

Next step

Now you know how to create an online payment form! Next, learn about the different types of Payment Fields you can use with every payment form. 

>> Go to Overview of Payment Form Fields

Still need help? Contact Us Contact Us