Forms standardisation on sites

Forms on canonical.com and ubuntu.com have been restructured to use a common template. Previously a separate page (therefore an .html file) had to be created to add a new form. Now it is as simple as adding form data into one file.
So how does it work? All data for the forms is stored in one .JSON file. It includes form id, template that need to be rendered on the page, return url, form fields etc. All forms will be rendered through one template with params passed from that data storage file on the Flask side of the app.
To add a new form or update an existing one, please use forms-data.json file and follow an example structure:

"forms": {
    "/data/postgresql": {   // page url
         "templatePath": "/data/postgresql/index.html",
         "isModal": true,  // can be omitted for static forms
         "modalId": "contact-modal",  // can be omitted for static forms
         "formData": {
            "title": "Test form",
            "introText": "Intro text",
            "formId": "1266",
            "returnUrl": "/data/postgresql#contact-form-success",
            "product": ""
         },
         "fieldsets": [],   // fields examples are available in the forms-data.json file
     }
}

The general list of field types used for the forms are:

• Text field
• Country
• Email
• Phone number
• Long text field
• Multiple choice / select field
• Dropdown

Examples of all the field types are provided within the datafile for you to use.
After that the form should be included on the page. To do that, use:

{% include "/shared/forms/form-template.html" %}

For the static forms include in the necessary place on the page, for the dynamic (modals) on ubuntu.com include IN the “contact-form-container” div like so:

<div class="u-hide" id="contact-form-container" data-form-location="/shared/forms/form-template" data-form-id="{{ formData.formId }}" data-lp-id="" data-return-url="{{ formData.returnUrl }}" data-lp-url="https://ubuntu.com/aws/contact-us">
    {% include "/shared/forms/form-template.html" %}
 </div>

Also if you are creating a dynamic form on ubuntu.com, please make sure to pass params to the container such as data-form-location, data-form-id, data-lp-id, data-return-url, data-lp-url which you can get from formData variable. For canonical.com a regular include would work for both types.
For stating submission success we now use confirmation banners only. To use one simply add #contact-form-success to the end of your return url.
With that forms are now much easier to use and more efficient!

Last updated 3 days ago.