In this video, we will see how to customize the Google Form UI and integrate it with your website. Let's start customizing the contact form that is already created for this website. Go back to the Google form and click on the theme icon to customize the theme. Now we will customize the Google form to look like your website. Select the font style and size that are similar to your website. In color, use the primary color or the background color of your website and click add. Choose any background color, which is generated automatically based on the color chosen above.

To view the form in preview mode, click the preview icon. Now that the UI has been customized, it still does not look similar to the website theme; Google Forms does not allow us to alter the form fields' layout, field color, or have a custom background color.

To Further customize this google form and make it look professional and similar to a website, Install Formfacade addon for google workspace.

Formfacade Addon

Formfacade is a google form addon which is used to design a professional looking form by selecting your preferred layout, brand colors, fonts and language. It also allows you to personalize the thank you message by including form responses and redirect users to a webpage on submit or use conditional logic based on form responses to show different pages.

Now, we will see how to customize the Google Form UI using formfacade addon to better fit your website.

Customizing google form using formfacade:

Open the Google Form that you want to customize, then click the addon button and select the formfacade option.

Then choose the required layout option, and we will select the 2-col layout. And click on more. As a default, a colorful layout will be selected; now we will select the minimal theme in this video.

Now let's customize the theme of this website. Select the primary color of your website; this primary color is used as the outline of input on focus and for the button.

Then choose the background color; the default background color is light gray. So now you can choose the background color of your website. If you have any background images, you can upload them. Please ensure your background images are in the following dimensions: 1920x1080 (16:9 aspect ratio) or 1280x1024 (4:3 aspect ratio).

Now we can go to the page tab. Here, we can update the header title and upload the logo. As a default in the footer, your profile logo will be uploaded. Now go to your website and copy your footer text and paste it here.

Click Apply now. To view them in a separate window, click Open in a new tab.

Now to get the shorter URL, you can go to the Share page, copy the URL, and replace it with a Google Form URL for your website.

Now, embed this form using FormFacade, which will allow you to render your form without an iframe and without Google Form branding. Go to the Share page, open the embed tab, and choose the option that best fits your needs.
Now copy the code and paste it into your code base.

In formfacade embedding, header and footer will not be included; only form fields will be included.

Lunchbox Express