Demo TemplatesImproved in 5.17+
This settings page is read-only when Craft's allowAdminChanges setting is false.
Freeform includes demo templates you can install on your site to preview existing forms, compare formatting templates, explore submissions, and try customization examples.
In Freeform 5.17+, the demos feature refreshed navigation and styling, including Tailwind 4, Bootstrap 5, and daisyUI 5 layouts.
Installing the Demo Templates
Open Freeform → Settings → Demo Templates.
Enter an Install Path, or keep the default freeform-demo.
Click Install.
Visit your site's /freeform-demo/ URL, replacing freeform-demo with your chosen path.
The installer copies the bundled templates and assets and creates the routes needed by the demos.
With the default install path, the locations are:
| Item | Location |
|---|---|
| Twig templates | templates/freeform-demo/ |
| Public assets | assets/freeform-demo/ inside your site's public directory |
| Demo URL | https://example.com/freeform-demo/ |
Freeform creates the asset directory if it does not already exist. The installation page lists the files and routes it will install.
Exploring the Demos
Select a form and formatting template to preview your existing forms in different layouts.
| Section | Purpose |
|---|---|
| Forms | Preview forms using the bundled formatting templates. |
| Submissions | Explore examples of displaying submission data. |
| Custom | Preview a form using its assigned formatting template. |
| Extras | Try examples of custom rendering, AJAX behavior, and other template techniques. |
The installed Twig files provide working examples you can inspect and adapt for your own site.
For a quick styling or conditional-flow check inside the control panel, use the builder's Preview tab. Its sample-template selector does not change the saved template, and Preview does not submit forms. Use the installed demos or your site's embedded forms to test real submissions and integrations.
Having trouble with a form's appearance, behavior, or submission? See Troubleshooting Form Issues.
Updating or Reinstalling
After upgrading Freeform, reinstall the demos using the same Install Path to receive the latest demo files. The installer replaces existing demo files and adds any missing routes.
Back up any changes you have made to the installed demo files before reinstalling.
To remove the demos when you no longer need them, follow Removing Demo Templates.
Troubleshooting
If installation fails, check the error displayed on the installation page. Common causes include:
- The server cannot write to the Craft template directory or public asset directory.
- Your Craft configuration prevents administrative changes.
- Craft cannot save the required routes.
Resolve the relevant permissions or configuration issue, then retry installation. If automatic installation is unavailable, use the Manual Install instructions below.
Manual Install
These instructions use demo as the template folder, asset folder, and URL prefix.
Copy the Templates and Assets
Locate Freeform's bundled src/codepack/ directory. In the monorepo layout, it is located at:
vendor/solspace/craft-freeform/packages/plugin/src/codepack/
Copy its contents as follows:
| Bundled folder | Destination |
|---|---|
codepack/templates/ | Your Craft template directory, as templates/demo/ |
codepack/assets/ | Your public asset directory, as assets/demo/ |
Create the public assets directory if it does not already exist.
In the copied files, replace any %prefix% placeholders with demo. In particular, update the placeholder in templates/demo/_layout.twig so the navigation and asset URLs resolve correctly.
Add the Routes
Add the following entries to the array returned by config/routes.php, preserving any existing routes:
'demo/forms/<*:[^\/]+>' => ['template' => 'demo/forms'],
'demo/forms/<*:[^\/]+>/<*:[^\/]+>' => ['template' => 'demo/forms/form'],
'demo/forms/<*:[^\/]+>/<*:[^\/]+>/edit/<*:[^\/]+>' => ['template' => 'demo/forms/form'],
'demo/submissions/<*:[^\/]+>' => ['template' => 'demo/submissions'],
'demo/submissions/<*:[^\/]+>/spam' => ['template' => 'demo/submissions'],
'demo/submissions/<*:[^\/]+>/<*:[^\/]+>' => ['template' => 'demo/submissions/view'],
'demo/submissions/<*:[^\/]+>/<*:[^\/]+>/spam' => ['template' => 'demo/submissions/view'],
'demo/submissions/delete/<*:[^\/]+>/<*:[^\/]+>' => ['template' => 'demo/submissions/delete'],
'demo/custom' => ['template' => 'demo/custom'],
'demo/custom/<*:[^\/]+>' => ['template' => 'demo/custom/form'],
'demo/extras/suppress-edit-submissions/edit/<token:\w+>' => ['template' => 'demo/extras/suppress-edit-submissions'],
Visit https://example.com/demo/ to open the demos.
Live Demo
Explore the hosted Freeform demo below or open it in a separate tab. Some sections and data are limited.