2. Form Setup & Design

When you edit or create a new a form, you’ll see several tabs:

  • Editor – build the form layout by adding fields, groups, and other elements.
  • Settings – configure main form settings; some fields are required to save the form.
  • Email Confirmation – set up the email sent to users after they complete the form.
  • Security – manage form security, including spam protection and CAPTCHA. See this KB for details.
  • Advanced Options – configure additional advanced settings, such as integrations and custom CSS (not covered in this KB).

Creating or Editing a Form

Important configuration must be done under the Settings tab before the form can be saved. The following fields are required:

  • Form Name – enter a name to identify the form in CMS.
  • Department – determines which department will be assigned to the transaction when imported. If you have multiple gateways, this also determines which gateway will be used.
  • Default Subcategory – determines how donations are categorized.
  • Recipients – email addresses to notify when submissions are made; use commas to separate multiple addresses.
  • Response Message (HTML Code After Submit) – the message shown to the user after a successful submission.

Other optional settings in this tab include:

  • Solicitor – transactions imported from this form will automatically be assigned to this solicitor.
  • Family Category – when importing submissions, the family will be assigned to the selected category.
  • Test Mode – allows testing the form without real charges.
  • Active – enables or disables the form.
  • Invoice Payment – a special kind of form; when checked, most options on the form are not configurable. See the KB on Invoice Payment Forms for details.

Email Confirmation

After completing the required Settings, configure the email confirmation that users will receive. This is done under the Email Confirmation tab.

  • From Email – the email address the confirmation will be sent from.
  • From Name – the name that appears as the sender.
  • Subject – the subject line of the email.
  • Email Body – the content of the email message.

The email body can include fields from the form submission, for example: {{firstName}}, {{lastName}}, {{paymentAmount}}, and more. To insert a field, click the Fields drop-down and select it; it will be inserted at the cursor’s position in the email body.

Tip: You can use AI to help configure your email body. Ask for an HTML view if you want the email formatted with styles. When pasting HTML into the editor, switch to Code View to preserve formatting.

Editor Tab

The Editor tab is used to arrange the fields and sections that users will complete.

Use the Groups tab to build your form. Groups make it fast and simple to add sections, fields, and action buttons.

To build your form, drag and drop Groups onto the form canvas. Available groups include:

  • Contact Information – collects Name, Address, Email, and Phone.
  • Payment Information – collects the Amount, Purpose, and Schedule for the donation.
  • Guest Reservation – for forms collecting guest reservations.
  • Credit Card Information – collects the user’s credit card details.
  • Other Information – miscellaneous fields as needed.
  • Action Buttons – add Submit and Reset buttons.

Field Settings

When dragging a Group onto the form, an entire set of fields is added. Each field has predefined settings. Only modify these if needed:

  • Placeholder – text that appears in the field before the user enters a value.
  • Required – determines if the user must complete the field.
  • Setup – some fields, such as Purpose or Title, have a Setup button in the Settings. Click this button to configure options for the selected field.

Changing other settings may cause the field not to function as intended.

Design Tips

  • You can also drag a group to the side of another group; this is the same as dragging it to the bottom.
  • Avoid nesting a group inside another group or element; instead, place it on a blank area of the canvas.
  • To apply a style to the form, click on a blank area of the canvas and select the desired style.

You can use individual elements as well. Both Build-in Elements and Custom Elements. This is covered in this KB Article, Form Elements.