Demo Templates

Freeform includes a complete set of demo templates. These demo templates let you have a fully functioning area on your website with just a couple clicks! Further to this, it allows you to see real world examples of the template code in action, which will help you get acquainted with Freeform quicker.

Installing the Demo Templates

To install the Demo Templates, simply visit the Settings page for Freeform and click on the Demo Templates nav item (Freeform > Settings > Demo Templates).

By default, the Demo Templates page will have freeform-demo as the Install Path for your template path. You can change this to whatever you like. So for example, if you set the Install Path value as my_precious, the demo templates will be installed to site.com/my_precious/.

During installation of demo templates, Freeform will copy the template folders and files (as shown on page) to the Craft /templates/ directory. So using the above example, your templates would be located at /templates/my-precious/.

Freeform will also look for an assets folder in your public directory and attempt to load files such as CSS, JS, fonts and image files (as shown on page) to a folder inside that, named my-precious (using the example above). If an /assets/ directory does not exist, Freeform will attempt to create that directory as well.

And lastly, Freeform will create several template routes for you (as shown on page) for the demo templates to work correctly.

If you ever want to refresh the demo templates back to what they were by default (or if there's been an update to them in a new version), you can simply reinstall the Demo Templates and use the same Install Path value. Freeform will then overwrite the files and only add new routes (if applicable), rather than installing duplicate routes.

If you encounter any issues while attempting to install the demo templates, please see the Troubleshooting guide.

Troubleshooting

If you encounter any issues trying to install the demo templates, it's likely that your database user does not have sufficient privileges or your server configuration does not allow some or all of the actions.

If you cannot change or adjust your permissions or configuration, you can install the demo templates manually. To install them manually, refer to the Manual Install instructions below.

Manual Install

To install the demo templates manually, just follow the instructions below:

1. Inside the /vendor/solspace/craft-freeform/packages/plugin/src/codepack/ directory, copy the templates folder into the Craft /templates/ directory, and rename the Freeform templates folder to demo (so it should now be located at /templates/demo/).
2. In your root public directory, create a directory called assets if it does not already exist.
3. Inside the /vendor/solspace/craft-freeform/packages/plugin/src/codepack/ directory, copy the assets folder into the public /assets/ directory, and rename the Freeform assets folder to demo (so it should now be located at /assets/demo/).
4. Copy and paste the following routes into your routes.php configuration file (/config/routes.php):

'demo/bootstrap/(?P<slug>[^\/]+)/submissions/(?P<id>\d+)/success'   => 'demo/bootstrap/view_submission',
'demo/bootstrap/(?P<slug>[^\/]+)/submissions/(?P<id>\d+)'           => 'demo/bootstrap/view_submission',
'demo/bootstrap/(?P<slug>[^\/]+)/submissions/delete/(?P<token>\w+)' => 'demo/bootstrap/delete_submission',
'demo/bootstrap/(?P<slug>[^\/]+)/submissions'                       => 'demo/bootstrap/submissions',
'demo/bootstrap(?:\-ajax)?/(?P<slug>[^\/]+)'                        => 'demo/bootstrap/view',
'demo/bootstrap(?:\-ajax)?/(?P<slug>[^\/]+)/success'                => 'demo/bootstrap/view',
'demo/materialize/(?P<slug>[^\/]+)/submissions/(?P<id>\d+)/success' => 'demo/materialize/view_submission',
'demo/materialize/(?P<slug>[^\/]+)/submissions/(?P<id>\d+)'         => 'demo/materialize/view_submission',
'demo/materialize/(?P<slug>[^\/]+)/submissions'                     => 'demo/materialize/submissions',
'demo/materialize/(?P<slug>[^\/]+)'                                 => 'demo/materialize/view',
'demo/materialize/(?P<slug>[^\/]+)/success'                         => 'demo/materialize/view',
'demo/foundation/(?P<slug>[^\/]+)'                                  => 'demo/foundation/view',
'demo/ajax-bootstrap/(?P<slug>[^\/]+)'                              => 'demo/ajax/bootstrap',
'demo/ajax-bootstrap-source/(?P<slug>[^\/]+)'                       => 'demo/ajax/bootstrap-source',
'demo/ajax-foundation/(?P<slug>[^\/]+)'                             => 'demo/ajax/foundation',
'demo/ajax-foundation-source/(?P<slug>[^\/]+)'                      => 'demo/ajax/foundation-source',
'demo/ajax-materialize/(?P<slug>[^\/]+)'                            => 'demo/ajax/materialize',
'demo/ajax-materialize-source/(?P<slug>[^\/]+)'                     => 'demo/ajax/materialize-source',
'demo/ajax-flexbox/(?P<slug>[^\/]+)'                                => 'demo/ajax/flexbox',
'demo/ajax-flexbox-source/(?P<slug>[^\/]+)'                         => 'demo/ajax/flexbox-source',
'demo/ajax-grid/(?P<slug>[^\/]+)'                                   => 'demo/ajax/grid',
'demo/ajax-grid-source/(?P<slug>[^\/]+)'                            => 'demo/ajax/grid-source',

Visit your demo templates at: yoursite.com/demo