Monday, February 1, 2021

How to change the width of a Google Form to make it user friendly (less scrolling) on cell phones.

 I use Google Forms for two of the 4 companies I personally manage. I find Google Forms to be a nice and easy to use basic service. It's also Hipaa compliant when used through a G-Suite Google account. 

Adding the forms is very easy. For example in Wix, you choose "add" and then you choose to "Embed a Widget" using HTML code. Regardless of the website software, select adding HTML code. 

The code in Google Forms creates an IFrame which is an item you embed into a webpage. The iFrame is a smaller window in your page and the HTML code controls the size, colors, content and format of the smaller frame in the page. 

The problem is that if you view it on your cell phone, the form is not user friendly because it is smaller or larger than the average phone and requires a lot of scrolling. 

To find the HTML code for your Form, open your Google Form and hit the send button in the upper right side. Choose the brackets (3rd option next to "send via"). This opens the line of code starting with the word <iframe.... 



Copy the code and paste it in the appropriate space on your website. In this code on your website editor, you should see width="700" height="520". Here's where you can adjust your data. I like to change hight to '700'. For my forms, this makes it the perfect  height on most phones. Then I change the width to '100%'. Having the percent sign is important because this makes it a flexible number and the Form will flex to any width depending on the phone, tablet or computer that is viewing it. Note - you can not change it to 100 in the Google Form Send area because "percent" isn't an option there. You will be changing it to 100 px. 


Publish your site. Revel in your coding skills. 







Amazon Deals