How to change the Google Form™ Layout & Structure of the Form's questions

Pretty Forms Designer is a WYSIWYG (What You See Is What You Get) form designing app that provides you to customize your form design as you want. It offers a lot of customization features that enable you to create personalized forms.

For example, using Pretty Forms Designer, you can add multiple columns in Google Forms like you can add a few form fields e.g. First name field, and the Last name field in a single row but placed in different columns. You have a choice to add a few fields in the single-column layout of questions e.g. an Address field, the Email field question, while the other fields in the two columns layout of questions e.g. First name field, Last name field, to positioned side-by-side questions. You can also add images, buttons, or custom controls in the Form Header & multiple sections of your form. By using the Pretty Forms Designer, you can change the layout of your Google Forms.

To add custom changes to your form, Pretty Forms Designer introduced the concept of Structures. Each item in your form has a specific structure, like the form header, form body, sections, questions & other items, all have their respective structure & they lay out themselves according to their structure. When you change their structure that leads to a change in their layout. 

For example, the form header is structured as 

Form Header -> 

Header Title

Header Description 

Here, the Form Header has two child items: Header Title & Header Description. You can perform any kind of changes in the structure like you can add any custom items (e.g. image, table, or button) in the Form Header parent item or re-arrange its children items, all changes would be instantly reflected in the Form Header layout.

Similarly, you can change the structure of the Form Body, Question Items, Answers or Closed Form Page, Confirmation page, etc.

Apart from the structures of an individual item of your Google Form, you can also change their alignment, by default it is set as Left, but you can set its value to Center or Right. You can also change the Text Alignment of your Google Forms Content

If you haven't installed the Pretty Forms Designer Add-on, please install it from the below button.

Supported Custom Items

There are many kinds of custom items supported by the add-on, that enable you to create your Google Forms design more beautiful, enhanced & dynamic form. There are mainly two types of custom items: container items & non-container items. 

Container items can hold other custom items, to layout them depending upon the container being used.

Non-container Items are child items that can be added to the container item.

The following custom items are supported:

Box

A box is a container item, it is generally used to hold another item(s). It is very useful to align the child's items to the center or right alignment. You can apply any style like set background, margin, padding, or border to the box element.


Horizontal Box

A horizontal Box is a type of Box item, the main difference is, it layouts its child items in the horizontal or row direction.

 Item 1    Item 2    Item 3 

You can also set the spacing between the child items & alignment of the child items.


Vertical Box

Vertical Box is a type of Box item, it layouts its child items vertically or in the column direction.

 Item 1 

 Item 2 

 Item 3 

You can also set the spacing between the child items & alignment of the child items.


Horizontal Divider 

It is a horizontal rule (left to right) that is used to separate the child items of the Box item or Vertical Box item.

 Item 1 

---------------

 Item 2 

---------------

 Item 3 


Vertical Divider

It is a vertical rule (top to bottom) that is used to separate the child items of the Horizontal Box.

 Item 1  |  Item 2  |  Item 3 


Text Label

It is used to add a text or a paragraph with styles like font style, font size, color, text alignment, etc. It is a non-container type element.


Html Content

It is used to write a paragraph with HTML formatting elements like bold, italic, underline, etc including the ordered or unordered list tags. It is very useful to insert a table or link/anchor tag which can be copied from another HTML page or the Google Sheet.


Button

It is used to add a custom button with various styling options including the background color, border styles, margin, padding spaces, etc. It also offers a list of predefined button designs, you can choose a button design from them. 

Pretty Forms Designer provides many types of buttons like text buttons, icon buttons, text with an icon button, and image buttons. And it also offers you to add on-click handling to the button, like Move to the next section, Move to the previous section, or Go to another link URL, etc.


Image Box

It is like a box that can only contain an image. It offers many kinds of styling options e.g. set background color, border, alignment, padding, etc.


Google Doc Content Box

This is a specific type of box that is capable of showing the full or part of the Google Document as the box content. To do this you need to import your Google Document into the form. This feature is very useful to display the question content written in the Google Document with formatting, to the Google Form. This also enables you to create questions that can include tables or charts/graphs. To achieve this functionality, you need to create your questions in a Google Document & those questions can contain some tables or charts/graphs with formatting, you can import them into your form by using this Google Content Doc Box.

We hope you find this article helpful. Please feel free to contact us if you need any further information.