Integrate a Form onto Your Website

Created on:
Updated on:

There are two ways to connect a form to your church website: a direct link or the embed code. This article discusses the advantages of each approach and shows you how to do it.

For either of the following options, you'll need to replace <your-form-URL> with your form's public URL, which can be found on the settings tab of your form, under "Embed".

Embed Code (ChurchCenterModal)

You can keep people on your website by embedding your form directly into your website in a popup modal. It will look something like this:

Tip: On mobile devices, the form will always open in a new browser window.

Your website must be encrypted (https) for ChurchCenterModal to work. On http websites, the donation form will always open in a new browser tab.

Basic Steps for Embedding

Step 1: Include the ChurchCenterModal script tag on your webpage in the <head> of your document:

<script src="https://js.churchcenter.com/modal/v1"></script>

Step 2: Add a link to your website (the location, name, and style is up to you):

<a href="<your-form-URL>" data-open-in-church-center-modal="true">Fill out our form!</a>

Alternatively, if your website's content management system doesn't allow you to control the html of the link, you can also use a parameter in the URL itself:

<a href="<your-form-url>?open-in-church-center-modal=true">Fill out our form!</a>

Debugging tips:

  • If for some reason the embedded form doesn't launch, "View Source" of the web page to ensure that those two snippets of code are actually on the page.
  • If the link/button is present on your website but takes you to the full un-embedded form, check to see if the first snippet is present in your html and that the website you're looking at is a secure (https) website.
  • If your content management system doesn't allow you to edit the <head> of your document, you can put it somewhere else if needed. Just make sure it comes before the second link snippet.
Advanced Usage

Sometimes anchor tags with data attributes may not be usable due to other constraints. If a need arises to open the modal programmatically, ChurchCenterModal.open(url) is the perfect escape hatch:

var urlThatWasGeneratedProgramatically = "<your-form-URL>"

ChurchCenterModal.open(urlThatWasGeneratedProgramatically)

Very Advanced Usage

If you're a developer, you may want to interact with the ChurchCenterModal using javascript for more fine-grained control:

  • ChurchCenterModal.open(url) : Opens a link to Church Center in the modal.
  • ChurchCenterModal.close() : Closes the modal.
  • ChurchCenterModal.start() : Attach the global event handler to make data-open-in-church-center-modal="true" links open in a modal. Note: this happens automatically when the script is included.
  • ChurchCenterModal.stop() : Remove the global event handler that makes data-open-in-church-center-modal="true" links open in the modal.
Was this article helpful?
0 out of 0 found this helpful