A form design is the overall form appearance including layout and styling. In Indition Forms, Contests, and Surveys, we keep the form and the styling as separate entities to enable you to have many different designs for the same form. By default, every form will be given a form design that is not editable but you can create your own custom designs very easily. Follow along as we teach you how to create a form design using the form designer. 

Step 1 - Getting to the Form Designs

There are two places where you can begin the form design process: 1. The form design page, 2. The form builder.

Creating a form design from the Form Designs page - In the navigation menu select Forms under the Forms menu. This will take you to the Forms Management page where you see a list of your existing forms. Find the form you want to create a design for and then select the Form Designs icon (directly to the right of the edit icon) for that form. This will take you to the Form Designs page where you can then click the Create Design button at the top right of the screen. 

Creating a form design from the Form Builder - When you are creating or editing the form in the form builder click the Save Form button. A pop up box will appear giving you an option to "Go to Design List" which will take you to the Form Designs page for the form you are saving. From there you can create a design as described above. The second option in the pop up box is "Create Design". If this is selected you will immediately begin the design creation process for the form and bypass the Form Designs page. 

Step 2 - Provide Form Design Details

The first step to actually creating the form design is to provide the basic information for form design identification. 

1. Name - this is the name of your form and will be how you identify the form in the future. This is a required field. 
2. Page URL - We will automatically generate a URL for you, but if you would like, you can enter a custom URL ending in the format of "/custom-URL". To add your custom URL, click the Customize URL button to expose the URL entry field. 
3. Description - Here you can provide a description of your form to provide an explanation of the forms purpose and it's contents. This is helpful when working with teams or when revisiting forms that were created a long time ago and their functionality has been forgotten. 

When you are ready to start designing your form, click the Save button to be taken to the form designer. If you need to view or edit the details provided on this screen, click on the Settings button once within the designer. 

Step 3 - Adding Your Fields to the Design

Once you are within the form designer, you will need to choose which form fields you would like to include in your form design. One of the unique features of Indition Forms, Contests, and Surveys is that we do not require you to include every field in your form, in your form designs. So you may have multiple form designs for the same form, that have different fields available for the end user. However, if the form field is required, you must include that field within all of the designs for that form.

To include your form fields, all you need to do is find the field you want to include within the Add Elements to Form sidebar on the left side of the screen and either drag and drop the field to the desired location, or click the plus sign icon on the field. If you click the plus icon, the element will be added to the very bottom of the form. 

Once a field or element has been included in you form design, you can rearrange and remove these fields. To rearrange or reorder a field, you can either select on the entire row that the field is within and drag to reorder, or you can click on the field itself and drag to move to a different location. To remove the field/element, hover over the field and click the red trash icon. This will remove the field from the design and return the field to the Add Elements to Form sidebar to be added again when desired. 

Step 4 - Styling the Form Design

There are three different parts to styling your form designs: the overall style, individual row styles, and individual element styles. The overall style, which is accessed by clicking Form Styling, allows you to set styles that apply to the form as a whole. This is where you you can choose from default style options and where you edit settings such as the form width or background color. The row styling allows you to set styling options that apply to the selected row and the Element styling allows you to set styling options that pertain only to the selected element. Element styling overrides row styling, and row styling overrides form styling. Read about each part of styling below to get a full understanding of what you can edit within each. 

Form Styling

This is the overall style of the form and the settings here apply to the form as a whole. To access the overall styling, click on the blue Form Styling button to open the styling sidebar. Here you will see two tabs: Default Styling and Custom Styling. Default styling allows you to choose from existing styling themes and custom styling allows you to set the overall styling yourself. 

Default Styling - Within the default styling tab, you are able to search, preview, and select default form design themes. If selected, the form design styling will be applied to all fields already added to the form design and will also be applied to any additional field or elements added after the style is selected. You cannot remove a default styling but you can manually edit the styling after the default is selected or select a new default styling. 

Custom Styling - The styling options within here are going to be applied to the form container, which is what all the rows and individual elements are housed within. There are a few fields that only exist in the form styling and they are listed and explained immediately below. The other styling options will be listed and described further down in element styling as these options are available within form styling, row styling, and element styling. Any edits made to one of these fields will automatically be applied and saved to the form. 

1. Hide Form Title - This is a checkbox that if selected, will hide the Form Title so it is not included in the form design. 
2. Hide Form Description - This is a checkbox that if selected, will hide the Form Description so it is not included in the form design. 
3. Form Width - This is the overall width of the form. This width will constrain all rows and field widths within the form. You can choose to enter the width in either pixels (px) or as a percent (%) to make the form responsive to page/window size.
4. Form Height - By default the form height is automatically set which is indicated by the Auto Height checkbox being selected. The form height will always be automatically set based on it's contents. 

Row Styling

This is the styling that applies to the selected row. To access the row styling, select the row within the designer and the styling sidebar will change to display the styling options for the selected row. Immediately below are the styling options specific to row styling. The other styling options will be listed and described further down in element styling as these options are available within form styling, row styling, and element styling. Any edits made to one of these fields will automatically be applied and saved to the selected row.

1. Columns - The only styling option that is specific to rows is the columns option. Here, you can choose to separate the selected row into a variety of different column layouts. If new columns are added, then you will see that a new section is added to the form design. Fields are then available to be dragged and dropped into the newly added columns. If a column is removed that had a field within it, the field will be returned to the list of available elements in the Add Elements sidebar. If a form has two columns and the page window decreases to the point where we cannot display both columns side by side, the column on the left will be stacked above the column to the right. This holds true for 3 column rows as well. 

Element Styling

This is the styling that applies only to the selected element. The access the element styling, select the element (which could be the field or the field label) within the designer to display the styling options for the selected element. Some elements will have styling options specific to the element type such as choosing a field label position for text fields but not having that option for checkbox or radio button fields. Below is a list of styling options for elements (some of these styling options also exist within form and row styling but those will apply to the entire row or form). Any edits made to one of these fields will automatically be applied and saved to the selected element.

1. Width - This is the width of the selected element. You can choose to enter the width in either pixels (px) or as a percent (%) to make the element responsive to the form/row width.
2. Height - This is the width of the selected element. You can choose to enter the width in either pixels (px) or as a percent (%) to make the element responsive to the form/row width. To have the height of the element automatically set, select the Auto Height checkbox.
3. Background Color - This is the background color of the selected element. You can either enter a hex color (Example: #ffffff for white) or you can click on the field to open the color picker where you can click to choose the desired color. 
4. Font Type - This is a dropdown to select the font type to use for the selected element if there is text within the element. 
5. Font Style - This is an option that is only available when you have a field title/label element selected. Here you can choose to Bold, Italicize, Underline, or Strikethrough the field label. 
6. Font Color - Here you can either enter a hex color (Example: #ffffff for white) or you can click on the field to open the color picker to click and choose the desired color of the text in the selected element. 
7. Font Size - Here you can enter the font size in pixels for an element that has text within it. 
8. Border Color - This a color selector for the color of the border around the selected element. You can either enter a hex color (Example: #ffffff for white) or you can click on the field to open the color picker to click and choose the desired color Any changes within this option will only be seen if a border is applied. 
9. Border Style - This is a dropdown to select the style of the border you want to surround the selected element. If you dont want a border, select "None". 
10. Border Radius - The border radius controls how sharp the corners on the border are. The value entered in this field should be in pixels. 0 px means completely sharp border edges and any number above that starts to round out the corners. 
11. CSS Class - This field provides the ability to apply a custom css class to the selected element. To add custom css classes, click on the Settings button and then click the Custom CSS button once on the settings page. Once you add a custom CSS class, you will be able to add that class to the selected element within the CSS Class field. 
12. Hide Label - If this box is selected, the field label for the selected element will be hidden. 
13. Position of Label to Field - This field allows you to choose where you want to display the field label for the selected element. There are 3 options. If you select Above (which is selected by default), then the field label will be display atop the form field. If you select Beside, then the field label will be displayed to the left of the form field. If you select Within, then the field label will be shown within the form. A lot of modern forms keep the field labels within the fields to have a cleaner, simplified look. 
14. Text Alignment - This is a field available when the element you have selected contains text. Here you will able to choose whether you want your text centered, aligned left, or aligned right. 
15. Margin - Margin is the amount of spacing that is surrounding your selected element (outside of the border if one was exposed). Within the margin editor you can edit the margin spacing by entering a margin in pixels to the left, top, right, or bottom of the selected element. 
16. Border - The border sizing allows you to choose the size of your border. Within the border editor you can edit the border sizing by entering a value in pixels to the left, top, right, or bottom of the selected element. This will affect how thick your border is if you choose to include one. 
17. Padding - Padding is the spacing between the element's border and the content within that element (within of the border if one was exposed). Within the padding editor you can edit the padding spacing by entering a value in pixels to the left, top, right, or bottom of the selected element. 

Additional Actions

Besides all of the abilities listed above, here are some additional actions you can take when you are within the form designer. 

1. Click to Expand and Collapse the Add Elements Sidebar - The sidebar on the left hand side used to add available elements to your form design can be collapsed and expanded by clicking on the arrow located at the top of the sidebar. 
2. Click to Expand and Collapse the Styling Sidebar - The sidebar on the right hand side used to style the form and it's elements can be expanded by clicking on the styling icon at the top right of the page and can be collapsed by clicking the arrow at the top of the sidebar when it's expanded. 
3. Form View Tab - This tab will bring you back to the form designer when you are on the Page View tab. 
4. Page View Tab - This tab will bring you to the Page View of your form. See more information about the Page View template in the article about Page Templates for Form Designs. 
5. Settings - This button will open the Settings page for the form design. This will allow you to edit the original details for the form design such as the Name, Description, and Custom URL. Besides that you can also edit the Custom CSS and select a page template for your form design. See the article about Page Templates for Form Designs to learn more about selecting page templates. 
6. Edit Form - This button will take you to the form builder for the form you are creating/editing a design for. 
7. Preview Page - This will open a preview of the page containing the form with the current design. The preview will be opened in a new tab. 

Follow these steps and instructions and you will be building simple & beautiful form designs with ease! If any of your questions were not answered by this article, please contact us at info@inditioncra.com and we will be sure to assist you.