How to Integrate Your Form With Calendly

Calendly is a popular and innovative scheduling tool that simplifies arranging meetings and appointments. It eliminates the need for endless back-and-forth emails or phone calls by providing a centralized platform for you to share your availability and allow people to book time slots that work best for them.

With Jotform, you can use Calendly in three different ways: using the Appointment field, adding the Calendly widget, or through the Integrations tab.

Integrating Calendly with Your Form Through the Appointment Field

You can now integrate Calendly directly through the Appointment field on your form, so users can book time with you after submitting it. Here’s how to do it:

1. In Form Builder, click on the Add Element menu on the left side of the page.

2. Now, in the Form Elements menu, under the Basic tab, click on Appointment to add it to your form.

3. Then, click on the Gear Icon.

4. Now, in the Appointment Properties window that opens on the right side of the page, under the Availability Tab, click on Calendly.

5. In the window that opens, click on Authenticate, and then connect your Calendly Account.

6. Then click on Add Action.

7. Next, set up the following things:
   • Select Event — Choose a calendar event in the dropdown menu.
   • Prefill — Match your Calendly fields to your form fields to automatically prefill information into Calendly.
8. Finally, click on Save.

You’re all set! You’ve now successfully integrated Calendly through your Appointment field.

Once users click the Select Date and Time field, Calendly’s event calendar will open, allowing them to choose their preferred date and time slot.

Integrating Calendly by Adding the Calendly Widget to Your Form

If you want people to book events directly through your Calendly page, the Calendly Widget makes it easy to embed your scheduling link on your form. Here’s how to do it:

1. In Form Builder, click on the Add Element menu on the left side of the page.

2. Now, in the Form Elements menu, under the Widgets tab, search for Calendly and click on it to add it to your form.

3. In the Calendly Properties window that opens on the right side of the page, under the General tab, set up the following options:
   • Calendly Event URL — Paste in your Calendly Event URL. Check out this guide about How to Get Your Scheduling Link to learn more about it.
   • Name — Select a form field to prefill the name field in Calendly.
   • Email — Select a form field to prefill the email field in Calendly.

4. Now, scroll down, and you’ll find these options to personalize how the Calendly widget looks and behaves:
   • Background Color — Set the background color of your Calendly widget to match your form’s theme.
   • Primary Color — Customize the main highlight color used for buttons and links.
   • Text Color — Choose a text color that fits your brand or improves readability.
   • Hide Event Type — Toggle this On to hide the Event Type title in the embedded calendar.
   • Hide Landing Page — Hide any landing pages set up in your Calendly account.
   • Hide GDPR Banner — Remove the Cookie Settings banner from the widget.
   • Field Height — Adjust the widget height so the full calendar fits nicely in your form without scrolling.
5. Then, click on Update and you’re all set.

Here’s what it looks like with the Calendly event embedded in the Calendly Widget:

Adding and Integrating the Calendly Widget via the Integrations Tab

You can also add the Calendly widget by going to the Integrations tab in your form settings and selecting Calendly. Here’s how to do it:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.
2. In the menu on the left, click on Integrations.
3. Then, search for Calendly and click on it.

4. Now, click on Add to Form.

5. In the Calendly Properties window that opens on the right side of the page, under the General tab, set up the following options:
   • Calendly Event URL — Paste in your Calendly Event URL. Check out this guide about How to Get Your Scheduling Link to learn more about it.
   • Name — Select a form field to prefill the name field in Calendly.
   • Email — Select a form field to prefill the email field in Calendly.

6. Now, scroll down, and you’ll find these options to personalize how the Calendly widget looks and behaves:
   • Background Color — Set the background color of your Calendly widget to match your form’s theme.
   • Primary Color — Customize the main highlight color used for buttons and links.
   • Text Color — Choose a text color that fits your brand or improves readability.
   • Hide Event Type — Toggle this On to hide the Event Type title in the embedded calendar.
   • Hide Landing Page — Hide any landing pages set up in your Calendly account.
   • Hide GDPR Banner — Remove the Cookie Settings banner from the widget.
   • Field Height — Adjust the widget height so the full calendar fits nicely in your form without scrolling.
7. Then, click on Update and you’re all set.

Here’s what it looks like with the Calendly event embedded in the Calendly Widget: