Web Forms

On This Page

• Where to Find It
• Create a Form
• Pages
• Transitions: The Buttons on Each Page
• Send People to a Different Page
• Components
• Built-In Components on Contact Forms
• Custom Errors
• Copy a Component from Another Form
• Form Properties, CSS, and Hooks
• Test, Retire, or Delete a Form
• Validation and Errors

Use this article to design a form for a record type, arrange its pages, choose the buttons on each page, add components, and understand what happens when you save or delete a form. To learn what a form is and how applications use it, see Web Forms Explained.

Where to Find It

Each application that uses forms has its own forms list. Open the list for the record type you need, then press Create <object name> (for example, Create Application Form) or select a form's Edit (pencil) icon to open the designer.

Application	Path
Sponsorship	Setup › Applications › Forms
Membership	Membership & Committees Setup menu: Applications › Forms; page layouts under Membership › Page Layouts and Chapters › Page Layouts
Submissions	Setup menu: Submissions › Forms; page layouts under Submissions › Page Layouts

Other applications that use forms, including CRM contact and organization forms, follow the same pattern in their own setup areas.

Prerequisites

• Your organization has the form designer switched on.
• You have the application's permission to manage its forms. The create button appears only when you can create forms. If Rhythm refuses a create or delete request, you see Access Denied: You must have <permission> permission for the request resource in order to continue. Please see your system administrator.
• The custom fields you want to collect already exist. You cannot create fields from the designer; see Custom Fields.

Create a Form

1. In the application's forms list, press Create <object name>.
2. In Create a Form, choose a starting point: Start from an empty form, a form under Built-in Forms when the application provides one, or an existing form under Custom Forms. Then press Create Form.
3. Type a name in Form Name:. Until you change it, a new form is named after the record type, such as New Application Form, and a copy is named Copy of <source name>.
4. Arrange pages, buttons, and components as described below.
5. Press Save in the designer header.

Result

The designer returns you to the forms list. The saved version is live immediately, so the next person who opens that form in any Console or portal gets this version. An application uses the form after you name it in that application's settings.

The record type is set when you create the form. To use the same design for another record type, create a new form for that record type.

Starting a new contact form from an existing one is a convenient way to create an admin-specific or audience-specific version. Choose the existing form under Custom Forms, make your changes, then go to the setting where that audience's form is assigned, such as Configure Defaults, and point it to your new form. For example, if the Console's built-in address requirement for creating a contact gets in the way, clone the current contact form, remove the address requirement on the copy, and set the copy as the default form for creating contacts in the Console.

Tip

A portal page component that displays a form, such as a Form component, needs the form's numeric Form ID, not its name. Get it from the application's forms list: click the # next to the form to copy its ID, then paste that value into the page component's Form ID field and save.

Pages

The Pages panel lists the form's pages in order. Use Create Page to add a page, or hover over a page and use Edit this page or Remove this page. Page order sets the first page and the default destination for Next.

Setting	Options	Default	Effect
Name:	Text	—	Page name shown in the step indicator
ID:	Text	Filled from the name	Page identifier. You cannot change it after the page is created
Status:	Active, Inactive	Active	Inactive pages are skipped
Heading Text	Text	Empty	Appears at the top of the page
Navigation Symbol	Icon name	Empty	Icon shown for the page in the step indicator
Step Type:	fixed, dynamic, completion	fixed	Only completion changes behavior. The form stops there and shows Continue; a dynamic page behaves like a fixed page

Give every page an explicit Step Type: instead of leaving it unset. Choose the step type deliberately for pages such as order-details or review-order steps. An unset step type is a common source of configuration problems, so correct it if you find one.

Except for completion pages, new pages start with Back, Next, and Cancel switched on. Use conditional transitions, not the step type, when only some people should see a page. A completion page shows only Continue, so put the Submit button on the page before it. A flow that never reaches an explicit completion page can end without a clear signal to the person filling it out, so give a multi-step process, such as an application or registration flow, a final completion page with a Success Message component.

In Form Properties › Navigation, Navigation Bar Location controls where the step indicator appears: top (default), bottom, left, or right. It does not move the page's action buttons (Next, Back, Save & Return Later, Submit). Those buttons stay in their normal position, and there is no setting to move or duplicate them at the top of the page.

Transitions: The Buttons on Each Page

Open the page's Transitions tab to choose which buttons appear on that page. Set each transition—Back, Next, Cancel, Save & Return Later, and Submit—to Enabled or Disabled. In Options, you can set Transition Button Text: and a Before Processing Hook.

• A page shows only the buttons you enable. If you do not enable Submit anywhere, the person cannot submit the form.
• Submit is labelled Save Changes unless you rename it.
• Save & Return Later appears only where the application hosting the form allows drafts.
• The designer does not warn you when a page has no enabled buttons.

Send People to a Different Page

1. On the page's Transitions tab, find Next and select Enable conditional page transition rules.
2. Press Add Rule.
3. In Add Conditional Transition Rule, enter a Rule Descriptive Name and choose the Target Page:.
4. Under Navigation Logic:, choose Use a ruleset to define the transition logic to pick conditions from lists under Form Data, or choose Use an expression to define the transition logic.
5. Press Save Changes, then Save in the designer header.

When someone presses Next, the first matching rule wins. If no rule matches, Next goes to the next active page. The target list includes inactive pages, and the designer does not warn you if a target page is later removed. If that happens, the person stays on the current page and sees no message. For example, a membership application can send students to a student-information page and everyone else to an employer page.

Components

Press Add Component on a page. The menu offers Field Group, Form Errors, Review Form Data, Success Message, Table, Text Block, Web Component, and From Another Form.... Every component's Edit <label> dialog includes Header & Text (Heading Text: and Html:), Hooks, and, for most components, Conditional Visibility. Pressing Save Changes in a dialog keeps the change in the designer, but nothing is stored until you press the designer's Save.

Component	What you set
Field Group	Choose fields with Search for Fields from Built In Fields, Custom Fields, and System Fields; set Field Group Layout: to two column or one column (default). Click a field for Edit Field: Field Display Label/Prompt:, Required:, Make optional in the console for custom fields, and Constrain Acceptable Values: only for fields with a list of allowed values; blank includes all values
Table	Rows of a custom object: Table Custom Field: (required), page layouts for adding and editing a row, Text (Add New Record), Text (No rows/records), Minimum # of Rows, Maximum # of Rows, and Table Fields. Offered only when custom objects are switched on
Text Block	A heading and formatted text with no fields
Success Message, Review Form Data	A completion message; a read-only review of the answers so far. Review Form Data shows only data from components that come before it, either on an earlier page or higher on the same page, so it appears blank if nothing earlier on the form has collected data yet
Form Errors	Where the error summary appears on the page
Web Component	Component Tag: of a custom element your organization has registered

Things to know:

• A field appears on a form only after you add it to a field group on that form. Console forms and portal forms are separate, so add the field to each one.
• Tables have no required setting per column, and they have no Conditional Visibility tab. The designer also does not check that the maximum rows is at least the minimum.
• Images you insert in Html: are uploaded immediately and kept even if you cancel the dialog.
• Conditional visibility applies to a whole component. To show questions one by one, put them in separate field groups. Turning off a component's condition, rather than narrowing it, is a quick way to make everything it controls always visible: edit the form in the Console, open that component's Conditional Visibility tab, and turn the condition off. Everything the component would otherwise have hidden becomes visible, and therefore editable, for everyone.
• Dragging a component onto a page opens its edit dialog automatically only for Field Group and Table components. Other components should not auto-open their edit dialog when you add them.
• Rhythm does not support field-level security on a form. You cannot limit a field so that only contacts with a specific role can see or fill it in.
• A form used by a process that creates an order, such as a membership application or event registration, needs both a Collect Order Details component and a Confirm Order Details component. Leaving either one out prevents the person from completing the process and produces an error. The two components also need to sit on separate pages; putting them on the same page keeps order details from loading correctly, including in flows with no payment step.
• A Table component embedded inside a custom-built record component, rather than the standard Console or portal renderer, saves added or edited rows only when the host component explicitly binds and handles the table's onAdd and onEdit events. Without that, the table can look like it updated because only the on-screen list changed, while nothing was saved.
• You can add an image upload to a form, such as for a profile photo, by creating a custom field of type Image and adding it to the form like any other custom field. The same approach works for other documents, such as a transcript: create the custom field in the application whose module owns the record, then add that field to both the Console form and the portal form used to edit the record. Once both forms include the field, editing the record shows it so a file can be uploaded and saved to the profile.

Example: guest sections. Put each guest's questions in its own field group when you want Guest 1, Guest 2, and Guest 3 questions to appear only for the number of guests chosen. On each group's Conditional Visibility tab, select This component is only visible in certain conditions, choose Rule Set, and add a condition on the number-of-guests field, such as is greater than or equal to 2 for Guest 2. Hidden groups' questions do not block the page.

Built-In Components on Contact Forms

Contact forms in CRM use Add Component for layout customization, just like other forms. You can add field groups and web components, but built-in components such as Contact Work Info and Contact Social Lookup are not customizable or replaceable. You can add fields and sections around them, but you cannot remove or modify the fields built into these components.

• Contact Work Info links organization and address information to the contact. Its fields for that linkage are built in and cannot be deleted or changed. A Work Info Options setting on this component, Require users to fill in a value for work address, controls whether editing the record requires a work address. Clear it to remove that requirement, or leave it selected to show a validation error when someone tries to save the record with the linked work address blank. For a portal member to edit the organization field at all, this component must be on the contact form; adding organization-related fields in a field group by itself is not enough.
• Contact Social Lookup does not offer a setting to make one of its own fields, such as email, required on its own. If you need to require an email address during contact or profile creation through this component, add a custom error rule that blocks submission when email is blank, or add the email field again in a separate field group and mark that field required there.
• During portal sign-up, a contact can create a new organization only when the form includes the Social Work component. A standalone Organization field on the form does not offer the same new-organization option.
• The contact's preferred address type is something a person can set only if that field has been added to the contact forms in use. Add it to a field group on the relevant Console and portal forms if it is missing.

Custom Errors

A page's Custom Errors tab lists rules for the whole form, so every page shows the same list. Press Add Custom Error Rule, then fill in Rule Descriptive Name, Error Message to Show to User:, and This error occurs when: (A rule is evaluated to be true or An expression is evaluated to be true).

• Write the condition as the error, not the requirement: "age is less than 12", not "age is over 12".
• When a custom error rule is triggered, it disables Submit only. It does not stop Next or Save & Return Later.
• Messages appear where the Form Errors component sits. Pages with an enabled Submit get an error summary automatically. On other pages, add Form Errors yourself, for example just below a membership selector, so people see the message where it matters.

Copy a Component from Another Form

1. Press Add Component › From Another Form....
2. In Copy Component from Another Form, choose Source Form:, Page:, and Component:.
3. Press Copy Selected Component.

Only forms and page layouts for the same record type are offered, including inactive ones. The copy is added at the end of the current page and is independent of the original. Rhythm does not check that the copied fields, conditions, or hooks suit the new form, so review it before saving.

Form Properties, CSS, and Hooks

• Form Properties › Hooks holds form-wide hooks; see Form Hooks and Expressions.
• CSS opens Form CSS. The styles are not limited to the form; they can restyle anything on the page where the form appears. There is no setting to hide the completion page's built-in Continue button. The only way to do it is a CSS workaround in Form CSS, such as .completeButton { display: none; } (note the leading period).

Test, Retire, or Delete a Form

• Test: Save the form first, then use Test this form in the forms list. Testing affects only your browser. Switch it off and on again after each change.
• Inactive: The list's Status column shows Active or Inactive and hides inactive forms until you choose (show all). An inactive form can still be used by an application that names it, so change the application's setting to stop using the form. The designer has no setting to change a form's status. Rhythm does not offer a way to deactivate a whole form yourself, so delete the form instead of looking for a deactivate option when you need to remove it from use.
• Delete: Use the list's Delete (trash) icon and confirm Yes, delete it!. Deletion is permanent; there is no version history or undo.
• Print: Rhythm has no built-in way to print a form or produce a printable copy of its fields and choices. Taking screenshots of the fields is the only way to get a visual copy.

Warning

Deleting a page layout that a submission type still names is allowed. The submission type is then left pointing at nothing, so change that setting first.

Validation and Errors

What you see	Why	What to do
Save is unavailable	The form has no name or no pages	Add a name and at least one page
Unable to save form with Web Forms must have unique page IDs. Two or more pages have the same ID.	Two pages share an identifier, often after copying a page	Give each page a unique ID
Unable to save form with Pages with a "Confirm Order Details" component MUST have a submit transition, so that the order may be processed.	An order-confirmation page has no enabled Submit	Enable Submit on that page
Unable to save form with Pages with a "Confirm Order Details" component are not allowed to have a next transition; only Submit transitions are allowed.	That page also offers Next	Disable Next; show a thank-you with a completion page instead
Unable to save form after a colleague saved	Your copy is out of date	Reopen the form and make the change again
Unable to delete <object name>	The form is still used, for example by a membership application process, a membership or chapter setting, or as a custom object's default page layout; the message does not name it	Point that setting at another form, then delete
This record is locked and cannot be edited or deleted	The form is locked	Copy it through Create <object name> and change the copy
A submission is refused for a missing name or other required value	A built-in field the record type requires may be missing from the form, so the person cannot fill it in	Add it to a field group from Built In Fields

When you save, Rhythm does not check whether conditional targets still exist, whether conditions refer to fields still on the form, or whether hook addresses work. Test the form after every change.