Customize Form Styling

Qivra Form Builder allows you to customize the appearance of your forms to match your brand and store design. This guide covers all styling options available.

Accessing Form Styling

1. Open your form in the Form Builder
2. Click on the form background (not a field), or
3. Click the Settings icon in the toolbar
4. Navigate to the Styling section

Form-Level Styling

Font Settings

Control the typography of your form.

Setting	Description	Options
Font Family	Primary font	System fonts, Google Fonts
Font Size	Base text size	Small, Medium, Large, Custom
Line Height	Spacing between lines	1.0 - 2.0

Spacing & Padding

Control the internal spacing of your form.

Setting	Description
Form Padding	Space inside form borders
Field Spacing	Vertical space between fields
Section Spacing	Space around sections

Border & Corner

Customize the form container appearance.

Setting	Description	Options
Border Width	Thickness of form border	0px - 10px
Border Color	Color of the border	Color picker
Border Radius	Roundness of corners	0px - 30px

Background Options

Solid Color Background

1. Select Background Type: Solid
2. Choose a Background Color
3. Adjust opacity if needed

Gradient Background

1. Select Background Type: Gradient
2. Choose Start Color and End Color
3. Select Gradient Direction:
   • Linear (horizontal, vertical, diagonal)
   • Radial (center outward)

Image Background

1. Select Background Type: Image
2. Upload an image or enter URL
3. Configure image settings:

Setting	Options
Size	Cover, Contain, Auto
Position	Center, Top, Bottom, Left, Right
Repeat	No Repeat, Repeat, Repeat X/Y
Overlay	Add color overlay on image

Field Styling

Input Fields

Customize how text input fields appear.

Setting	Description
Background Color	Field background
Text Color	Text color inside field
Border Color	Border around field
Border Width	Border thickness
Border Radius	Corner roundness
Padding	Internal field spacing

Focus State

Style fields when users click into them.

Setting	Description
Focus Border Color	Border color when active
Focus Shadow	Glow effect around field

Error State

Style fields with validation errors.

Setting	Description
Error Border Color	Border color for errors
Error Text Color	Error message color

Button Styling

Submit Button

Customize the form submission button.

Setting	Description
Button Text	Custom button label
Background Color	Button fill color
Text Color	Button text color
Border Radius	Button corner roundness
Padding	Internal button spacing
Full Width	Stretch button to full form width

Hover State

Style the button when users hover over it.

Setting	Description
Hover Background	Color on hover
Hover Text Color	Text color on hover

Navigation Buttons

For multi-step forms, style Previous/Next buttons.

Button	Settings
Previous	Text, color, style
Next	Text, color, style

Label Styling

Field Labels

Customize how field labels appear.

Setting	Description
Label Color	Text color for labels
Label Size	Font size for labels
Label Weight	Bold, normal, light
Required Indicator	Style of asterisk (*)

Helper Text

Style the helper/description text below fields.

Setting	Description
Helper Color	Text color
Helper Size	Font size

Progress Indicator Styling

For multi-step forms, customize the progress display.

Setting	Description
Active Color	Current step color
Completed Color	Finished steps color
Inactive Color	Upcoming steps color
Text Color	Step label color

Color Scheme

Using Brand Colors

1. Navigate to Color Scheme settings
2. Set your primary brand colors:

Color	Usage
Primary	Buttons, links, highlights
Secondary	Accents, hover states
Background	Form background
Text	Primary text color
Border	Borders, dividers

Dark Mode Support

Forms can adapt to dark themes:

1. Enable Dark Mode Support
2. Set dark mode colors separately
3. Form automatically adapts to theme

Custom CSS

For advanced styling, add custom CSS.

Adding Custom CSS

1. Go to Advanced > Custom CSS
2. Enter your CSS rules
3. Preview changes in real-time

Common Custom CSS Examples

Rounded submit button:

.submit-button {
  border-radius: 50px;
  padding: 12px 40px;
}

Custom field focus effect:

.form-field:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

Centered form title:

.form-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

Responsive Styling

Mobile Adjustments

Forms automatically adapt to mobile screens, but you can customize:

Setting	Mobile Option
Font Size	Smaller on mobile
Padding	Reduced on mobile
Field Width	Always full width
Button Size	Larger touch target

Breakpoint Settings

Customize how forms respond to screen sizes:

1. Go to Responsive settings
2. Adjust settings for:
   • Desktop (> 1024px)
   • Tablet (768px - 1024px)
   • Mobile (< 768px)

Styling Best Practices

Consistency

• Match your store’s color scheme
• Use consistent spacing throughout
• Maintain brand fonts

Readability

• Ensure sufficient contrast
• Use readable font sizes (16px minimum)
• Don’t overcrowd fields

User Experience

• Make buttons clearly clickable
• Use focus states for navigation
• Provide clear error indication

Performance

• Optimize background images
• Avoid excessive animations
• Test on slower connections

Video Tutorial

Play

Related Docs

• Form Builder Interface
• Field Settings
• Display Form on Your Store