Skip to content

Example: Use FormBuilder to create a Membership Signup Form with Online Payment

The example below describes how you can use FormBuilder to create a public Membership signup form with online payment. This allows you to create flexible membership booking forms that do not follow the strict layout of the core Contribution Pages.

Note

This example assumes the Stripe Payment Processor is installed on your CiviCRM system. See the Stripe Extension documentation. Other payment processors are available as FormBuilder Checkout Options.

Step 1: Create The Membership Type

  • Navigate to Administer > Membership > Membership Types.
  • Ensure you have a suitable membership Type. For more information see Membership Types.

Step 2: Create The Form

  • Navigate to Administer > Customize Data and Screens > FormBuilder.
  • On the Submission Forms tab, New Submission Form

Step 3: Form Settings

Use the configuration pane on the left side to configure the following settings for your form:

  • Title: Join As A New Member.
  • Permission: Change to Allow all users (including anonymous).
  • Page Route: give the form a public URL, such as civicrm/christmasfundraiser.
  • Frontend or Backend: Choose the Frontend option so the form can be accessed by members of the public.
  • Post-Submit (Optional): If you wish to redirect people to a specific page after the form has been submitted, add the full web link (e.g., https://example.com) to the Post-Submit text box. Alternatively, add a confirmation message to be displayed when. they submit the form. Make sure you save the message if you add a confirmation message.

Step 4: Add The Form Fields

  1. At the top of the Form, click the + symbol and choose Membership. This creates a new tab called Membership 1.
  2. On the Membership 1 tab. In the configuration pane on the left side, under Values, set the following values:
    • click the down symbol and choose Individual 1.
    • Then click the Add Value select list and choose Membership Type. This will let you set a default value for the Membership Type. Choose the correct Membership Type for the form.
    • Then click the Add Value select list and choose Status. Click on Status and choose Pending.
    • Then click the Add Value select list and choose Contribution Amount: Membership Amount. Choose the Membership Amount that is required for the form.
  3. At the top of the form, click the + symbol and choose Contribution. This creates a new tab called Contribution 1, which allows you to add contribution fields.
  4. Click on the Contribution 1 tab. In the configuration pane on the left side, under Values, set the following values:
    • For Contact under the Values subheading, remove ‘Select Current User’ and change to Individual 1.
    • Click the Add Value select list and choose Checkout Option. This will add Checkout Option as a Value. Choose the Stripe Embedded Checkout option.
  5. In the Add column, select Checkout Details and drag it onto the Contribution 1 section on the form Layout.
    • Click the settings wheel by both the Contribution Amount and Contribution Source and choose Remove field.
  6. Click back on the Individual 1 tab on the left panel. In the Add column, select Contact Email(s) and drag it onto the Individual 1 section on the form Layout. Configure the Email block as follows:
    • Toggle the word Multiple so it changes to Single,
    • select is Primary,
    • select a Location type.
  7. While still on the Individual 1 tab, scroll down to Duplicate Matching. Choose the appropriate Duplicate Matching rule, the default is ‘Email (reserved)’.
  8. In the right pane, click the settings wheel symbol on each field in the form Layout and tick the Required option.

Tip

You can also rename each Fieldset or Field, change background colors, and adjust other layout options by clicking the settings wheel symbols. On the Individual 1 tab, you can choose any other individual fields, such as address or phone number, and drag them onto the Individual 1 section on the form Layout.

Step 5: Save and Access the Form

  • Click the Save button at the top right of the form screen.
  • Once saved, a View Page link will appear next to the Save button. This is the link you will share with members of the public so they can register for the event. The form can now be tested and adjusted as needed.