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>