Formaloo already gives you plenty of built-in styling and layout options – often enough to publish a clean, professional form without writing code.
When you need more precision, Custom CSS and Custom JavaScript let you style and control specific parts of your form – like highlighting one field, auto-focusing an input, or triggering an animation when a question appears.
ℹ️ Included in: all paid plans
To let you customize any field with precision, Formaloo lets you target each specific field using a Field ID. This means you can apply styles or behavior to exactly the field you want – even on multi‑page or one‑question‑at‑a‑time (1QAT) forms where questions appear step by step.
💡 Looking for general styling first?
Check out the in-built Design options to learn how to tweak colors, fonts, spacing, and layout using built‑in design options,
Check out commonly used CSS snippets for quick examples,
Learn which supported classnames you can use to style broader parts of your form.
ℹ️ If you only need to style the whole form or a group of fields, supported classnames may be enough. If you need to style or control specific fields – field-level targeting is the best option.
In the sections below, you’ll learn how Field IDs work, how to use them in Custom CSS and Custom JavaScript, and how to run code when fields become visible.
1. Field IDs: How to set the Field ID (or find the field slug)
Every field on your form has a stable ID exposed in the HTML. You use this ID in your Custom CSS and Custom JS to target that field without relying on fragile selectors or DOM structure.
If you set a Field ID (
alias) for a field in the form editor, that value is used:
Otherwise, the field's internal
slugis used:
So you can always rely on one consistent value per field.
Special IDs
Welcome page:
welcome_pageSuccess page/Ending page: Uses the same logic as other fields (alias or slug of the ending page field):
2. Using field IDs in Custom CSS
Use the attribute selector [data-field-id="your_field_id"] in your Custom CSS.
Examples:
Make a specific field's label bold:
[data-field-id="email"] label {
font-weight: bold;
}Add a border to a specific field:
[data-field-id="phone_number"] {
border: 2px solid #0066cc; border-radius: 8px; padding: 12px;
}Style the welcome page:
[data-field-id="welcome_page"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;
}
☝️ Replace "email", "phone_number", or "welcome_page" with the actual Field ID (or slug) of the field you want to target.
3. Using field IDs in Custom JS
Use document.querySelector('[data-field-id="your_field_id"]') to get the field's DOM element.
Examples:
Get a field element:
const emailField = document.querySelector('[data-field-id="email"]'); if (emailField) {
emailField.classList.add('highlight');
}Focus a field when the form loads:
const firstField = document.querySelector('[data-field-id="full_name"]');
if (firstField) {
const input = firstField.querySelector('input, textarea, select');
if (input) input.focus();
}
☝️ Always check that the element exists (e.g. if (emailField)) before using it. On multi-page or 1QAT forms, a field might not be in the DOM until the user reaches that page – use the Field visibility event (below) for those cases.
4. Field visibility event: Running JS when a field appears
Your Custom JS runs once when the form loads. On multi-page or One-Question-at-a-Time forms, fields on later pages are not in the DOM at load time. If you use document.querySelector('[data-field-id="..."]') in your initial script, it will be null for those fields until the user navigates to them.
The field visibility event lets you run code exactly when a field becomes visible (e.g. when the user goes to the next page or next question).
Event name
formaloo:field-visible
When it fires
When the user navigates to a new page (multi-page form) and a field on that page becomes visible.
When the user moves to the next question (1QAT form) and that question's field becomes visible.
So you can safely run your code for a field the moment it appears on screen.
How to listen for it
document.addEventListener('formaloo:field-visible', function (event) {
var fieldId = event.detail.fieldId;
var fieldElement = event.detail.fieldElement;
// Run your code for this field
if (fieldId === 'newsletter_signup') { fieldElement.classList.add('animate-in');
}
});
Event details
Property | Description |
event.detail.fieldId | The field's ID (same value as data-field-id). |
event.detail.fieldElement | The DOM element of the field (same as the one you'd get with document.querySelector('[data-field-id="..."]')). |
Example: Run code when a specific field becomes visible
document.addEventListener('formaloo:field-visible', function (event) {
if (event.detail.fieldId === 'feedback_comment') {
var el = event.detail.fieldElement;
var textarea = el.querySelector('textarea');
if (textarea) {
textarea.placeholder = 'Tell us what you think...';
textarea.focus();
}
}
});
Example: Run code for every field when it appears
document.addEventListener('formaloo:field-visible', function (event) {
console.log('Field visible:', event.detail.fieldId);
// Optional: add a class, animate, or run analytics
event.detail.fieldElement.classList.add('field-visible');
});
5. Quick reference
Goal | What to use |
Style a specific field in Custom CSS | [data-field-id="your_field_id"] { ... } |
Get a field's element in Custom JS (when it's already on the page) | document.querySelector('[data-field-id="your_field_id"]') |
Run JS when a field appears (multi-page / 1QAT) | document.addEventListener('formaloo:field-visible', ...) and use event.detail.fieldId and event.detail.fieldElement |
Style welcome page | [data-field-id="welcome_page"] { ... } |
Use Field ID in the form editor to choose a readable, stable ID for your fields so your Custom CSS and JS are easy to write and maintain.
6. Frequently asked questions
What is a Field ID in Formaloo?
A Field ID is the identifier Formaloo adds to each field in the form HTML (as data-field-id). You can use it to target that specific field with CSS or JavaScript.
Where does the Field ID come from?
If you set a Field ID (alias) in the form editor, that value is used. If you don’t, Formaloo uses the field’s internal slug.
When should I use field IDs instead of class names?
Use field IDs when you want to style or control one specific field. Use supported class names when you want to style a broader part of the form or multiple fields consistently.
Does this work on multi-page and 1QAT forms?
Yes. Field IDs work across all form types. For JavaScript, fields that appear later won’t be in the DOM at initial load – use the formaloo:field-visible event to run code when the field becomes visible.
Why is document.querySelector(...) returning null?
On multi-page and 1QAT forms, the field might not be rendered yet. Listen for formaloo:field-visible and run your code when the field appears.
Can I target the welcome or success page?
Yes. The welcome page uses welcome_page. The success page follows the same logic as other fields (its alias or slug).
Will Custom CSS/JS affect stored responses?
No. Custom CSS and JavaScript change how the form looks and behaves during completion. They don’t change how responses are stored – unless your JavaScript explicitly modifies values before submission.
Is this feature available on all plans?
Targeting fields by Field ID in Custom CSS and Custom JavaScript is available on all paid plans.