PLATFORM WORKFLOW

Task Description: Styling configurations for Forms and Surveys

Objective: To show Organization Admins permission level and Users how to style forms and surveys

Organization: All

System Permission Level: System Admin/User and Organization Admin/User 


TABLE OF CONTENTS


The Styling tab in the Form and Survey Builder lets you customize the look and feel of your form or survey so it matches your organization’s branding and is easy for users to read and complete. In this workflow, we’ll take a closer look at every styling option available and how to use them effectively.

These styling tools work the same way for both forms and surveys, and any changes you make will only apply to the specific form or survey you’re editing.

Important: Be sure to save your updates regularly while styling your form or survey. This helps ensure your progress is protected if something unexpected happens.


The Styling tab is organized into five folders:

  1. Page Layout: Controls structure and spacing.
  2. Form Style: Changes the appearance of the form container.
  3. Field Styles: Adjusts how your input fields look.
  4. Custom CSS: Allows advanced customization with your own code.
  5. Button Style: Customizes the look of form and survey buttons.

In the next steps, we’ll walk through each section in detail so you can create a form or survey that’s both functional and visually appealing.


Page Layout

Background

The Background settings let you customize the look and feel of the space behind your form or survey. This is not the form’s background itself, but the area surrounding it on the page.

Type 

The Type dropdown lets you choose the overall style of your background. You can select Solid for a single-color fill, Linear for a smooth color transition along a straight line, or Radial for a color transition radiating outward from a central point. The following fields will appear based on each type:

  • Solid: Color only (Position and Rotation disabled). 
  • Linear: Color 1, Position 1, Color 2, Position 2, Rotation. 
  • Radial: Color 1, Position 1, Color 2, Position 2 (Rotation disabled). 


Color Fields 

Depending on the type you select, you’ll see one or two Color fields: 

  • Solid: Only 1 Color appears.
  • Linear and Radial: You’ll see Color 1 and Color 2 for the two gradient colors. 

Each Color field includes a color picker where you can:

  • Click anywhere on the color canvas to choose a shade.
  • Use the hue slider (rainbow bar) to explore different color families.
  • Adjust transparency with the opacity slider.
  • Switch between RGBA, HSLA, and HEX formats if you prefer specific color codes.

Position 

The Position dropdown controls where a color starts and ends in the gradient:

  • Values range from 0% (start) to 100% (end) in 10% steps.
  • In Linear gradients, 0% is at one end of the gradient and 100% at the other, but the exact location depends on the rotation setting.
  • In Radial gradients, 0% starts at the center and 100% is farthest from the center.

Rotation (Linear only)

The Rotation dropdown changes the direction of a linear gradient.

  • 0° – First color at the bottom, second color at the top.
  • 90° – First color on the left, second color on the right.
  • 180° – First color at the top, second color at the bottom.
  • 45°, 135°, etc. – Angled blends between these directions.
    Rotation values increase clockwise.


Background Image

Controls the image used as the page background.

Choose File

  • Select an image to upload as the background from your device.

Background Repeat

  • Toggle on (blue) to repeat the background image if it doesn’t fully fill the space.
  • Toggle off (grey) to display the image only once.

Image Fill

Controls how the image scales within the space:

  • Auto: Keeps the image’s original dimensions.
  • Cover: Scales the image to completely cover the background area (cropping may occur).
  • Contain: Scales the image to fit entirely within the background area (may leave empty space).

Padding

The Padding settings control the amount of space between your form or survey content and its surrounding container. Adjusting padding can help create breathing room, improve visual balance, and ensure the form feels well-spaced within the page.

Padding is divided into four individual fields for each side of the container:

  • Top: Space above the form/survey content.
  • Bottom: Space below the form/survey content.
  • Left: Space to the left of the form/survey content.
  • Right: Space to the right of the form/survey content.

Each field allows you to:

  • Manually enter a value to set a precise padding size.
  • Use the up/down arrows beside the field to incrementally adjust the value.


Form Layout Options

These settings let you adjust how your form fields are arranged and labeled, giving you control over both the layout and the visibility of labels.

Two Column Form

  • Toggle on (blue) to arranged fields in two columns.
  • Toggle off (grey) to display all fields in a single column.

Field Label

  • Toggle on (blue) to display labels above each field.
  • Toggle off (grey) to hide labels. 


Form Style

Background

Controls the background color for the form/survey. See Page Layout → Background for detailed instructions.

  • Type: Select between Solid, Linear or Gradient.
  • Color: Pick the color(s) for the background.
  • Position (Linear and Radial): Controls where a color starts and ends in the gradient. 
  • Rotation (Linear only): Adjust gradient angle.


Background Image

Adds a background image to the form/survey. See Page Layout → Background Image for detailed instructions.

  • Choose File: Upload an image file.
  • Background Repeat: Toggle on (blue) to repeat image, off (grey) for no repeat.
  • Image Fill: Select Auto, Cover, or Contain for scaling and fit.


Border

Controls the outline style and shape of the form/survey.

Border Color 

The Border Color field lets you choose the color of the form’s or survey’s border. The field includes a color picker where you can:

  • Use the color picker to select a shade.
  • Adjust hue using the rainbow slider.
  • Change transparency with the opacity slider.
  • Switch between RGBA, HSLA, and HEX formats for precise color values.

Border Type 

The Border Type dropdown lets you choose the style of the form’s or survey’s border.

  • Dotted: A series of round dots.
  • Dashed: Short line segments with gaps.
  • Solid: A continuous line.
  • Double: Two solid lines separated by space.
  • Groove: A carved, 3D groove effect.
  • Ridge: A raised, 3D ridge effect.

Border Size 

The Border Size field controls the thickness of the border.

  • Manually enter a numeric value to set a precise border size.
  • Use the up/down arrows beside the field to incrementally adjust the value.

Corner Radius 

The Corner Radius field adjusts how rounded the form’s corners appear. Higher values create more rounded edges.

  • Manually enter a numeric value to set a precise corner radius.
  • Use the up/down arrows beside the field to incrementally adjust the value.


Width

The Width field controls how wide the form appears.

  • Manually enter a numeric value to set a precise width.
  • Use the up/down arrows to increase or decrease the value.
  • For the dropdown, select Pixel for a fixed width or Percentage for a width relative to the container size.


Box Shadow

The Box Shadow settings let you add a shadow effect around the form or survey.

Color

The Color field lets you choose the color of the shadow around the form/survey container. The field includes a color picker where you can:

  • Use the color picker to select a shade.
  • Adjust hue using the rainbow slider.
  • Change transparency with the opacity slider.
  • Switch between RGBA, HSLA, and HEX formats for precise color values.

X-Axis

Controls the horizontal offset of the shadow. Enter a value or use the up/down arrows to adjust.

Y-Axis

Controls the vertical offset of the shadow. Enter a value or use the up/down arrows to adjust.

Blur

Adjusts how soft or sharp the shadow edges appear. Enter a value or use the up/down arrows.

Spread

Controls how much the shadow expands or contracts. Enter a value or use the up/down arrows.


Field Styles

Label Styles

Controls the appearance of labels displayed above form/survey fields.

Font Type

Sets the typeface used for field labels. Select from the available font options in the dropdown menu.

Font Color

Determines the color of the field labels. Click the color picker to choose a custom color or enter a HEX/RGB value.

Font Size

Adjusts the size of the field label text. Enter a value manually or use the up/down arrows to adjust incrementally.

Font Weight

Controls the thickness of the field label text. Select a value between 100 (thin) and 900 (extra bold) from the dropdown.


Text Shadow

The Text Shadow settings let you add a shadow effect around the labels displayed above the form/survey.

Color

The Color field lets you choose the color of the shadow around the labels. Click on the color picker to: 

  • Use the color picker to select a shade.
  • Adjust hue using the rainbow slider.
  • Change transparency with the opacity slider.
  • Switch between RGBA, HSLA, and HEX formats for precise color values.

X-Axis

Controls the horizontal offset of the shadow. Enter a value or use the up/down arrows to adjust.

Y-Axis

Controls the vertical offset of the shadow. Enter a value or use the up/down arrows to adjust.

Blur

Adjusts how soft or sharp the shadow edges appear. Enter a value or use the up/down arrows.

Alignment

Determines how the text is aligned within its field. Select Left, Center, or Right using the segmented control buttons.


Element Styles

The Element Styles settings control the borders, shapes, and corners of your fields. Adjusting these options helps create a consistent look, reinforce your design style, and ensure each field feels visually cohesive within the form.

Border Color 

Sets the color of the field’s border. Use the color picker or enter a HEX/RGB value.

Border Type

Lets you choose the style of the field’s border. Options include:

  • Dotted: A series of round dots.
  • Dashed: Short line segments with gaps.
  • Solid: A continuous line.
  • Double: Two solid lines separated by space.
  • Groove: A carved, 3D groove effect.
  • Ridge: A raised, 3D ridge effect.

Border Size 

Sets the thickness of the border. Enter a value manually or use the up/down arrows to adjust.

Corner Radius

Controls how rounded the corners of the field appear. Enter a value manually or use the up/down arrows to adjust.


Box Shadow

The Shadow Box settings control the drop shadow effect for your form/survey fields, adding depth and dimension to the design. 

Color 

Determines the color of the drop shadow effect. Click the color picker to choose a custom color or enter a HEX/RGB value.

X-Axis

Controls the horizontal offset of the shadow. Enter a value or use the up/down arrows to adjust.

Y-Axis

Controls the vertical offset of the shadow. Enter a value or use the up/down arrows to adjust.

Blur 

 Adjusts how soft or sharp the shadow edges appear. Enter a value or use the up/down arrows.

Spread 

Controls how much the shadow expands or contracts. Enter a value or use the up/down arrows.


Placeholder Style

The Placeholder Style settings control the appearance of placeholder text within your form fields, allowing you to adjust its visibility, readability, and overall design consistency.

Color 

Controls the color of the placeholder text. Click the color picker to choose a custom color or enter a HEX/RGB value.

Font Size

Controls the size of the placeholder text. Enter a value or use the up/down arrows to adjust.

Font Weight

Sets the thickness of the placeholder text, ranging from 100 (thin) to 900 (bold).


Custom CSS

The Custom CSS section allows you to apply your own styling rules directly to the form or survey using CSS code, giving you full control over advanced visual customization.

Class Name Dropdown

Lets you select a predefined class name. When selected, the class name is automatically inserted into the textbox.

CSS Code Textbox 

A space where you can manually enter or paste custom CSS code to style the form or survey elements.

Here are some ready-to-use CSS snippets for customizing your buttons:

Smooth fade on hover:

.ui-button:hover {
  background-color: #0056b3 !important;
}

Scale-up on hover:

.ui-button:hover {
  transform: scale(1.05); 
}


Button Style

Preview Box

Displays a real-time preview of the Previous, Next, and Submit buttons. Any changes made to the button’s appearance in this folder will immediately update in the preview, allowing you to see the results before applying them.

Button Type

The Button Type dropdown lets you choose the style of your buttons. Options include:

  • Text – Displays only text on the button.
  • Icon – Displays only an icon on the button.
  • Text and Icon – Displays both text and an icon on the button.

Previous Color

Type

The Type dropdown lets you choose the background style of your Previous button. You can select Solid for a single-color fill, Linear for a smooth color transition along a straight line, or Radial for a color transition radiating outward from a central point. The following fields will appear based on each type:

  • Solid: Color only (Position and Rotation disabled). 
  • Linear: Color 1, Position 1, Color 2, Position 2, Rotation. 
  • Radial: Color 1, Position 1, Color 2, Position 2 (Rotation disabled). 

Color

Depending on the type you select, you’ll see one or two Color fields: 

  • Solid: Only 1 Color appears.
  • Linear and Radial: You’ll see Color 1 and Color 2 for the two gradient colors. 

Each Color field includes a color picker where you can:

  • Click anywhere on the color canvas to choose a shade.
  • Use the hue slider (rainbow bar) to explore different color families.
  • Adjust transparency with the opacity slider.
  • Switch between RGBA, HSLA, and HEX formats if you prefer specific color codes.

Position 

The Position dropdown controls where a color starts and ends in the gradient:

  • Values range from 0% (start) to 100% (end) in 10% steps.
  • In Linear gradients, 0% is at one end of the gradient and 100% at the other, but the exact location depends on the rotation setting.
  • In Radial gradients, 0% starts at the center and 100% is farthest from the center.

Rotation (Linear only)

The Rotation dropdown changes the direction of a linear gradient.

  • 0° – First color at the bottom, second color at the top.
  • 90° – First color on the left, second color on the right.
  • 180° – First color at the top, second color at the bottom.
  • 45°, 135°, etc. – Angled blends between these directions.
     Rotation values increase clockwise.


Next and Submit Color

Controls the background color for the Next and Submit button. See Button Style → Previous Color for detailed instructions.

  • Type: Select between Solid, Linear or Gradient.
  • Color: Pick the color(s) for the background.
  • Position (Linear and Radial): Controls where a color starts and ends in the gradient. 
  • Rotation (Linear only): Adjust gradient angle.


Text Color

The Text Color field controls the color of the text and icons inside your buttons.

  • Click the color picker to choose a shade from the color canvas.
  • Use the hue slider to explore different color families.
  • Adjust transparency with the opacity slider.
  • Switch between RGBA, HSLA, or HEX formats if you want to enter a specific color code.


Button Label

The Button Label section controls the text that appears on your buttons. This section is only available if the button type is set to Text or Text and Icon. By default, the labels are “Prev,” “Next,” and “Submit.” To update them, enter new text in the corresponding textbox.


Button Border

Border Color 

The Border Color field lets you choose the color of the button’s border. The field includes a color picker where you can:

  • Use the color picker to select a shade.
  • Adjust hue using the rainbow slider.
  • Change transparency with the opacity slider.
  • Switch between RGBA, HSLA, and HEX formats for precise color values.

Border Type 

The Border Type dropdown lets you choose the style of the button’s border.

  • Dotted: A series of round dots.
  • Dashed: Short line segments with gaps.
  • Solid: A continuous line.
  • Double: Two solid lines separated by space.
  • Groove: A carved, 3D groove effect.
  • Ridge: A raised, 3D ridge effect.

Border Size 

The Border Size field controls the border thickness of the button.

  • Manually enter a numeric value to set a precise border size.
  • Use the up/down arrows beside the field to incrementally adjust the value.

Corner Radius 

The Corner Radius field adjusts how rounded the button’s corners appear. Higher values create more rounded edges.

  • Manually enter a numeric value to set a precise corner radius.
  • Use the up/down arrows beside the field to incrementally adjust the value.


Fonts

Font Type

Determines the typeface (style of lettering) used for your button text.

  • Click the dropdown to browse and select from the available font options.

Font Size 

Controls how large or small the button text appears.

  • Enter a numeric value directly into the field.
  • Or use the up/down arrows to increase or decrease the size incrementally.

Font Weight

Adjusts the thickness or boldness of the button text. Values range from 100 (thin) to 900 (bold).

  • Select the desired weight from the dropdown menu.


Padding

The Padding settings control the amount of space between the button label and the edges of the button. Padding is divided into four individual fields for each side of the button:

  • Top: Space above the button label.
  • Bottom: Space below the button label.
  • Left: Space to the left of the button label.
  • Right: Space to the right of the button label.

Each field allows you to:

  • Manually enter a value to set a precise padding size.
  • Use the up/down arrows beside the field to incrementally adjust the value.