WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

include an add to calendar option to your wordpress forms

How to Include an Add to Calendar Option to Your WordPress Forms

by Lindsay Liedke on Nov 29, 2018

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

The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

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:

birthday party rsvp form

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:

customize rsvp form

On the front end of our site, this is what the RSVP form will look like:

final birthday rsvp form

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.

event creation in google calendar

Click Save so that your event is saved to your calendar.

Then, from the dropdown menu labeled More actions, select Publish event.

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.

html code

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.

google calendar settings

Then, click on the calendar you want to make Public, scroll down to Access permissions and click on the Make available to public checkbox.

make calendar public

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:

  1. On the form itself
  2. In form confirmations
  3. 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:

add html code to event form

Click Save. This is what the Add to Calendar option looks like on our form on the front end:

final add to calendar option

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:

  1. 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.
  2. 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.
  3. 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.

Confirmation Message

Because we’re adding the option to add your event to a calendar in the form confirmation, we have two options:

  1. Create one simple message, adding the Add to Calendar option in the message, whether people will attend or not
  2. 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.

form confirmation message

This is what the form confirmation looks like when someone submits an RSVP form:

form confirmation example

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.

WPForms Notifications Settings

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.

Form Notification 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.

notification smart tags

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.

notification message

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.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.