Skip to main content

Responsive Google Form Embed

· One min read

If you want your Google Form to validate without any errors or warnings, you can make these changes:

  1. Add this to any CSS file that is linked in your HTML head: 
.g-form-container {    
   position: relative; 
   width: 100%; 
   overflow: hidden; 
   padding-top: 100%; /* 1:1 Aspect Ratio */ 
   } 
   
 .responsive-iframe { 
   position: absolute; 
   top: 0; left: 0; 
   bottom: 0; 
   right: 0; 
   width: 100%; 
   height: 100%; 
   border: none; 
   }
  1. In your html page, replace your Google Form embed with this:
<div class="g-form-container"><iframe class="responsive-iframe" src="REPLACE_THIS_WITH_YOUR_EMBED_URL_LINK_HERE"></iframe></div>