Embedded multi step lead capture form

Replicate our current two part form can be viewed at [login to view URL], and can complete Part 1 (the Quiz) to see Part 2 (the Form) by answering "yes-yes-no-no-yes" and entering a DOB that makes them older than age 50 (e.g., 4/20/69).

Version 1

Right now, when Part 1 is completed appropriately, we reveal a form-fill. I would like to have a version that does the same thing, subject to the requirements below.

Version 2

I would *also* like to have a version that upon appropriate Part 1 Quiz completion reveals a NEW Part 2, an editable html container in which we could put a CSS styled HTML message that will serve to drive a phone call, with the further ability to have a small link/button that upon click would reveal Part 3, the Form. The reason for this is that on mobile devices I prefer to drive phone calls, so for the mobile version, I'd like to have this interstitial step between quiz and form-fill to attempt to generate a call using a dynamic TFN from DialogTech. The mobile version would also need to meet the below requirements.

Requirements:

* Can be deployed without an iframe (html + javascript + css is ideal, usage of .php may not always be an option)

* Assume that both versions of the form may be deployed on the same page but that users will have access to one and not the other depending on time of day (e.g., between certain hours only Tool Version A will be accessible, and between other hours, only Tool Version B will be accessible)

* We need to be able to modify css to re-style all parts of the tool to make it fit into different design schemes

* The new interstitial "Part 2" must be able to contain normal HTML elements including text, images, buttons, links, etc.

* The overall container div of the form, even if it contains hidden elements that will be revealed by actions taken within the form, must be 100% of the size required to display all elements when fully revealed - we cannot have scroll bars within the form element itself (this was a major problem with the current iframe on mobile devices)

* Form must be able to accept hidden fields, and to populate hidden fields with values passed via querystring and/or hard-coded

* If this tool uses three discrete, individual pages (rather than, say, css display: controlled divs), we'll need to be able to preserve and pass querystring information from page to page

* Assume that the people who are deploying & modifying this have an intermediate-to-expert knowledge of HTML & CSS, but have little or no JS experience

* Assume that quiz/form will be deployed in LAMP environment (e.g., Wordpress on Apache) or in landing page builders such as Unbounce/Instapage which allow for custom html + JS deployment and custom CSS

* Assume that interactions with some elements of the form/quiz will be tracked via listeners in Google Tag Manager (thus unique IDs for all elements would be helpful)

* Assume that form will be on an https:// page (not sure if this is information that matters)

* Form-fill data must be sent as a JSON object to POST application, per specifications that will be provided to the winner.

CSS HTML HTML5 JavaScript jQuery / Prototype

Rif. progetto: #19340502

Info sul progetto