Creating or update a modal/interactive form

Overview

In 2019 we introduced modal forms on ubuntu.com that pop-up and have three pages of questions for users to fill in to talk to us. For example, add #get-in-touch to any page and you will see a form. Often they are contextual to the exact page you are visiting. And all page is all controlled by a single javascript file which controls the pagination and the background submission to Marketo. The form ids are used to create the data submitted and are critical to getting correct. Additionally, the copy docs for the forms are all kept on google drive

Because of the complexity of getting the html correct, we wrote a cgi script to make this easier and more consistent.

Process

  • create or update a form on Marketo just to get the form id
  • approve and then view the approved landing page on Marketo
  • open the form copy doc and fill in the details on the https://intl.transitionelement.com/modal/
  • the field named code will become the text of the question submitted to Marketo
  • the field named other is optional and allows for the user to add additional options to the checkbox list
  • save the page in a new branch of ubuntu.com/templates/shared/forms/interactive
  • add the form include to the page you want to use it, e.g.
<div class="u-hide" id="contact-form-container" data-form-location="/shared/for ms/interactive/managed-kafka.html" data-form-id="3592" data-lp-id="3828" data-r eturn-url="https://www.ubuntu.com/managed/thank-you" data-lp-url="https://pages .ubuntu.com/things-contact-us.html">
  • test the form
  • when you are happy with the form, save the url of the cgi-script in the copy doc for easy updating later, e.g. like this

Now you have the updated html and an example of the form. Just copy the html from the ‘Cleaned form raw html’ text box.

1 Like