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

Click Add Content and drag 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 and edit Payment Form Settings

Click the Settings icon in the top right corner of the form to open the Online Form Settings dialog. If eCatholic Payments is enabled on your website, you will see three tabs: Basic, Advanced, and $. Click on the $ dollar sign icon and toggle Enable Payment Fields to On. Once you do so, 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.

3

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.

4

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. 

NOTE: Click the Copy icon to duplicate a single field or group.
5

Edit the form's title (optional)

Click the title icon to show or hide a title for the form. Once the title is shown, click the title to edit it directly on the page.

6

Edit the form's non-payment settings

Click the Settings icon once again to open the Online Form Settings dialog. In addition to the $ tab, edit the following Basic and Advanced form settings: 

Online Form Basic Settings:

  • Alert Email Address - Enter email addresses you would like to receive notifications of form submissions (separate multiple email addresses with a comma)
  • Payment Complete Message - Edit the default message visitors see after completing their payment

Online Form Advanced Settings

  • Enable Submission Limit - Toggle On to cap the number of form submission at a specific amount
NOTE: Rearrange fields or groups of fields by clicking and dragging the orange handle, which is located along the right edge of each form field.

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