Appearance
Learn the customisation options to enhance the look of your form
The 'Appearance' heading allows you to customise the aesthetic of your form. Aesthetically, almost everything can be changed on your form, and pre set themes (specific to one form - contact your Administrator for application wide theme) can be incorporated in this section too.
Note! The 'Poll' form type uses different customisation options in it's appearance sub-heading compared to the other three form types (survey, event, test).
To access the 'Appearance' section when editing a form, go to 'Settings' \ 'Appearance'. Alternatively, when in the 'SmartForms Dashboard', go to 'Action' \ 'Design' on the specific form row you would like to customise.
The main appearance page is split into two panes. The right hand pane provides a view of the current design settings, and the left hand pane allows access to each of the design elements of the form. Clicking on the tab will allow each of the elements to be edited. Changes are shown in the right hand pane as they are updated and saved. Once all the elements are set how you want them to be, click on the Save button to make them permanent.
Select one the following sub-headings for more information:
Appearance Settings |
Layouts |
Header |
Form |
Buttons |
Footer |
Themes |
Appearance Settings
The Design Elements which may be set are as follows:
- Layouts: The Form and Page Layouts, including main colours and sizes
- Header: The Header bar including Form Title and Logo
- Form: The individual form attributes e.g. Question and Section, font, colour and size, Dividers and Progress Bar
- Buttons: The buttons used in the form
- Footer: The elements at the foot of the form. e.g. contact details
- Themes: Create, apply, change, or delete design themes
When editing a form aspects colour, you can use the inline colour picker or select your own colour using the 'Hex Colour Code' format.
CSS Font-Size Scaling
When editing a form aspects size, you will need a basic understanding on CSS font-size scaling:
Pixels (px): one pixel is equal to one dot on a computer screen (the smallest division of your specific computer screen's resolution). Using px will NOT scale downward to fit mobile devices.
Points (pt): one point is equal to 1/72 of an inch. Using pt will NOT scale downward to fit mobile devices.
Ems (em): one em is equal to the current font-size of the document, e.g. if the set document font size is 11pt, then 1em is equal to 11pt.
Percent (%): 100% is equal to the current font-size of the document, e.g. if the set document font size is 11pt, then 100% is equal to 11pt.
Layouts
The 'Layouts' sub-heading allows you to customise the page and form layout, along with the main colours and sizing of your form.
Page Layout
Background Color: Edit the page background colour to make your form stand out from the page.
Background Image: Edit the page background to be one of the default backgrounds from the drop-down menu. All default background images are set to 'Repeat' automatically.
Your Backgrounds: Edit the page background to be an uploaded image from your asset library.
Layout: Edit the positioning of your background image and how you would like it to be displayed.
Form Layout
Form Allign: Set the position of where your form will align on the page.
Form Width:
Background Color: Edit the form background colour to make your form stand out from the page.
Background Image: Edit the form background to be one of the default backgrounds from the drop-down menu. All default background images are set to 'Repeat' automatically.
Your Backgrounds: Edit the form background to be an uploaded image from your asset library.
Border Width: Edit the form border width (px = pixels) to add a layer to your form.
Border Style: Edit the form border style to change the look of the border on your form.
Border Color: Edit the form border colour to make your form stand out from the page and the actual form itself.
Use Custom CSS
Use Custom CSS: Enable this option to incorporate your default CSS file into your form.
Your CSS File: Edit the CSS file by pasting in your custom.css file, or edit the existing custom.css file.
Header
The 'Header' sub-heading allows you to customise the logo and title on your form. Logos can be uploaded from your asset library too.
Logo
Select Logo: Select a large or small version of your default logo. This will be set by the Admin
Your Logos: Select a logo uploaded from your assets library
Logo Align: Edit the positioning of your forms logo and where you would like it to be displayed.
Logo Padding: Edit the amount of padding (pixels around the edges of an image) on your logo.
Title
Show Title: Edit the display of your form title. Your form title is the same as when you first create it.
Title Align: Edit the positioning of your forms logo and where you would like it to be displayed.
Text Colour: Edit the title colour to make your title stand out from the rest of the header.
Background Colour: Edit the title background colour to make your title stand out from the rest of the form.
Title Font: Edit the title font settings by enlarging the text and making it bold to make your title stand out further from the form.
Form
The 'Form' sub-heading allows you to customise the question, progress bar and organisation options on your form.
Question
Show Question No.: Check or uncheck this box to show the forms question numbers that appear next to the question. We recommend you disable the question numbers for a better aesthetic for your form.
Form Font Family: Edit the form font from the default drop-down list provided. The set font selected here will be set for all elements on your form.
Question Font: Edit the question font settings by enlarging the text and making it bold to make your questions stand out from the rest of the form.
Question Color: Edit the question text colour to match your forms theme.
Background Color: Edit the question background colour to make your questions stand out from the rest of the form.
Response Font: Edit the question response (the text displayed as the options in a question) font size.
Response Color: Edit the question response text colour to match your forms theme.
Question Highlight1: Edit the heading row background colour for a 'Survey' or 'Ranked' question type.
Question Highlight2: Edit the body rows background colour for a 'Survey' or 'Ranked' question type.
Progress Bar
Note! The progress bar only works on multi-page forms.
Show Progress Bar: Check or uncheck this box to show the forms progress bar displayed below the title. We recommend you enable this option if your form is multi-page.
Bar Color: Edit the progress bar colour to match your forms theme.
Bar Progress Display: Edit the progress bar display to either 'Percentage' (percentage of the form completed) or 'Pages' (number of pages of the total number completed). The 'Pages' option will only work if your form is multi-page.
Section
The 'Section' text displays directly above the question it is attached to. If two sections are identical within the same page, only the first instance is displayed.
Section Text Color: Edit the section text colour to match your theme.
Section Font: Edit the section text font settings by enlarging the text and making it bold.
Dividers
A 'Divider' can be useful in separating distinct sections of your form. It is displayed above your question, and below the section text.
Divider Size: Edit the divider line size by enlarging the line to make it more thick.
Divider Color: Edit the divider line colour to match your forms theme.
Buttons
The 'Buttons' sub-heading allows you to edit the look and text within the default 'Send Form', 'Next' and 'Previous' buttons.
Button size: Edit the button (used to 'Send Form' or go to 'Next' page) size. The 'Block' option creates a wider block button
alignment: Edit the positioning of the forms buttons and where you would like it to be displayed.
Send Button Text: Edit the 'Send' (submit) button text to match your forms theme.
Send Button Color: Edit the 'Send' (submit) buttons colour.
Next Button Text: Edit the 'Next' button text to match your forms theme.
Next Button Color: Edit the 'Send' buttons colour.
Prev Button Text: Edit the 'Previous' button text to match your forms theme.
Finish Button Text: Edit the 'Finish' button text to match your forms theme. This button is displayed after the completion action.
Footer
The 'Footer' sub-heading allows you to customise the text at the bottom of your form. This can be used to include your email address so respondents can directly contact you regarding any queries.
Show Footer Text: Check or uncheck this box to show the footer text appearing centered at the bottom of the form. We recommend you display the footer text to provide a contact point for your respondents.
Owner Name: Edit the form owner name to be displayed within the footer.
Owner Email: Edit the form owner email to be hyperlinked to the owner name. When the name is clicked, a blank email will be automatically composed to the contact email provided.
Link Colour: Edit the hyperlink text colour to match your forms theme.
Themes
The 'Themes' sub-heading allows you to customise the theme of your form. You can save the current settings you have created to become a new theme, or you can upload a pre-made or pre-set account theme.
Apply a Theme: Edit the theme of your form by applying one of the global themes on your account or choose from one of your own themes.
Save your settings to a Theme: Edit an existing theme by updating it with your current form appearance settings. To create a new theme with your current form appearance settings, click in the input box, enter the name you want to give your new theme, then click the 'Save' button.
Delete on of your Themes: Delete an existing theme from your account.