The Fullscreen Forms extension transforms standard forms into a Typeform-style one-question-at-a-time interface. Each field group is displayed as a full-screen step with navigation and a progress bar.
Enabling Fullscreen Mode
- Edit your form.
- Go to the Settings tab.
- Set Display Mode to Fullscreen.
- Configure the fullscreen options.
- Save the form.
Configuration Options
Theme
Choose between Light and Dark themes. The light theme uses a white background with dark text. The dark theme uses a dark background with light text.
Setting: fullscreen_theme
Options: light, dark
Show Progress Bar
When enabled, a progress bar at the top of the screen shows how far the user has progressed through the form.
Setting: fullscreen_show_progress
Default: Enabled
Animation
The transition animation between questions.
Setting: fullscreen_animation
Options: slide, fade, scale
Page Title
A custom page title for the fullscreen form page. If left empty, the form title is used.
Setting: fullscreen_page_title
External CSS
URL to a custom stylesheet to load on the fullscreen form page. Use this for branding or advanced styling.
Setting: fullscreen_external_css
External JavaScript
URL to a custom JavaScript file to load on the fullscreen form page.
Setting: fullscreen_external_js
How It Works
When a form is set to fullscreen mode, the extension takes over the rendering. Instead of displaying all fields at once, the form markup is split into steps. Each step is displayed as a full-viewport section.
Users navigate between steps using:
- A “Next” button to advance
- A “Back” button to return to the previous step
- Keyboard navigation (Enter to advance)
The final step shows the submit button. When submitted, the form processes through the normal AJAX handler.
Structuring Your Form for Fullscreen
The extension splits your form into steps based on your HTML structure. Each top-level block in your form markup becomes a step. Wrap related fields in container elements:
<div>
<label for="name">What's your name?</label>
<input type="text" name="name" id="name" placeholder="Type your name..." />
</div>
<div>
<label for="email">What's your email?</label>
<input type="email" name="email" id="email" placeholder="name@example.com" />
</div>
<div>
<label for="message">What would you like to say?</label>
<textarea name="message" id="message" rows="4" placeholder="Type your message..."></textarea>
</div>
<div>
<button type="submit">Send</button>
</div>Each <div> becomes one full-screen step.
Customization Hooks
Two hooks let you inject content into the fullscreen page:
cf_fullscreen_head– Fires in the<head>section. Use this to add meta tags, styles, or scripts.cf_fullscreen_footer– Fires before the closing</body>tag. Use this for tracking scripts or additional markup.
Normal vs. Fullscreen
When the display mode is set to “normal” (the default), the form renders inline on the page as usual. Switching to “fullscreen” changes the rendering but does not affect form processing, validation, actions, or any other behavior. The same form works in both modes.
Assets
Fullscreen forms load their own dedicated CSS (fullscreen.css) and JavaScript (fullscreen.js) files. These are only loaded when a form is rendered in fullscreen mode.