Jotform’s Add to Calendar widget lets you add calendar-ready event options directly to your form, making it easy for respondents to save important dates after registering or booking. You can configure events with details such as the title, date, time, location, and description, then let users add them to Google Calendar, Outlook, or download an ICS file.
Whether you’re creating a new form or updating an existing one, you can add and set up the Add Calendar widget in a few easy steps. Here’s how to do it:
- In Form Builder, click on Add Element on the left side of the page.
- Now, in the Form Elements menu, under the Widgets tab, search for Add to Calendar and click on it. Or, just drag and drop it to where you want it to be on your form.
- Next, in the Widget Settings window that opens on the right side of the page, under the General tab, in the Events section, hover over the sample event to reveal the following actions:
- Gear icon — Click on it to edit the event details and settings.
- Trash Can icon — Click on it to delete the event.
- To add a new event, click on Add New Event.
- Then, fill in these details:
- Title — Enter the title of the event.
- Start — Enter the event start date and time.
- End — Enter the event end date and time.
- Location — Enter the location where the event takes place.
- Description — Enter additional details about the event.
- Now, click on Save.
- Next, scroll down and continue to set up these things:
- Calendar Buttons — Select the calendar options you want to display as buttons for each event:
- Google Calendar — Display a Google Calendar button for each event.
- ICS Download — Display an option to download the event as an ICS file.
- Outlook — Display an Outlook button for each event.
- Event Time Zone — Select the time zone used when entering event start and end times.
- Display Style — Select how events and their buttons are displayed on the form.
- Show Event Description — Keep this on to display the event description below each event title, or toggle it off to hide it.
- Calendar Buttons — Select the calendar options you want to display as buttons for each event:
- Then, scroll down once more and continue with these fields:
- Show Location — Keep this on to display the event location on the form, or toggle it off to hide it.
- Button Label Text — Enter the text you want to display on the add-to-calendar buttons.
- Once everything’s set, click on Update.
That’s it. You’ve successfully added and set up the Add to Calendar widget on your form.
You can explore how it looks with this demo form.
Note
- For advanced styling of the Add to Calendar widget, you can add your own custom CSS code under the Custom CSS tab in the Widget Settings. Our guide on How to Inject CSS Codes to Widgets walks you through everything.
- You can also configure the widget properties, like alignment, labels, size, visibility, and more, to control how it looks and behaves in your form. Check out our guide on How to Access and Configure the Question Properties of a Widget to learn more







Send Comment: