Create a completely custom visual theme for Fillin Forge forms.
Overriding the base styles
The front-end stylesheet of Fillin Forge defines no CSS custom properties, so a theme overrides the classes. Put the form wrapper in front of the selector to win over the plugin stylesheet:
css
.formforge-wrap .formforge-submit-btn {
background: #10B981;
border-radius: 12px;
}
.formforge-wrap .formforge-input,
.formforge-wrap .formforge-textarea,
.formforge-wrap .formforge-select {
border-color: #D1D5DB;
border-radius: 12px;
}
.formforge-wrap .formforge-label {
color: #374151;
}Full Dark Theme
css
#formforge-42 .formforge-form {
background: #1a1a2e;
padding: 32px;
border-radius: 16px;
}
#formforge-42 .formforge-label {
color: #e2e8f0;
font-weight: 600;
}
#formforge-42 .formforge-input,
#formforge-42 .formforge-textarea,
#formforge-42 .formforge-select {
background: #16213e;
border: 1.5px solid #334155;
color: #f8fafc;
border-radius: 10px;
padding: 10px 14px;
}
#formforge-42 .formforge-input:focus {
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
#formforge-42 .formforge-submit-btn {
background: linear-gradient(135deg, #3B82F6, #6366F1);
color: #fff;
border: none;
border-radius: 14px;
padding: 12px 32px;
font-weight: 600;
}
#formforge-42 .formforge-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}Compact Side-by-Side Layout
css
.compact-layout .formforge-step {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.compact-layout .formforge-field--textarea,
.compact-layout .formforge-field--checkbox {
grid-column: 1 / -1;
}
@media (max-width: 640px) {
.compact-layout .formforge-step {
grid-template-columns: 1fr;
}
}Applying a Theme via Form Settings
The fields sit in a .formforge-step container inside the form, which is why the compact layout above sets the grid there. The css_class setting has no input in the builder; set it with the REST API (PUT /formforge/v1/forms/{id}) or FORMFORGE_Form_Builder::instance()->update(). Each field has a CSS classes input in its settings.
json
{
"settings": {
"css_class": "my-dark-form compact-layout"
}
}Output:
html
<div class="formforge-wrap my-dark-form compact-layout" id="formforge-42" data-form-id="42">—