Do you want to include an Add to Calendar option to your WordPress forms?
Giving site visitors an easy way to add event dates to their calendar after registering on your site is an added personal touch that people will appreciate. If you prefer, you can always add this option to your form’s confirmations or email notifications too.
In this article, we’ll show you how to include an Add to Calendar option to your WordPress forms, so site visitors can start planning for your upcoming events from the moment they submit a form on your website.
Step 1: Create a WordPress Form
In our example, we’ll create a simple birthday party RSVP form that people can fill out and submit. For help with this step, be sure to check out this tutorial on how to create an RSVP form in WordPress using the Form Templates Pack Addon.
Here’s what our RSVP form looks like in the Form Editor:
To add a small message to your form letting people know when the party is, just drag the HTML form field from the left hand side to the right hand side. Then click on the field to make changes.
Here’s what we added to our form:
On the front end of our site, this is what the RSVP form will look like:
Now it’s time to include the Add to Calendar option to your form.
Step 2: Create an Event in Google Calendar
The first thing we’ll do before including the calendar option to our form is create an event in Google Calendar.
To do this, log into your Google account and go to your Google Calendar. Then, fill in the event details.
Click Save so that your event is saved to your calendar.
Then, from the dropdown menu labeled More actions, select Publish event.
When you do, a popup modal will appear with links to your event. You’ll want to copy the HTML code for use on your WordPress form.
In order for your site visitors to see your published event, you’ll need to make sure your Google Calendar is set to “Public.”
To change your Google Calendar to “Public” for all to see, first choose Settings from the dropdown in your calendar.
Then, click on the calendar you want to make Public, scroll down to Access permissions and click on the Make available to public checkbox.
Making your Google Calendar Public will make all of your calendar events visible to the world, even via Google search. If you have private matters on your calendar, it’s suggested you create a separate Google Calendar for events you want site visitors to add to their own calendars.
Now your event is ready to be added to your WordPress form.
Step 3: Include an Add to Calendar Option to Your WordPress Form
There are several places you can include your Add to Calendar option on your forms:
- On the form itself
- In form confirmations
- In email notifications
Let’s first take a look at how to include the Add to Calendar option to your actual form first.
If you haven’t already, add an HTML form field to your event form by dragging it from the left hand side to the right hand side panel.
We added this form field from the beginning because we wanted to make sure people knew a little bit about our event.
Once the HTML form field is added, click on it to make changes. Paste the code from your Google Calendar into the Code section:
Click Save. This is what the Add to Calendar option looks like on our form on the front end:
When a site visitor clicks on the CTA button labeled Google Calendar, Google will open and prompt them to sign in to their account. Then the event will appear with all the details you added so they can save it to their own calendar if they choose to do so.
Now, if you’d rather not have an Add to Calendar option on your actual WordPress form, you can always add the link to your event on your form’s confirmations or notifications.
Step 4: Include an Add to Calendar Option to Your Form’s Confirmation Message
Form confirmations are messages that display to site visitors once they submit a form on your website. They let people know that their form has gone through and offer you the chance to let them know what the next steps are.
WPForms has three confirmation types to choose from:
- Message. This is the default confirmation type in WPForms. When a site visitor submits your RSVP form, a simple message confirmation will appear letting them know their form went through.
- Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their RSVP. For help doing this, check out our tutorial on redirecting customers to a thank you page.
- Go to URL (Redirect). This option is used when you want to send site visitors to a different website.
For our event form, we’ll create a confirmation message, complete with the Add to Calendar option so site visitors can immediately add our upcoming event to their Google Calendar.
To start, click on the Confirmation tab in the Form Editor under Settings.
Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.
Because we’re adding the option to add your event to a calendar in the form confirmation, we have two options:
- Create one simple message, adding the Add to Calendar option in the message, whether people will attend or not
- Create multiple form confirmations and enable smart conditional logic so that only those that will attend, or might attend will see the confirmation message with the Add to Calendar option
For simplicity, we’ll create one confirmation message that displays to all site visitors whether they plan to attend the event or not. Just make sure to click the Text tab when you add the HTML code from your Google Calendar to your confirmation message.
This is what the form confirmation looks like when someone submits an RSVP form:
Again, all your site visitor needs to do is click the Google Calendar button and add your event to their own calendar.
If you want to create multiple form confirmations and use conditional logic to display different messages to people depending on their RSVP answers, check out this tutorial on creating conditional form confirmations.
Step 5: Include an Add to Calendar Option to Your Form’s Email Notifications
The last place you can include an Add to Calendar option on your WordPress forms is in the email notification people receive when they submit a form on your website.
But before we jump into how to do this, you’ll need to make sure you have an Email form field on your RSVP form, which in our example we did not. This is the only way WPForms will know to email a notification to your site visitors.
After you’ve added an email form field to your event form, go to Settings » Notifications in the Form Editor.
By default, you’ll always receive an email notification when someone submits a form on your site.
To make sure site visitors receive a notification too, however, you’ll need to use smart tags to add your site visitor’s email to the email notification.
To do this, click Show Smart Tags.
Next, select the Email option from the dropdown menu so WPForms knows to send an email notification to the email your site visitor entered on your RSVP form.
Now it’s time to customize the message with the Add to Calendar option.
Scroll down to Message and add the message you want people to see in their email. Here you can paste the HTML code from your Google Calendar that for the Add to Calendar option.
Now whenever someone fills out your event form, they’ll receive a notification complete with the same Google Calendar button we’ve seen in all the other steps.
And there you have it! You now know how to include an Add to Calendar option to your WordPress forms so site visitors can easily add your upcoming event to their own Google Calendar.
If you’re worried about all site visitors seeing and filling out your event form, know that WPForms lets you enable specific form permissions so that only those with a password can fill out and submit your event form. For help with this step, check out this easy to follow tutorial on how to password protect your WordPress forms.
So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.