How to Add Google Calendar Events From Your WordPress Contact Form

Adding Google Calendar events from a WordPress contact form

Do you want to send events from your WordPress contact form straight to Google Calendar?

Perhaps you use Google Calendar to take bookings, or maybe you have a contact form that lets clients book a call with you. You can automatically add those events to your Google Calendar.

In this article, we’ll show you how to easily add Google Calendar events from your WordPress contact form.rr

Why Add Google Calendar Events From a WordPress Form?

Normally, you can add a contact form to your WordPress website and get notifications via email or in your WordPress dashboard.

You can use a contact form for allowing customers to book appointments, request a callback, get a quote, and more. However, managing contact form leads manually is not very efficient, and you may lose customers because of that.

This is where Google Calendar can help. It works on any device, and you can get instant notifications / reminders for each calendar event.

Automatically sending your form entries to Google Calendar ensures that you don’t miss any bookings, appointments, orders, and calls.

That being said, let’s look at how to easily create a Google Calendar event from your WordPress form entries.

Connecting Your Contact Form and Google Calendar

For this tutorial, we’ll be using WPForms, which is the best form builder for WordPress. It comes with an intuitive drag and drop interface that lets you easily create any type of form.

We’ll then use Zapier to connect your contact form to Google Calendar. Zapier works as a bridge, connecting 2 different apps with no need for any code.

Let’s get started.

Creating Your Contact Form in WPForms

First, you need to install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: You need the Pro version or higher to use the Zapier addon for WPForms.

Upon activation, go to the WPForms » Settings page and enter your license key. You will find your license key in your account area on the WPForms website.

Entering your license key for WPForms

Now, it’s time to create your contact form. If you already have a contact form set up, simply edit it by going to the WPForms » All Forms page and clicking on its name.

Otherwise, visit the WPForms » Add New page in your WordPress admin to launch the WPForms builder and create a new form.

We’re going to use a simple contact form template with added date/time fields for the start and end time of the call. If you need help creating your form and adding fields, check out our step by step guide to creating a contact form.

Creating a call booking form in WPForms

Tip: Want to use a specialized event form template instead? Simply install the Form Templates addon under WPForms » Addons for access to the Event Planner Form and dozens of other templates.

Once you’ve set up your form, you need to add it to your WordPress site. Simply edit the page (or post) where you want to include it, or add a new one by going to Pages » Add New.

First, you need to click the + icon to add a new block. Then, search for the WPForms block and add it to your content area:

For more detailed instructions, check out our step by step guide on creating a contact form.

Once you’ve added your form to your website, go ahead and publish or preview the page.

Make sure that you submit a test entry using your form. This test entry is necessary to set up and check the connection between WPForms and Google Calendar.

Here’s our test entry, with name, email, date, start and end time, plus a message:

Creating a test entry for your contact form or booking form

Preparing to Connect WPForms and Zapier

We are going to use Zapier to link WPForms and Google Calendar. This means you need to install and activate the WPForms Zapier addon.

Simply go to the WPForms » Addons page in your WordPress admin. Search for the Zapier addon and then click the ‘Install Addon’ button to install and activate it.

Installing the Zapier addon for WPForms

Now, you need to visit the WPForms » Settings » Integrations page. From here, you simply need to click on the Zapier logo to get an API key.

You may want to copy your API key somewhere safe or keep your tab open. You’ll need this later to connect Zapier to your WPForms account.

Creating Your Zap to Send Data From Your Contact Form to Google Calendar

Now, it’s time to go to the Zapier website. If you don’t already have an account, then go ahead and create a free account here.

Once you are logged in to the Zapier dashboard, click on the ‘Make a Zap’ button. This is on the top left of the screen.

Click on the button to start making your Zap

Note: In Zapier, a ‘Zap’ is a process that has both a trigger and an action. In this case, our trigger will be someone filling in the contact form, and our action will be to create a new event in Google Calendar.

Now, you need to give your Zap a name at the top of the screen. After that, it’s time to set up the trigger.

First, type ‘WPForms’ into the search bar for the ‘Choose App & Event’ box. Then, simply click on the WPForms icon that appears:

Select WPForms as your trigger app in Zapier

Zapier will automatically fill in the trigger event of ‘New Form Entry’ so you just need to click the Continue button.

Choosing a trigger event in Zapier

Next, Zapier will prompt you to sign in to your WPForms account. Just click the ‘Sign in to WPForms’ button to do so:

Click the button to sign in to WPForms

You should now see a popup window, where you need to enter your API key. This is the API key that you found earlier on the WPForms » Settings » Integrations page in your WordPress admin.

You also need to add the URL (domain name) of your website.

Enter your API key from WPForms and the URL of your website

After doing that, simply click the ‘Yes, Continue’ button to move to the next step.

Zapier will now ask you to select your contact form from the dropdown list. If you have several different forms on your site, then make sure you select the right one:

Selecting the correct contact form in Zapier

Next, go ahead and click the test trigger button:

Testing your trigger in Zapier

Zapier would now find the test entry you created earlier and show the data on screen:

The data from the test contact form entry that Zapier has found

Click the ‘Continue’ button and you’ll move on to the Action part of the Zap. This is where you need to choose your second app, Google Calendar.

Selecting Google Calendar as your action app

Next, click on the ‘Choose Action Event’ dropdown and select the ‘Create Detailed Event’ option:

Select 'Create detailed event' as the action event for Google Calendar

Zapier will now prompt you to sign in to your Google Calendar account:

Sign in to your Google Calendar account when prompted by Zapier

You need to give Zapier permission to access your Google Calendar, or it will not be able to create events:

Give Zapier permission to access your Google Calendar

Once you’ve signed into Google Calendar, click the Continue button to carry on.

Next, you will see the Customize Detailed Event section. Here, you need to select the correct calendar from the first dropdown:

Choose which calendar you want to use with the Zap

Once you’ve done that, type in an event summary for the event. We’re going to use Client Call for ours. You could also choose a form field here, if you have an appropriate field on your form for this.

Type in an summary for your Google Calendar event, e.g. "Client Call"

For the event description, we’re going to use the message from the form. Just click on the description box, then click on the field from your form that you want to use. Your test data will be shown alongside the field name:

Select the form field that you want to use for the Google Calendar event's description

You can include other fields in here, such as the person’s name and/or email address.

You also need to make sure you add the Start Date & Time and the End Date & Time. Again, click on the box and select the appropriate field from your form:

Select the correct fields from your form for the start and end times of the event

You may also want to include the email address of the person who booked the call or event. This means they’ll be sent an invite, so they can easily add the event to their own calendar:

Enter the field for the attendee's email address, if you want to send them a Google Calendar invite

You can change other settings here, as well. Once you’re happy with your settings, click the Continue button.

Now, Zapier gives you the opportunity to test out your Zap. First, you will see the details of what’s going to be sent to Google Calendar:

The details of the test event that will be sent to Google Calendar

Below this, simply click the ‘Test & Continue’ button to test out your Zap:

Click the 'Test and Continue' button to send the test entry's details to Google Calendar

Next, go ahead and view your Google Calendar to check that the test event has been successfully added:

Viewing the details of the event that's been added to Google Calendar

Now, it’s time to switch on your Zap by clicking the blue button:

Turn on your Zap once you're ready

Tip: If your event has been added at the wrong time of day, check the timezone settings in your Zapier profile. If these are incorrect, set them to the correct timezone and test your Zap again.

That’s it. Your contact form entries will now be automatically sent to your Google Calendar.

We hope this article helped you learn how to add Google Calendar events from your WordPress contact form. You may also want to see our comparison of the best business phone services, and our step by step guide on how to get a free business email address.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Google Calendar Events From Your WordPress Contact Form appeared first on WPBeginner.

Submit A Form Without Page Refresh Using jQuery

Submit A Form Without Page Refresh Using jQuery

A great way to improve the user experience of your website is to validate and submit forms without a page refresh.

In this tutorial I’ll show you how easy it is to do just that—validate and submit a contact form that without page refresh using jQuery! Let’s get started.

What We’re Building

In this example, we have a simple contact form with name, email, and phone number. The form submits all the fields to a PHP script without any page refresh, using native jQuery functions.

1. Build the HTML Form

Let’s take a look at our HTML markup. We begin with our basic HTML form:

You might notice that I have included a div with id contact_form that wraps around the entire form.

Be sure to not miss that div in your own form as we will be needing this wrapper div later on. You might also notice that I have left both the action and the method parts of the form tag blank. We actually don’t need either of these here, because jQuery takes care of it all later on.

Another important thing is to be sure to include the id values for each input field. The id values are what your jQuery script will be looking for to process the form with.

We are also doing some very basic client-side validation using HTML5 attributes like required and minlength. The minlength attribute will make sure that users supply a name that is at least 3 characters long. Similarly, the required attribute makes sure that users fill out all the form values you need. You can read more about these attribute in our tutorial on validating form inputs using only HTML5 and Regex.

  • HTML5
    Form Input Validation Using Only HTML5 and Regex
    Monty Shokeen

I’ve added some CSS styles to produce the following form:

Contact Form

2. Begin Adding jQuery

The next step in the process is to add some jQuery code. I’m going to assume that you have downloaded jQuery, uploaded to your server, and are referencing it in your webpage.

Next, open up another new JavaScript file, reference it in your HTML as you would any normal JavaScript file, and add the following:

This function runs  soon as the HTML document is ready. If you have done any work in jQuery previously, this function is the same as jQuery’s document.ready function. Inside we will set up our validation code.

3. Write Some Form Validation

We will now write some basic from validation using jQuery. This will improve upon the validation we have so far. Using a validation library will gives us more control over the error messages that are shown to users. It also requires minimal or no change in the markup of the form.

Starting by loading the jQuery Validation library on your webpage. Now, just add the following code:

Make sure you pass the right selector when calling the validate() method. This will validate the form without requiring you to write any error messages in the HTML or the logic to display and hide different error messages in JavaScript. Try submitting the form without filling in any values or by knowingly adding wrong input. The form will display a nice error message like the following image.

Form Validation Error Message

Using the validation library will also allow you to add conditional validation logic to your forms. For example, you will be able to add code that requires a phone number only when the email address has not been provided. I have covered this in more detail in the jQuery form validation tutorial.

  • JavaScript
    Easy Form Validation With jQuery
    Monty Shokeen

4. Process Form Submission With the jQuery AJAX Function

Now we get to the heart of the tutorial—submitting our form without page refresh, which sends the form values to a PHP script in the background. Let’s take a look at all the code first, then I will break down into more detail next. Add the following code just below the validation snippet we added previously:

There is a lot going on here! Let’s break it all down—it’s so simple and so easy to use once you understand the process. We first create a string of values, which are all the form values that we want to pass along to the script that sends the email.

This can be achieved pretty easily using the built-in serialize() method in jQuery. This way you don’t have to worry about getting and concatenating the value of different valid user inputs yourself.

I’ve commented out an alert that I sometimes use to be sure I am grabbing the right values, which you may find helpful in the process. If you uncomment that alert and test your form, assuming everything has gone right so far, you should get a message similar to the following:

Datastirng Alert

Now we get to our main ajax function, the star of today’s show. This is where all the action happens, so pay close attention!

Basically what’s going on in the code is this: The .ajax() function processes the values from our string called dataString with a PHP script called bin/process.php, using the HTTP POST method type. If our script processed successfully, we can then display a message back to the user, and finally return false so the page does not reload. That’s it! The entire process is handled right there in these few lines!

There are more advanced things you can do here, other than giving a success message. For example you could send your values to a database, process them, then display the results back to the user. So if you posted a poll to users, you could process their vote, then return the voting results, all without any page refresh required.

Let’s summarize what happened in our example, to be sure we have covered everything. We grabbed our form values with jQuery using the serialize() method, and then placed those into a string like this:

Then we used jQuery’s ajax() function to process the values in the dataString. After that process finishes successfully, we display a message back to the user and return false so that our page does not refresh:

The success part of the script has been filled in with some specific content that can be displayed back to the user. But as far as our AJAX functionality goes, that’s all there is to it. For more options and settings be sure to check out jQuery’s documentation on the ajax function. The example here is one of the simpler implementations, but even so, it is very powerful as you can see.

5. Display a Message Back to the User

Let’s briefly look at the part of the code that displays our message back to the user, to finish out the tutorial.

First, we change the entire contents of the #contact_form div (remember I said we would be needing that div) with the following line:

What that has done is replaced all the content inside the contact form, using jQuery’s html() function. So instead of a form, we now have a new div with id of message. Next, we fill that div with an actual message: an h2 saying Contact Form Submitted:

We’ll add even more content to the message with jQuery’s append() function, and top everything off we add a cool effect by hiding the message div with the jQuery hide() function, then fade it in with the fadeIn() function:

So the user ends up seeing the following after they submit the form:

Successful Submission

Conclusion

By now, I think you will have to agree that it is incredibly easy to submit forms without page refresh using jQuery’s powerful ajax() function. Just get the values in your JavaScript file, process them with the ajax() function and return false. You can process the values in your PHP script just like you would any other PHP file, the only difference being that the user does not have to wait for a page refresh—it all happens silently in the background.

So if you have a contact form on your website, a login form, or even more advanced forms that process values through a database and retrieve results back, you can do it all easily and efficiently with AJAX.

Learn JavaScript With a Free Course

If you want to master JavaScript, be sure to check out our free course to learn the complete A-Z of modern JavaScript fundamentals.

 

In this course, you’ll learn all of the essential concepts of the JavaScript language. That’s right: all of them! Including the most important recent improvements to the language, in JavaScript ES6 (ECMAScript 2015) and JavaScript ES7 (ECMAScript 2016).

You’ll start with the very fundamentals of the language: variables and datatypes. Then in each lesson you’ll build knowledge, from data structures like arrays and maps to loops, control structures, and functions. Along with the basics of the language, you’ll also learn some key built-in APIs for manipulating data, AJAX, and working with the web browser DOM. Finally, you’ll get a look at some of the most powerful and widely used web APIs that are supported by all modern browsers.

  • FREE

    JavaScript
    Modern JavaScript Fundamentals
    Dan Wellman

How to Configure Contact Form 7 for Your WordPress Site

Learn how to configure the Contact Form 7 plugin for your WordPress site.

In 2020, staying in touch with your audience is very important. Establishing an email list with a service like MailChimp helps you deliver content straight to your subscribers.

Email lists are great, but what if a reader or potential customer wants to get in contact with you directly? That’s where contact forms come in! In this article, we’ll cover how to configure the popular Contact Form 7 plugin for your WordPress site.