How to Center An Embedded Google Form on Your Funnel Page

When adding a Google form to your funnel page, you may notice that the form is off-centered or not fully visible due to the form being cut off on the sides while in mobile view.  In this article, we'll cover a couple of tips and tricks that resolves this common problem.

Watch Video: https://d.pr/v/YyGPRa

Video Recap: 

The embed code used to add a Google Form to your ClickFunnels page requires some additional code that isn't provided by Google in order to center the form on the page.

To make sure the form looks uniform in both desktop and mobile view, you'll want to clone the element to create both a Desktop and Mobile version. 

(You can learn more about creating desktop and mobile views by going to the following ClickFunnels help guide: https://help.clickfunnels.com/hc/en-us/articles/360008759354-The-Mobile-Editor)

You'll also need to adjust the width and height parameters within the Google Form embed code in order to help ensure that the form isn't cut off when viewing it on a mobile device.

Adding the Embed Code To Page:

After you add the Google Form Embed code to the JS/HTML element within the page editor, you'll need to wrap the code with the following:

Add to the front of the Google Embed code:

<p style="text-align: center;">

Add to the end of the Google Embed code:

</p>

Here's an example screenshot below after the code has been added: https://d.pr/i/A8w9r7

Cloning the Rows that Contain the JS/HTML Elements

Once the code located within the JS/HTML element has been updated with the centering code, clone the rows (blue frame) that contains the JS/HTML and set one to Desktop only and the other to Mobile only.

Adjusting the Height and Width of the Google Form Embed Code:

Adjust the Height and Width parameters located within the Google embed code to your liking to help make sure the form is not cut off in mobile and to help resolve double scrolling of the form and the actual page.

Here's a screenshot of where to adjust the code: https://d.pr/i/OZbfqw

Be sure to always click Save after making any changes. 

Important Note: Due to the custom and varying nature of custom code, our support team is unable to provide assistance with any custom code added to your page. If you experience troubles while setting up your custom code, please consult a qualified developer to assist you.