How to Add Custom CSS to Forms and Surveys

Want to make your enrollment forms and parent surveys match your center's branding? You can customize how they look using Custom CSS. Here's how.

Where to Add Custom CSS

Option 1: Inside the Form or Survey (Recommended)

1. Go to Sites → Form Builder (or Survey Builder)
2. Open your form
3. Click the Styles tab → Advanced Section → Custom CSS
4. Paste your CSS code
5. Click Save, then Publish

This method updates how the form looks directly inside the form or survey itself.

Pro Tip: For basic spacing above your form or survey, use the built-in top-margin controls in Styles → Layout before adding Custom CSS. Save CSS for advanced visual tweaks that aren't available in the Layout panel.

Option 2: On the Landing Page

If your form is embedded on a landing page:

1. Open your Landing Page in the Builder
2. Go to Settings → Custom CSS
3. Add CSS here to style the container around the form (like margins, padding, or background color)

⚠ Important: You cannot style form fields or buttons here because the form loads inside an iframe. Use Option 1 for field-level styling.

Basic CSS Examples

Style Input Fields

input, textarea, select {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}

input:focus, textarea:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 4px rgba(124, 58, 237, 0.3);
}

Style the Submit Button

button[type="submit"] {
  background-color: #7C3AED;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #6931d4;
}

Style Labels and Error Messages

label {
  font-weight: 600;
  color: #111827;
}

.hl-error, .error-message {
  color: #DC2626;
  font-size: 14px;
}

Style Survey Progress Bar

.hl-progress .fill {
  background-color: #7C3AED;
  transition: width 0.3s ease;
}

Make Forms Mobile-Friendly

@media (max-width: 480px) {
  form {
    padding: 0 10px;
  }
  button[type="submit"] {
    width: 100%;
  }
}

Styling Survey Navigation Buttons

You can customize the Previous, Next, and Submit buttons in multi-step surveys:

.ghl-footer-preview .ghl-submit-btn {
  background-color: #28A745 !important;
  color: #FFFFFF !important;
}

.ghl-footer-preview .ghl-footer-next {
  background-color: #28A745 !important;
  color: #FFFFFF !important;
}

.ghl-footer-preview .ghl-footer-back {
  background-color: #28A745 !important;
  color: #FFFFFF !important;
}

Change #28A745 to match your center's brand colors.

Troubleshooting

CSS not working?

• Make sure it's added in the Custom CSS area inside the Form/Survey Builder
• Click Publish, then refresh your browser or open in Incognito mode
• If the form is embedded on a page, remember: page-level CSS won't affect the inside of the form (because of the iframe)

Quick Tips

• Always Save and Publish after making edits
• Use Inspect (right-click → Inspect) to find element class names
• Avoid overusing !important
• Check how your form looks on both desktop and mobile

Copy-and-Paste Template

Need a quick start? Paste this into your Form's Custom CSS box:

input, textarea, select {
  width: 100%;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 10px;
}

label {
  font-weight: 600;
  color: #111827;
}

button[type="submit"] {
  background: #7C3AED;
  color: #fff;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #6931d4;
}

You're done! Your enrollment forms and parent surveys will now match your center's branding.