Integrate a Form onto Your Website

Created on:
Updated on:

You can connect a form to your church website using a direct link or the embed code.

  • A direct link takes the person off the page onto the Church Center app.
  • The embed code brings a popup on the screen.

Mobile devices don't support popups, so the form will always open in a new browser window.

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

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

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

1. Script Tag

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

<script src=""></script>

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, is the perfect escape hatch:

var urlThatWasGeneratedProgramatically = "your-form-URL"

Very Advanced Usage

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

  • : 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?
3 out of 12 found this helpful