Customise Form Appearance

Note: This feature is available in SharpCloud versions v9.2.0323 and later

Overview

A form provides a simple way to capture information in your SharpCloud story. Its appearance can be customised to create a consistent style across all forms or a unique design for each one.

 

Customize the Form Appearance

To customise a form’s appearance, select Customise Appearance in the Manage Forms dialog (available from the Story Setup dropdown menu).

 

A new “Customise Appearance” dialog will now appear with 2 main tabs as shown below:

 

Multiple Forms

A few functions can apply to multiple forms:

Copy Style / Paste – Copy a style from one form and apply it to another using the Paste option. These controls are located in the bottom-left corner of the dialog box.

Reset – Restores the form to its default appearance (dark theme with predefined colours).

Apply / Apply to All Forms – After customising a form, you can either apply the style to the current form only or apply it to all forms in the story.

Note: You can identify which form is being customised by checking the dialog title and the form preview window.

 

Colours Tab

Theme: There are 3 options for the forms theme:

• dark theme (default)
• light theme
• use custom colours.

The following options on the colours tab are only available if “use custom colours” is selected as the theme of the form.

Background – Sets the background colour of the form.

Story Name – Sets the font colour of the story name displayed at the top of the form.

Text – Controls the colour of all general text not covered by other settings (e.g. form description and word count limit).

Form Name – Sets the font colour of the form name shown below the story name.

Input Background – Sets the background colour of input fields.

Input Border – Sets the border colour of input fields.

Input Labels – Sets the colour of field labels (display names configured in the Manage Forms dialog).

Input Text – Sets the colour of text entered into input fields.

Default Button – Sets the colour of buttons other than Submit or Update (e.g. image picker, Clear).

Default Button Text – Sets the text colour for buttons other than Submit or Update.

Update Button – Sets the colour of the Update button.

Update Button Text – Sets the text colour of the Update button.

Submit Button – Sets the colour of the Submit button.

Submit Button Text – Sets the text colour of the Submit button.

 

Images Tab

Header/Footer Images – Add images to the form’s header and footer by uploading an image or pasting one.

Header/Footer Image Alignment – Align header and footer images to the left, centre, or right.

Note: The header and footer can use different images and alignment settings.

Background Image – Add an image as the form’s background by uploading or pasting it.

Note: The maximum background image size is 150px (height) × 320px (width).

 

There are 3 options for the background image:

1. Show All (Default) – Maintains the image’s aspect ratio. This may leave empty space (borders) around the image.
2. Fill Space – Scales the image to fill the available space. This may crop parts of the image.
3. Stretch to Fit – Stretches the image to fit the form exactly. This may distort the image.