Embedding a Google form should be a straightforward process as building a Google form. Google made it stupidly easy to work with forms. The interface is intuitive, all the things are at their place and you can come up with a form in no time. But problems seem to appear when you want to make use of the form, sharing it or embedding it into 3rd party apps like your website or email. In this tutorial, I’m going to show you how to properly embed Google forms.
Forms are a great way to capture leads and better know your audience in the same time and they should be part of your marketing arsenal without discussion.
How to Create a Google Form
Before embedding it, you need to firstly create a form. So, sign in to Google, head over to forms and hit the + button to create a new form. You could pick a template or start from scratch.
Create the form by adding some fields to it. For our example, I decided to go for a multiple choice grid with a few options.
Once finished, hit the Send button to send it to your list or embed it into a page.
How to Embed a Google Form in WordPress
Once you hit the “Send” button, a popup should appear with a few options for you. Go to the “code” tab and grab the iframe embedding code.
Set the desired width and height. You want to make sure that the Google form banner size fits right into the webpage so make sure that the width value, to be the same or smaller than your page width. Then go to your WordPress dashboard, add a new page or post, switch the editor to Text and paste the code.
That’s it. Save/publish the page and the form should become part of it. If you now switch to the Visual tab in the WordPress editor, you could see the embedded form and that’s how is going to look like on the website too.
Here’s a working demo of our newly created form:
This is how you embed a G Form in WordPress, by using the default WordPress editor. But what if you want to embed the form by using a page builder? For example, I use Visual Composer for all my themes, there are other page builders as well, like Elementor or Beaver Builder.
Embed Google Form via Visual Composer Page Builder
Each page builder comes with elements which allow you to paste code snippets into a page. For Visual Composer, the element you need to look for is called “Raw HTML”.
Paste the iframe insert code and that should be all:
This is how you embed a Google form into your website with Visual Composer. The process is similar for Elementor page builder, with their HTML module and so on.
Embed Google Form in HTML Website
If you’re building websites from scratch using code, then the form iframe has no secrets to you. To embed a G form in a static HTML website is just pasting the code into the .html file:
Embed Google Form in Email
How about email? Well, the main scope of a G form is to be sent to responders via email so this process should be pretty intuitive. From the same “Send” section, click on the envelope icon and add the email addresses you wish to send the form to.
By default, the email will contain a link to the self-hosted form, but if you select the “include form in email” checkbox, this will be included in the email and people will be able to complete the form from the email client.
Further resources
You could take things to the next level by connecting G Forms to hundreds of 3rd party apps via Zapier. You could do stuff like saving new contacts into your CRM or making each response a Trello task or dig into web software development and build something great with Google forms.
This was our guide on how to integrate G Forms in your WordPress website. Would love to hear your insights on Google Forms so don’t hesitate to leave your comment below!
