How to Add Custom CSS to Sparkforge Forms, Surveys, and Quizzes

You can change how Sparkforge forms, surveys, and quizzes look with custom CSS. Where you paste the code matters: only CSS inside the form (or survey/quiz) itself reaches the fields, because forms render in an iframe.

Where to add custom CSS

Option 1: Inside the form, survey, or quiz (recommended)

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

This is the only place CSS reaches the fields, labels, and buttons. For top spacing, use the built-in margin controls in Styles → Layout first — reserve CSS for tweaks the Layout panel does not cover.

Option 2: On the funnel or website page

Open the funnel or website in the builder, then go to Settings → Custom CSS. CSS here only styles the container around the form (margins, padding, background). It cannot reach fields or buttons because the form loads in an iframe.

Option 3: External sites (WordPress, etc.)

Same rule as Option 2 — you can style the iframe container, but not the form fields inside.

Useful CSS examples

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);
}

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; }

Labels and errors

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

Survey or quiz progress bar

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

Mobile-friendly styling

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

Survey navigation buttons

Style the Previous, Next, and Submit buttons in surveys with these selectors. Replace #28A745 with your brand color.

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