Introducing the New CivicPlus Status Page!  

Check real-time updates on maintenance, incidents, and system performance all in one place. You can now subscribe to get automatic notifications for all products or only the ones you use. Visit the Status Page.

Embedded Forms with Calendar Bookings

  • Published on Apr 2, 2026
  • 2 minute(s) read
Prev Next

This article covers how to embed a form with a Calendar Booking workflow event into your website.

Important Note

The scripts necessary for this function will only be generated if a Calendar Booking workflow event has been configured on the form.

Instructions

  1. Sign in to your site

  2. Use the website embed script to embed your form onto the desired page on your website if you have not already Code snippet for embedding a form with the copy icon highlighted.

    • When you add the code to your website, add the URL of the page you are embedding the code in between the quote marks (' ') of both the submissionRedirectUrl and the cancelRedirectUrl lines The Submission Redirect and Cancel Redirect URL lines within the Form Embed Script section.

      Note:

      You will need to remove the // before the submissionRedirectUrl and the cancelRedirectUrl lines in order for it to work in your embed.

  3. Navigate back to the Summary tab of the form, then click the embed button under the Form Link Embed this form on your webpage icon highlighted next to the form link.

  4. Scroll past the Form Embed Script to find the 3 Booking Scripts needed to set up the calendar booking process Code snippets for embedding Calendar Booking and Reschedule forms in HTML.

    • Calendar Booking Embed Script: The URL to redirect the user to for displaying a calendar booking page

    • Reschedule Booking Embed Script: The URL to redirect the user to display a calendar booking reschedule page

    • Cancel Booking Embed Script (not pictured): The URL to redirect the user to display a calendar booking cancel page

    Note:

    These scripts will only display if a Calendar Booking workflow event has been configured on the form.

  5. Scroll to the Calendar Booking Embed Script section and click Copy to clipboard (clipboard icon) Code snippet for embedding a calendar booking form.

  6. Paste the Calendar Booking Embed script onto a page on your website other than the one with the Form Embed script, then copy the URL of the page you are embedding the code in and store it somewhere temporarily Code snippet for integrating the Calendar Booking Form into a webpage.

  7. Navigate back to the Generate Form CDN Script window within Process Automation and Digital Services. Scroll to the Reschedule Booking Embed Script section and click Copy to clipboard (clipboard icon).Code snippet for embedding Calendar Booking Reschedule Form into a webpage.

  8. Paste the Reschedule Booking Embed script onto a page on your website other than the ones with the Form Embed and Calendar Booking Embed scripts, then copy the URL of the page you are embedding the code in and store it somewhere temporarily HTML code snippet for rescheduling booking with embedded scripts and styles.

  9. Navigate back to the Generate Form CDN Script window within Process Automation and Digital Services. Scroll to the Cancel Booking Embed Script section and click Copy to clipboard (clipboard icon) Code snippets for embedding Calendar Booking and Cancel forms in HTML.

  10. Paste the Cancel Booking Embed script onto a page on your website other than the ones with the Form Embed and Calendar and Reschedule Booking Embed scripts, then copy the URL of the page you are embedding the code in and store it somewhere temporarily Code snippet for injecting Calendar Booking Cancel Form into a webpage.

  11. Navigate back to the webpage that you copied the Form Embed Script to in step 2 Code snippet for integrating a form into a volunteer opportunities webpage.

  12. Locate the calendarBookingFormUrl, calendarBookingRescheduleFormUrl, and calendarBookingCancelFormUrl lines. Paste the URLs you copied in step 6, step 9, and step 12 in between the quote marks (' ') on the corresponding lines
    Code snippet showing optional URLs for calendar booking and payment receipt redirection.

    Note:

    You will need to remove the // before the calendarbooking lines in order for it to work in your embed.

  13. Once configured, users will be able to complete forms and be redirected to your specified web pages to complete the calendar booking or reschedule or cancel bookings

Related articles

© 2026 CivicPlus | The Civic Impact Platform

YouTube icon. Facebook icon. LinkedIn icon. X icon.