{"id":2191,"date":"2023-02-24T09:38:16","date_gmt":"2023-02-24T09:38:16","guid":{"rendered":"https:\/\/extendedforms.io\/blog\/?p=2191"},"modified":"2024-07-25T05:11:47","modified_gmt":"2024-07-25T05:11:47","slug":"embed-google-forms-on-a-website","status":"publish","type":"post","link":"https:\/\/extendedforms.io\/blog\/embed-google-forms-on-a-website","title":{"rendered":"How to Embed Google Forms on a Website or Blog? [2 Easy Ways]"},"content":{"rendered":"\n<p>Google Forms is a powerful tool that can be used to collect data, feedback, or <a href=\"https:\/\/extendedforms.io\/blog\/creating-effective-forms-for-online-surveys\" data-type=\"URL\" data-id=\"https:\/\/extendedforms.io\/blog\/creating-effective-forms-for-online-surveys\" target=\"_blank\" rel=\"noreferrer noopener\">survey<\/a> responses. It is a popular choice for individuals and organizations looking to streamline their data collection processes. One of the best things about Google Forms is that it can be easily embedded on a website or blog. Moreover, it can be an effective way to embed Google Forms on a website or blog to streamline data collection and increase user engagement.&nbsp;<\/p>\n\n\n\n<p>Embedding a form on your website can save you time and hassle by eliminating the need to collect responses via email or other methods. However, not everyone is familiar with the process of embedding Google Forms on their website or blog.<\/p>\n\n\n\n<p>In this blog post, we will discuss how to embed Google Forms on a <a href=\"https:\/\/quizandsurveymaster.com\/the-best-wordpress-survey-plugin\/\" data-type=\"URL\" data-id=\"https:\/\/quizandsurveymaster.com\/the-best-wordpress-survey-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a> website or blog and provide you with step-by-step instructions to get started.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/extendedforms.io\/blog\/embed-google-forms-on-a-website\/#embed-google-forms\">Embed Google Forms on your website (iframe)<\/a><\/li><li><a href=\"https:\/\/extendedforms.io\/blog\/embed-google-forms-on-a-website\/#embed-with-addon\">Embed Google Forms without iframe<\/a><\/li><\/ul>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li ><a href=\"#why-embedding-google-forms-on-a-word-press-website-can-be-useful\">Why Embedding Google Forms on a WordPress Website Can Be Useful?<\/a><\/li><li ><a href=\"#how-to-embed-google-forms-on-your-word-press-site\">How to Embed Google Forms on Your WordPress Site?<\/a><ul><li ><a href=\"#1-embed-google-forms-on-your-website-iframe\">1. Embed Google Forms on Your Website (Iframe)<\/a><ul><li ><a href=\"#create-google-forms\">Create Google Forms<\/a><\/li><li ><a href=\"#access-the-embed-code\">Access the Embed Code<\/a><\/li><li ><a href=\"#embed-google-forms-on-your-word-press-site\">Embed Google Forms on Your WordPress Site<\/a><\/li><\/ul><\/li><li ><a href=\"#2-embed-google-forms-without-iframe\">2. Embed Google Forms Without Iframe<\/a><\/li><\/ul><\/li><li ><a href=\"#wrapping-things-up\">Wrapping Things Up\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 id=\"why-embedding-google-forms-on-a-word-press-website-can-be-useful\">Why Embedding Google Forms on a WordPress Website Can Be Useful?<\/h2>\n\n\n\n<p>Embedding Google Forms on a website or blog can be useful for various reasons. Firstly, it allows you to collect data and feedback directly from your website visitors or blog readers without requiring them to navigate to a separate page or platform. This can increase user engagement and make it more convenient for users to provide feedback or respond to surveys.&nbsp;<\/p>\n\n\n\n<p>Besides, <a href=\"https:\/\/extendedforms.io\/blog\/make-google-forms\" data-type=\"URL\" data-id=\"https:\/\/extendedforms.io\/blog\/make-google-forms\" target=\"_blank\" rel=\"noreferrer noopener\">Google Forms<\/a> is a standalone app that gives users the ability to control who is collaborating on their content. You can invite other users to work on your form and avoid mistakes. Using Google Forms can help not just your WordPress site but your brand\u2019s overall presence.\u00a0<\/p>\n\n\n\n<p>As embedding Google Forms on your website or blog allows you to customize the form&#8217;s appearance and design to match the overall look and feel of your website or blog, creating a seamless user experience.&nbsp;<\/p>\n\n\n\n<h2 id=\"how-to-embed-google-forms-on-your-word-press-site\">How to Embed Google Forms on Your WordPress Site?<\/h2>\n\n\n\n<p>If you believe Google Forms is the best choice for your form-related needs on your WordPress website, you&#8217;re in a good spot. There are two methods to embed Google Forms, and one is notably easier than the other.\u00a0<\/p>\n\n\n\n<p>Let\u2019s see how you can embed Google Forms on your WordPress site.\u00a0<\/p>\n\n\n\n<h3 id=\"1-embed-google-forms-on-your-website-iframe\">1. Embed Google Forms on Your Website (Iframe)<\/h3>\n\n\n\n<p>The first way is the default Google Forms way to embed Google Forms in a website or blog. This is the easier and default way to do and in 3 easy steps, you\u2019re good to go.\u00a0<\/p>\n\n\n\n<h4 id=\"create-google-forms\">Create Google Forms<\/h4>\n\n\n\n<p>You\u2019ll first need to create a Google Forms survey or quiz. Log in to your Google account, and access your Google forms &#8211; <a href=\"https:\/\/docs.google.com\/forms\/u\/0\/\" target=\"_blank\" rel=\"noopener\">click here\u00a0<\/a><\/p>\n\n\n\n<p>To get started choose a Blank form or quiz, or select from a template to work on. Either way, you can write a title &amp; description, add questions, and choose from the list of question types. Even, you can select images or videos to be inserted in the question tab.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1024\" height=\"571\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/google-forms-template-1024x571-66217338849f2.webp\" alt=\"advanced settings\" class=\"wp-image-5772\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/google-forms-template-1024x571-66217338849f2.webp 1024w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/google-forms-template-1024x571-66217338849f2-300x167.webp 300w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/google-forms-template-1024x571-66217338849f2-768x428.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Then, access advanced settings, and change the theme of the form through the \u2018settings\u2019 and \u2018palette\u2019 options respectively. This range of tools available should enable you to create virtually any kind of form you require.&nbsp;<\/p>\n\n\n\n<p>If you wish to gather feedback from your team, simply click on the three-dot icon and choose the option to \u2018Add collaborators.\u2019 By entering their email addresses or using the link-sharing feature, you can <a href=\"https:\/\/extendedforms.io\/blog\/add-teams-and-assign-roles-in-google-forms\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/extendedforms.io\/blog\/add-teams-and-assign-roles-in-google-forms\" rel=\"noreferrer noopener\">invite team<\/a> members to contribute to your form. After completing your editing, you&#8217;ll be able to embed Google Forms into your WordPress site.<\/p>\n\n\n\n<h4 id=\"access-the-embed-code\">Access the Embed Code<\/h4>\n\n\n\n<p>To embed Google Forms into the WordPress site. Click on the \u2018Send\u2019 button, it provides 5 ways for sharing the forms &#8211; via social media platforms (Twitter &amp; Facebook), embedding in an email, link, and HTML.\u00a0<\/p>\n\n\n\n<p>Any of these options could prove useful, especially if you want to send forms to your email subscribers or you want to share them on your social media, or simply add links to your blogs or any platform.&nbsp;<\/p>\n\n\n\n<p>However, for this tutorial, we\u2019re going to focus on embedding the HTML code option.\u00a0 Therefore, select the \u201c&lt; >\u201d\u00a0 tab. You\u2019ll see a code snippet, as well as an option to change the dimensions of your form. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"431\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/gforms-send-html-768x431-66217336adf3f.webp\" alt=\"embed-google-forms-HTML\" class=\"wp-image-5773\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/gforms-send-html-768x431-66217336adf3f.webp 768w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/gforms-send-html-768x431-66217336adf3f-300x168.webp 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>Once you\u2019re happy with the size, copy the link, and click on the \u2018Copy\u2019 button.<br>Next, move to the WordPress dashboard.&nbsp;<\/p>\n\n\n\n<h4 id=\"embed-google-forms-on-your-word-press-site\">Embed Google Forms on Your WordPress Site<\/h4>\n\n\n\n<p>Before diving into what to do with the copied code, let&#8217;s create a staging WordPress site. This process is straightforward if you use Instawp or are familiar with the tool. Instawp allows WordPress users to quickly set up a staging site. In this case, we&#8217;ll use it to create our WordPress staging environment.\u00a0<\/p>\n\n\n\n<p>Go to <a href=\"https:\/\/instawp.com\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/instawp.com\" rel=\"noreferrer noopener\">InstaWP<\/a>, sign up with your account, or create one for free.<\/p>\n\n\n\n<p>Click on the \u2018Add New\u2019 button and select the configurations or create a new one for yourself.&nbsp;<\/p>\n\n\n\n<p>Once the site is created, click on the \u2018Auto Login\u2019 option to lead you to the WordPress dashboard.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1024\" height=\"591\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/dashboard-instawp-1024x591-66217335dd87b.webp\" alt=\"embed-google-forms-instawp\" class=\"wp-image-5774\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/dashboard-instawp-1024x591-66217335dd87b.webp 1024w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/dashboard-instawp-1024x591-66217335dd87b-300x173.webp 300w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/dashboard-instawp-1024x591-66217335dd87b-768x443.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>[Note &#8211; We\u2019ve got a detailed article on how to create a staging site with the help of InstaWP, you can check it out from here &#8211; <a href=\"https:\/\/expresstech.io\/wordpress-test-sites\/\" data-type=\"URL\" data-id=\"https:\/\/expresstech.io\/wordpress-test-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to make WordPress test sites using InstaWP<\/a>]<\/p>\n\n\n\n<p>With the HTML code in your hand, you\u2019re ready to embed Google Forms in your website. First, navigate to the page or post where you want to incorporate the form.\u00a0<\/p>\n\n\n\n<p>If you\u2019re working in the WordPress Block Editor, you\u2019ll have to add a \u2018Custom HTML\u201d block.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1024\" height=\"591\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/custom-html-wordpress-1024x591-66217335bbf74.webp\" alt=\"embed-google-forms-custom-html\" class=\"wp-image-5775\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/custom-html-wordpress-1024x591-66217335bbf74.webp 1024w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/custom-html-wordpress-1024x591-66217335bbf74-300x173.webp 300w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/custom-html-wordpress-1024x591-66217335bbf74-768x443.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Paste the code into that block. Then, click on the \u2018Preview\u2019 tab in the Custom HTML block\u2019s toolbar. You\u2019ll see your Google Form just as it will appear on your website.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"430\" height=\"1024\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/embedded-gforms-preview-430x1024-66217334aba11.webp\" alt=\"embed-google-forms-preview\" class=\"wp-image-5776\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/embedded-gforms-preview-430x1024-66217334aba11.webp 430w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/embedded-gforms-preview-430x1024-66217334aba11-126x300.webp 126w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"2-embed-google-forms-without-iframe\">2. Embed Google Forms Without Iframe<\/h3>\n\n\n\n<p>Another option we\u2019ve is where you can embed a Google Forms quiz\/survey on your website without an iframe (Google Forms default way). You will need Formfacade, an add-on for Google Forms to achieve this. It will allow you to truly embed Google Forms within &amp; make it look like your website.\u00a0<\/p>\n\n\n\n<p>To start with, install the add-on, go to More &gt; Add-ons, and search for Formfacade.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"809\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/gforms-add-ons-768x809-662173349fdaa.webp\" alt=\"embed-google-forms-add-on\" class=\"wp-image-5777\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/gforms-add-ons-768x809-662173349fdaa.webp 768w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/gforms-add-ons-768x809-662173349fdaa-285x300.webp 285w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p>Once you have the Formfacade add-on installed, click on the puzzle-shape icon there you\u2019ll see all the installed add-ons.<\/p>\n\n\n\n<p>Click on the Formfacade and then select \u2018embed in a webpage.&#8217;<br>Then choose which one of your websites (or not) you want to embed the form in.\u00a0<br>Click on Next, you\u2019ll get the HTML code, copy it, and embed that code into your webpage.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"768\" height=\"533\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/embed-gforms-formfacade-768x533-662173339212d.webp\" alt=\"embed google forms \" class=\"wp-image-5778\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/embed-gforms-formfacade-768x533-662173339212d.webp 768w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/embed-gforms-formfacade-768x533-662173339212d-300x208.webp 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This will truly match your form with the website\u2019s theme and colors. This technique truly embeds Google Forms into your webpage and not as an iframe.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"582\" height=\"1024\" src=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/formfacade-code-preview-582x1024-662173338ac83.webp\" alt=\"embeds Google Forms\" class=\"wp-image-5779\" srcset=\"https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/formfacade-code-preview-582x1024-662173338ac83.webp 582w, https:\/\/extendedforms.io\/blog\/wp-content\/uploads\/2024\/04\/formfacade-code-preview-582x1024-662173338ac83-171x300.webp 171w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"wrapping-things-up\">Wrapping Things Up\u00a0<\/h2>\n\n\n\n<p>Embedding a Google Form on a website or blog is a simple yet effective way to streamline data collection, increase user engagement, and gather valuable insights. By following the step-by-step guide provided in this article and optimizing the form&#8217;s performance and promoting it to users, you can create a user-friendly and effective form that meets your needs.&nbsp;<\/p>\n\n\n\n<p>So, what are you waiting for? Try to embed Google Forms on your website or blog today and experience the benefits for yourself!<\/p>\n\n\n\n<p>Pro tip &#8211; If you\u2019re a Google Forms user using it for surveys or quizzes then try using Extended Forms for timer, proctor, or other features advantages. It is a free app (+ paid plans) for Google Forms that allows you to fill in the limitations that forms lack like you can add a countdown timer to your quiz\/exam.\u00a0<\/p>\n\n\n\n<p>Besides, add an online proctor feature to detect or prevent cheating during virtual assessments. Additionally, the app has a feature that allows Google Forms to be integrated with Google Classroom. You can add classwork directly from the extended forms dashboard, auto-grade from the linked Google forms to the classroom, &amp; so forth.\u00a0<\/p>\n\n\n\n<p>It\u2019s a great app with a minimal pricing range to be used with Google Forms and enjoy the advantages of many features with constant feature updates.<\/p>\n\n\n\n<div class=\"wp-container-6a280bfa89b08 wp-block-buttons\">\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"http:\/\/extendedforms.io\" target=\"_blank\" rel=\"noreferrer noopener\">Try ExtendedForms<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>If you like this detailed guide, you can also consider reading\u00a0<a href=\"https:\/\/extendedforms.io\/blog\/org-only-multiple-domains\" target=\"_blank\" rel=\"noreferrer noopener\">How to Allow Multiple Domains for Form Sharing With an Organization.<\/a>\u00a0and\u00a0<a href=\"https:\/\/extendedforms.io\/blog\/add-tables-in-google-forms-2-ways\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Tables in Google Forms? [2 Ways]<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Forms is a powerful tool that can be used to collect data, feedback, or survey responses. It is a popular choice for individuals and organizations looking to streamline their data collection processes. One of the best things about Google Forms is that it can be easily embedded on a website or blog. Moreover, it &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/extendedforms.io\/blog\/embed-google-forms-on-a-website\"> <span class=\"screen-reader-text\">How to Embed Google Forms on a Website or Blog? [2 Easy Ways]<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":3,"featured_media":6342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[3,15],"tags":[263,29,80,262],"_links":{"self":[{"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/posts\/2191"}],"collection":[{"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/comments?post=2191"}],"version-history":[{"count":34,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/posts\/2191\/revisions"}],"predecessor-version":[{"id":6344,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/posts\/2191\/revisions\/6344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/media\/6342"}],"wp:attachment":[{"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/media?parent=2191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/categories?post=2191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/extendedforms.io\/blog\/wp-json\/wp\/v2\/tags?post=2191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}