Add to Calendar Links for Scheduled Events

Formsite forms that schedule events are a popular choice for many form owners. Appointments, shows, reservations, etc. all need to have a way to confirm the visitor’s choices. The most common way is to send a Notification email with their choices, but another option is to provide add to calendar links to add the event.

Our Google Calendar integration provides a useful and automated way to do that. It allows for creating new events or adding to existing ones, plus many other options. Sometimes, however, form owners want to offer links for other calendars like Apple, Outlook, and Office365.

Why Add to Calendar links are hard

Every service uses different format and methods for adding events, so there isn’t a single way to add calendar entries. Some services support adding through the URL, like Google, and others use the ICS file format. ICS is a calendar file saved in a universal calendar format used by several email and calendar programs.

While the ICS method is supported by the major calendar services, it’s not as easy as formatting a URL. There needs to be an actual file generated, then the visitor needs to know how to upload the ICS file to their calendar service.

Add Event Data

The other major hurdle is adding the event details, like date and time, location, title, and duration. Here’s how Formsite helps. Using the form’s pipe codes, form owners can set up either Notification emails or Success Pages to generate a link to the visitor’s chosen service.

Using a free online service like Calndr, form owners can point their request with the event information and receive the link. To begin, create the form or use an existing form, as long as it contains these elements:

• Calendar item: Be sure to use the format YYYY-MM-DD
• Start day and time: Use a Dropdown with event start times in HH:MM format. You can use 24 hour notation (14:30) or 12 hour (02:30 pm).
• Service: The Calndr service lets you choose the format for the event from Apple, Outlook, Outlook.com, Office365, Google, or Yahoo. The link needs to contain one of the services, so add a Radio Button item with the choices. I’ve added Hidden Field items for each service with a default value containing the service text. Then I applied rules to show each one based on the chosen service.

How to Create the Link

1. Use a text editor like Notepad to create the link to make it easier to see.
2. Copy/paste the Calndr link format and customize the bolded areas:

https://calndr.link/d/event/?service=SERVICE&start=START&end=END&title=TITLE&timezone=TIMEZONE

• The SERVICE is the list of pipe codes for the Hidden Field items. Since we have rules on each one to only show based on the visitor’s choices, the others will not appear. String them all together making sure to use the ‘?’ modifier to hide the blank ones:

[pipe:9?][pipe:10?][pipe:11?][pipe:12?][pipe:13?][pipe:14?]

• Add the START date and time items with a space between:

[pipe:4] [pipe:5]

• The END time is optional and if omitted will add an end time after 1 hour
• The TITLE is the name of the appointment and can include the visitors name or any other information
• The TIMEZONE is optional and defaults to the visitor’s time zone, so if the appointment is in a different zone then add it here

The complete link for my event is:

https://calndr.link/d/event/?service=[pipe:10?][pipe:11?][pipe:12?][pipe:13?][pipe:14?][pipe:15?]&start=[pipe:8][pipe:9]&title=Appointment&timezone=America/Chicago

Insert the Add to Calendar links

1. Go to Form Settings -> Success Pages and create a new Success Page
2. Give the Success Page a name, then customize the message
3. Click the link button to add the link, then copy/paste the Calndr link as the URL
4. Save the Success Page and submit some tests to make sure it’s working as expected