Background Styling

SureForms provides a comprehensive set of background styling options that allow users to customize the appearance of their forms with colors, gradients, and images. This guide outlines the available options and their functionalities.

1. Background Color

• Color Picker: Set a solid background color for the form.

2. Background Gradient

SureForms offers two gradient options: Basic and Advanced.

Basic Gradient

• Users can select two colors to create a gradient effect.
• Gradient types:
  • Linear Gradient: Allows setting different angles for the color transition.
  • Radial Gradient: Creates a circular gradient effect.

Advanced Gradient

• Provides more control over gradient positioning and transition effects.
• Users can set:
  • First color location: The position where the first color starts in the gradient.
  • Second color location: The position where the second color starts in the gradient.
  • Type (linear or Radial) : Defines the gradient type:
    • Linear: Colors transition in a straight line.
    • Radial: Colors spread outward from a central point.
  • Location 1: The starting point of the gradient,
  • Location 2: The ending point of the gradient.
  • Angle: In a linear gradient, this determines the direction (e.g., 0° is left to right, 90° is top to bottom).

3. Background Image

Users can upload and set an image as the background. The available options include:

• Upload Image: Select an image from the media library.
• Image Position: Adjust the image positioning. Left and Top
• Attachment:
  • Fixed: The background image stays in place while scrolling.
  • Scroll: The background image moves with the form.
• Repeat Options:
  • No Repeat: The image appears only once and does not repeat.
  • Repeat: The image repeats both horizontally and vertically, filling the entire background.
  • Repeat X: The image repeats only horizontally (left to right).
  • Repeat Y: The image repeats only vertically (top to bottom).
• Size Options:
  • Auto – The default setting. The image keeps its original dimensions and scales naturally based on the container size.
  • Cover – The image scales to completely cover the container while maintaining its aspect ratio. Some parts may be cropped.
  • Contain – The image scales to fit entirely within the container while maintaining its aspect ratio. It may leave empty space (gaps) if the container’s dimensions do not match the image’s aspect ratio.
  • Custom – Allows manual adjustments, width to control how the image is displayed.

Overlay Type

Users can apply an overlay to the background for enhanced styling.

• Color Overlay
  • Image Overlay Color: Adds a solid color overlay with adjustable opacity.
  • Overlay Opacity: Adjust transparency for a seamless design.

• Gradient Overlay
  • Gradient types:
    • Linear Gradient: Allows setting different angles for the color transition.
    • Radial Gradient: Creates a circular gradient effect.
    • Overlay Opacity: Adjust transparency for a seamless design.

• Advanced Gradient

• Provides more control over gradient positioning and transition effects.
• Users can set:
  • First color location: The position where the first color starts in the gradient.
  • Second color location: The position where the second color starts in the gradient.
  • Type (linear or Radial) : Defines the gradient type:
    • Linear: Colors transition in a straight line.
    • Radial: Colors spread outward from a central point.
  • Location 1: The starting point of the gradient,
  • Location 2: The ending point of the gradient.
  • Angle: In a linear gradient, this determines the direction (e.g., 0° is left to right, 90° is top to bottom).
  • Overlay Opacity: Adjust transparency for a seamless design.

• Image Overlay

• Upload Image: Select an image from the media library.
• Image Position: Adjust the image positioning. Left and Top
• Attachment:
  • Fixed: The background image stays in place while scrolling.
  • Scroll: The background image moves with the form.
• Blend Mode
  • Normal – The default mode where the top layer simply covers the bottom layer without any blending.
  • Multiply – Darkens the image by multiplying the pixel values of the top and bottom layers. White has no effect, while black remains black.
  • Screen – Lightens the image by inverting the colors, multiplying them, and inverting the result. Black has no effect, while white remains white.
  • Overlay – Combines Multiply and Screen modes based on brightness. Dark areas become darker, and light areas become lighter, increasing contrast.
  • Darken – Compares the pixels of both layers and keeps the darker one, discarding lighter pixels.
  • Lighten – Compares the pixels of both layers and keeps the lighter one, discarding darker pixels.
  • Color Dodge – Brightens the image by dividing the bottom layer by the inverse of the top layer. This results in an intense lightening effect.
  • Saturation – Applies the saturation level of the top layer while preserving the brightness and hue of the bottom layer.
  • Color – Transfers the hue and saturation of the top layer while keeping the brightness (luminance) of the bottom layer, commonly used for colorizing images.
• Repeat Options:
  • No Repeat: The image appears only once and does not repeat.
  • Repeat: The image repeats both horizontally and vertically, filling the entire background.
  • Repeat X: The image repeats only horizontally (left to right).
  • Repeat Y: The image repeats only vertically (top to bottom).
• Size Options:
  • Auto – The default setting. The image keeps its original dimensions and scales naturally based on the container size.
  • Cover – The image scales to completely cover the container while maintaining its aspect ratio. Some parts may be cropped.
  • Contain – The image scales to fit entirely within the container while maintaining its aspect ratio. It may leave empty space (gaps) if the container’s dimensions do not match the image’s aspect ratio.
  • Custom – Allows manual adjustments, width to control how the image is displayed.
• Overlay Opacity: Adjust transparency for a seamless design.

Preview & Final Adjustments

After applying the background settings, users can preview the form on the front end to ensure the desired appearance is achieved. Adjustments can be made as needed.