This project contains the scripts and styles to display an interactive form.
It is a "contact us" which contains a brief survey before submission.
To make it work, you need the following:
- Install the script
- Create an HTML file or template with your content
- A link or button to trigger it
This project can be installed via an NPM package.
yarn add @canonical/dynamic-forms
...or...
npm install @canonical/dynamic-forms
You can then install the library either by directly linking to it or via an ES6 import.
- Via direct link
To consume the library directly, add a link to the JS file containing an IIFE and call the lib:
<script src="[ INSERT YOUR LOCAL PATH ]/js/dynamic-forms.js"></script>
<script>
dynamicForms.setupForm();
</script>
- Via ES6 import
import { setupForm } from '@canonical/dynamic-forms';
The HTML template must follow the structure of index.html
, paying attention to the following:
- It must contain an element with id
container-form-container
, which has a number of data parameters:data-form-location
refers to the location of the form. In this example, it is located in./interactive-form.html
data-form-id
is the required marketo ID.data-return-url
is usually the "thank you" page to what the form returns to once it has succesfully submitted.
- A modal element with id
contact-modal
. This is the model that is triggered once the user clicks on a trigger i.e. a "contact us" button - At least one page in the modal, with class
js-pagination js-pagination--1
All CSS classes must conform to Vanilla Framework v3 or upwards.
Once the module is included in your project and the template is created, you will need to add a link or button to trigger it.
<a href="#get-in-touch">
Contact us
</a>
The #get-in-touch
hash will track changes in the page location, so that it correctly maps to the corresponding form. This will also keep the modal opened if the user did not close the modal or refreshes the page.
It is common to add some additional styling if you wish to do so
<a href="#get-in-touch" class="p-button--positive">
Contact us
</a>
If you would like to help improve this project, here is a list of commands to help you get started.
Install the required dependencies;
npm install
To build the JS and CSS into the build folder, run:
npm run build
You can view the build files in action by running:
npm run serve
And, visiting http://0.0.0.0:8302/
When developing this project you can run the following command to listen to
changes in the src/js/*js
and src/sass/*scss
folders and build them into the
/build
folder.
npm run watch
Before submitting your pull request, run the linters, which checks both the JS and Sass for errors.
npm run test
Code licensed LGPLv3 by Canonical Ltd.
With ♥ from Canonical