How to customize your Google Forms™ to make the form look Better, more Beautiful, & Attractive
Google Forms™ offers many kinds of customizations to improve the form's look & feel better. Like in the Google Form, you can insert an image in the top header of the form, you can change the text font style of the header, questions & other text using the Theme settings.
These customizations are very useful but not enough for making personalized forms. For instance, if you want to create a Google Form whose theme must be similar to your website's theme, or want to add a background picture of your business in your form. Pretty Forms Designer provides an interface to customize your Google Forms theme that matches your website, & you can set the background image as well, not only these features, there are many features provided by the Add-on to make your form looks more personalized.
The customization could be any type, Pretty Forms Designer provides many kinds of customizations to enhance your existing Google Forms like :
You can set custom form width, and form font, and can set custom background images with opacity with x/y repeat options to your form background.
You can hide/unhide the form header, set a custom background to the form header, and add custom elements like buttons, text labels, tables, images or photos, etc. to enhance the form header.
Customize the questions UI. You can change the question's title & description styles, change its structure, add custom elements like buttons, HTML content to use tables, image boxes, and a lot more.
Group multiple questions into a single row. Like "First name" & "Last name" questions can be grouped under a single horizontal row "Name".
Set custom styles to an individual item like set background color, font color, font size, margin, padding, border, width, height, etc.
You can convert a one-language form to a multi-language form.
Write formulas or equations in the question within your quiz form.
And a lot of features you would find when using Pretty Forms Designer. If you haven't tried the designer yet, please install this & start customizing your Google Forms as you want.
Now let us see how to customize your Google Forms to make them look better, Beautiful, & Attractive.
Here we are trying to demonstrate & designing a basic contact us form. Our main motive is to cover most of the features of the add-on with this form-building process & check what type of custom design options are available in the Google Form.
We have created a Google Form with having few questions: Email, First Name, Last Name & Comments fields. You can see on the left-hand side image of the Google Form. We are going to customize its design shown on the right-hand side form image.
Open the Pretty Forms Designer add-on from the Google Forms add-on menu. Then click the Open Form Designer menu item. And then Setup Form Designer for this form. We are using default selected setup configurations. After setup is done, this will open the Form Designer.
Let us change the form's width, here we are changing 640px to 440px, you can change it to any value smaller or larger size. The best part is, if you set it to a large value (e.g. 1500px), on small screens display the form's page width will be automatically adjusted. You can also make your Google Form wider which could occupy the full screen width.
Let us customize the Google Form Header. Click the Form Header & change the form header margin and padding styles. You also have more styling options, like you can change the border styles or the background styles of the form header.
Let's Change the Form Header Background. Here, we are removing its color value to make it a transparent background. You can use any color value or can add a background image that is only for the form header.
Let's Change the Form Header Border. Here, we are setting the border's width to 0.
Select Form Header Title & change its Text Alignment property to "Center". If you want, you can change this header's title width, font size, font color, margin, etc. styles.
By using these styling options you can create a custom header in your Google Form. You can also set a background picture to your Google Form's header to look more professional.
Let us group the First Name & Last Name questions in a row. Each question item is contained in its row. This means the first name item is contained in a row, and the last name item is contained in another row. We will move the Last Name Item to the First Name Item Row.
To achieve this, click on First Name Question Item & then click on the Row Options button right to the question item, then click "Add Form Item (Question) to this row". And then, select Last Name Item from the list of all form items, this will detach the Last Name question item (Form Item) from its row & add it to the First Name question item's row. If you want you can enable the Row Header & set its title to "Name".
By using this method, you can make two columns layout in Google Forms with different column widths.
You will see First & Last Name items are contained in a single row. And you will notice that the row that was belonging to Last Name is now empty. You can remove this empty row by clicking on this row, then clicking on "Row Options", then remove this row.
Let us modify the Form Items styles. Click on the First Name item, and change its background color to transparent. You also have the option to change styles at the common level that commonly apply to all the form items, for this select the "For All Form Items" tab & then change the background color, it will apply to all items.
By using the same method we are changing the border width to 0 px & changing the padding for all form items.
Let's do some changes in the Email Item, here we are using the default created Email question field by selecting the "Collect email addresses" option of the Google Form's Settings. The problem is, Google forms positioned this question field always at the first position, they do not provide an option to change its position. Here we want to place this after the Name question fields.
Let's move the row, we are moving the Email row down, select Email Item, click on the "Row Options" button, then click "Move this row down". You would see, the Email field is now positioned after the Name questions row.
Let's Change the Google Form Background, click on the form background button in the top bar. And change it to any value, here we are setting it to white color (#ffffff).
Update Form Padding or margin, and can set the border according to your requirements.
Let's see, how to change the background picture of Google forms. Click on the Form page background button from the top buttons bar, and set the background image URL. You can also set other options too like set background image repeat, image size, image attachment property & image opacity, which is very useful.
Now change the text answer fields styles. Pretty Forms Designer offers a lot of predefined designs. You can also create your design if you want. Let us change the text field design. Click on a text field, then click on Design Button. This will open the predefined designs, you can apply any design from the available list of designs. By using the provided styling options, you can change the placeholder text of the short / para answer field questions in Google Forms.
Let's Change the Submit Button design, goto the Form Styles tab, open the "Form Control Buttons Styles" and then scroll down you would see the various styling options for Submit button, and for the Next & Back buttons too. You can also click on the Design button to see all the predefined designs provided for this button. Here we have selected & applied a rounded button design. If you need, you can change the button background color and font color according to your website theme.
Using this method, you can customize the Submit button text & styles in Google Forms. You can also change the Styles of Next & Back button as well.
Please click the "Save" button to save this form, and check preview of the currently saved form.
We hope you find this article helpful. Please feel free to contact us if you need any further information.