Custom CSS

Custom CSS gives you complete control over the appearance of your forms.

While QuipForm includes built-in themes and customization options, Custom CSS allows you to apply your own styles to create a fully branded experience that matches your website, product, or design system.

Why Use Custom CSS?

Custom CSS allows you to:

• Match your brand guidelines
• Customize colors and typography
• Adjust spacing and layouts
• Create unique form designs
• Fine-tune the appearance of form elements
• Maintain visual consistency across your website

This is especially useful for agencies, businesses, and teams that want forms to blend seamlessly into their existing brand experience.

Accessing Custom CSS

To add custom styles:

1. Open your form.
2. Navigate to Customize.
3. Open the Custom CSS section.
4. Enter your CSS code.
5. Save your changes.
6. Preview the form before publishing.

Changes are applied immediately to the form preview.

Example Customizations

Change Font Family

body {
  font-family: Inter, sans-serif;
}

Increase Form Width

.form-container {
  max-width: 900px;
}

Customize Button Appearance

button {
  border-radius: 12px;
}

Adjust Heading Styles

h1 {
  font-size: 2.5rem;
}

These examples are intended as starting points and can be adapted to match your design requirements.

Common Use Cases

Match Your Website Design

Apply the same typography, spacing, and visual styles used across your website.

Create Branded Client Forms

Agencies can build forms that align perfectly with client branding.

Improve Visual Hierarchy

Adjust heading sizes, spacing, and styling to improve readability.

Customize Form Components

Modify the appearance of:

• Buttons
• Inputs
• Labels
• Progress indicators
• Page containers
• Media blocks

Best Practices

Keep Styles Focused

Only add styles that improve the user experience or align with your brand.

Avoid unnecessary overrides that may make forms harder to use.

Test Across Devices

Always review custom styling on:

• Desktop
• Mobile
• Tablet

Different screen sizes can affect layouts and spacing.

Prioritize Readability

Ensure:

• Text remains easy to read
• Contrast is sufficient
• Buttons remain visible
• Interactive elements are accessible

Preview Before Publishing

Always review changes before sharing forms publicly.

Potential Risks

Because Custom CSS overrides default styling, poorly written rules may:

• Break layouts
• Hide content
• Reduce accessibility
• Create inconsistent mobile experiences

Use caution when applying large-scale changes.

Troubleshooting

My Styles Are Not Applying

Check that:

• The CSS syntax is valid.
• Changes have been saved.
• There are no conflicting rules.
• The selector targets the correct element.

The Form Layout Looks Broken

Review recently added CSS and remove any rules affecting:

• Width
• Positioning
• Display properties
• Overflow settings

Test changes incrementally to identify the issue.

Mobile Layout Issues

Some desktop-focused styles may not work well on smaller screens.

Review your form on multiple devices and adjust styles as needed.

Text Is Hard to Read

Verify:

• Font sizes are large enough.
• Colors provide adequate contrast.
• Spacing remains comfortable.

Recommendations

Before using Custom CSS:

1. Start with QuipForm's built-in customization options.
2. Add only the CSS needed to achieve your desired design.
3. Test thoroughly across devices.
4. Review the published form experience.

Related Articles

• Cover Images & Logos
• Form Themes
• Custom Domains
• Social Preview Images