Interactive Elements
Interactive elements let visitors do things on your page — fill in forms, navigate tabs, expand accordions, browse image sliders, and open modals. Site Designer inserts these as ready-to-use components with the required HTML, CSS, and JavaScript already wired up.
Forms
A Form element creates a <form> container with configurable action, method, and encoding attributes. Inside the form you place individual field elements.
Available form controls
| Element | HTML | Use for |
|---|---|---|
| Text input | <input type="text"> | Single-line text (name, city) |
| Email input | <input type="email"> | Email addresses (browser validates format) |
| Password input | <input type="password"> | Passwords (masked input) |
| Number input | <input type="number"> | Numeric values with optional min/max |
| Textarea | <textarea> | Multi-line text (messages, descriptions) |
| Select | <select> | Dropdown with options |
| Checkbox | <input type="checkbox"> | Boolean toggle (agree to terms) |
| Radio button | <input type="radio"> | One choice from a group |
| File upload | <input type="file"> | File selection |
| Submit button | <button type="submit"> | Submits the form |
Always pair each input with a <label> element linked via matching for and id attributes — Site Designer does this automatically when you insert a labeled field.
Form accessibility
Site Designer sets for/id pairs on labels and inputs automatically. Add aria-describedby pointing to error or hint text by entering the hint element’s ID in the Described by field in the Content pane.
Sliders / Carousels
The Slider element creates a carousel component — a series of slides that visitors can advance through by clicking arrows or indicator dots. Site Designer inserts the complete HTML structure and a lightweight JavaScript carousel library.
Insert a Slider from the Elements panel, then add slides by clicking + Add Slide in the Content pane. Each slide can contain any mix of text, images, and other elements. Configure auto-play, transition speed, and indicator style in the Content pane.
Tabs
The Tabs element creates a tabbed interface — a row of tab buttons and associated content panels. Only one panel is visible at a time; clicking a tab shows its panel and hides the rest.
-
Insert the Tabs element
Drag a Tabs element from the Elements panel. A default set of three tabs appears.
-
Add or remove tabs
Click + Add Tab in the Content pane to add a new tab, or click the trash icon next to any tab to remove it.
-
Edit tab labels
Double-click any tab button on the canvas to rename it.
-
Add content to each panel
Click a tab to activate its panel, then drag any element into the panel area to add content.
Tabs in Site Designer are keyboard-accessible by default — users can navigate between tabs with Arrow keys after focusing the tab list.
Accordion
The Accordion element creates a stack of expandable sections — each has a clickable header and a collapsible content panel. Clicking the header toggles the panel open or closed.
Accordions work well for FAQ sections, feature lists, and long-form content that you want to make scannable. Insert an Accordion from the Elements panel and add items via the Content pane. Each item has a title (the clickable header) and a body (the expandable content area, which can hold any elements).
Framework-specific accordions: Bootstrap and Foundation each ship their own accordion component with unique class names and JavaScript. When your project uses one of these frameworks, Site Designer inserts the correct framework accordion automatically.
Modals
The Modal element creates a dialog overlay — a panel that appears on top of the page, usually triggered by a button click. The rest of the page is dimmed and non-interactive while the modal is open.
Modals are appropriate for: image lightboxes, confirmation dialogs, video embeds, lead-capture forms, and cookie consent notices.
Accessibility requirements for modals:
- The modal container must have
role="dialog"andaria-modal="true"(set automatically by Site Designer) - An
aria-labelledbyattribute must point to the modal title’s ID - Focus must be trapped inside the modal while it is open
- Pressing Esc must close the modal
Site Designer applies all of these automatically. Do not remove these attributes when customizing the modal HTML.
Custom JavaScript for non-framework projects
If your project does not use Foundation or Bootstrap, interactive components (tabs, accordions, modals) use a lightweight vanilla JavaScript implementation included in the project export. You can customize this behavior by editing the component’s initialization options in the JavaScript pane in Site Designer, or by adding your own script to override the defaults.
