home

MinistryPlatform

RealmRealm AccountingMinistryPlatformeGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite
RealmRealm AccountingMinistryPlatformeGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite

What would you like to know more about?

Show Contents

Show Page Sections

thumbnailMinistryPlatform

Custom Form Widget

Configuring Custom Form

Quick Start

The Custom Form Widget provides a powerful way to collect information from people, and allow them to register for events or volunteer for opportunities. And, this widget supports conditional logic. See the Quick Start Guide to start using forms!

If the shared script hasn't been added to your website, add it to the appropriate webpage, replacing "example-church.com" with the base URL of your church's website.

<script id="MPWidgets" src="https://example-church.com/widgets/dist/MPWidgets.js"></script>

There are two ways to display a custom form, and the one you pick depends on your needs. You can allow access to multiple standalone forms, which is great if you need to send an email with a link to the form. Or you can get your web team involved and add each form to your website.

Standalone Forms

With standalone forms, you don't have to add each form as a page on your website. But you still need to set up a "Widget Page" so it has a place on your website to display your forms. To do that, create or identify the page on your website, then add the Custom Form Widget to it by placing this code snippet in the body of that "Widget Page":
<mpp-custom-form></mpp-custom-form>
Note: If you want to apply custom CSS to standalone forms, use the Widget Configurator and use that generated code snippet instead.

Once the page is in place, you can send your users the URL of the form you want them to fill out. To create the link, grab the Form GUID from the Form record and tack it onto the end of your URL, formatted as https://{your church webpage}/{widget page}/?id=[Form_GUID].

You can then place that link in an email with instructions. When the user clicks the link, the form displays on the "Widget Page" of your website, and they can complete the form.
Note: If a user tries to change the Form GUID in the URL, they will not be directed to another form.

Website Forms

You can display each form on your website for users to fill out. Create or identify the page on your website where you want to display the form. Use the Widget Configurator to insert the Form GUID for the form you want to display. Then add the the Custom Form Widget to the chosen page using the generated code snippet.

Your users can then locate the form on your website (either by browsing or via a link), and complete the form.

Widget Configuration

This widget does not require any attributes. It's ready to go!

Configure Your Widget

Fill out the Widget Configurator below, copy your generated widget code, and paste it into your website.

Tip: While not mandatory, this snippet would typically be placed inside a <div> element with the class "container".

Platform Configuration

Any Form can be configured as a Custom Form Widget. But the Form must meet the following criteria to display and accept new Form Responses:

  • End Date: Today's date is less than the End Date, or the End Date is undefined.
  • Fields: Any Fields selected for Depends On values must be part of the same Form. See Conditional Logic for more information.

Want to see your form before it goes live on your website? Replace your church's webpage where the forms widget is located and the Form GUID in the link below to check it out!

https://{your forms widget webpage}/?id={Form_GUID}

Customization

Make sure your forms match your Church's branding by customizing their look and feel.

CSS: Every Widget accepts the Custom CSS attribute. Include it before the opening Widget tag is closed and customize backgrounds, button colors, and more.

Application Labels: Widgets use Application Labels to store and populate values for fields, buttons, headers, and instructions. To make changes, go to System Setup > Application Labels and update the appropriate label(s). Note that you are responsible for all translations if the default is not used.

  • mpp-custom-form.completeMessage: The default is "Thank you! Your form has been submitted."
MinistryPlatform
portal

Last updated: May 17, 2024