Configure HTTP Send on FormAssemby form for AI Intersections Database newsletter sign-ups

data-sync-user commented 7 months ago

Request created by Kenrya Rankin at https://mozilla-hub.atlassian.net/jira/servicedesk/projects/MOFOTP/issues/MOFOTP-178.

Request description

Configuration of AI intersection database form to connect with the Basket API. Draft from (cloned from Petition form) is available here: https://mozillafoundation.tfaforms.net/forms/builder/5.0.0/53

I did not delete fields on the form yet as I was not sure which are needed/not needed for the HTTP connector and embedding on the website. Currently, the insights newsletter form only collects email, country, language and has a checkbox for agreeing to the privacy policy ( as seen here: https://foundation.mozilla.org/en/insights/

)

Timelines: Ideally, when would you like this work complete? If there is a soft launch date required for press or partners, please use that.

NA

What are the metrics and/or Key Performance Indicators you’re hoping to impact with this request?

NA

What is the audience you are trying to reach with this request?

NA

Do you have any assets that may help bring us up to speed? (Please upload any Images, briefs, documentation inspiration, screenshots of bugs, etc.)

NA

Thank you for your submission! We will review your submission and a member of the Technology Platforms team will be in touch with you soon.

┆Issue is synchronized with this Jira Task

data-sync-user commented 4 months ago

➤ Daniel Miranda commented:

Hi Everyone! The form at https://mozillafoundation.tfaforms.net/forms/builder/5.0.0/53 ( https://mozillafoundation.tfaforms.net/forms/builder/5.0.0/53 ) is now set up and ready to be embedded 👍

Here is the embed code generated by FormAssembly:

Paste this in the section

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="referrer" content="no-referrer-when-downgrade">
<!-- THIS SCRIPT NEEDS TO BE LOADED FIRST BEFORE wforms.js -->
<script type="text/javascript" data-for="FA__DOMContentLoadedEventDispatch" src="https://mozillafoundation.tfaforms.net/js/FA__DOMContentLoadedEventDispatcher.js" defer></script>
        <script type="text/javascript">
    document.addEventListener("FA__DOMContentLoaded", function(){
        const FORM_TIME_START = Math.floor((new Date).getTime()/1000);
        let formElement = document.getElementById("tfa_0");
        if (null === formElement) {
            formElement = document.getElementById("0");
        }
        let appendJsTimerElement = function(){
            let formTimeDiff = Math.floor((new Date).getTime()/1000) - FORM_TIME_START;
            let cumulatedTimeElement = document.getElementById("tfa_dbCumulatedTime");
            if (null !== cumulatedTimeElement) {
                let cumulatedTime = parseInt(cumulatedTimeElement.value);
                if (null !== cumulatedTime && cumulatedTime > 0) {
                    formTimeDiff += cumulatedTime;
                }
            }
            let jsTimeInput = document.createElement("input");
            jsTimeInput.setAttribute("type", "hidden");
            jsTimeInput.setAttribute("value", formTimeDiff.toString());
            jsTimeInput.setAttribute("name", "tfa_dbElapsedJsTime");
            jsTimeInput.setAttribute("id", "tfa_dbElapsedJsTime");
            jsTimeInput.setAttribute("autocomplete", "off");
            if (null !== formElement) {
                formElement.appendChild(jsTimeInput);
            }
        };
        if (null !== formElement) {
            if(formElement.addEventListener){
                formElement.addEventListener('submit', appendJsTimerElement, false);
            } else if(formElement.attachEvent){
                formElement.attachEvent('onsubmit', appendJsTimerElement);
            }
        }
    });
</script>

<link href="https://mozillafoundation.tfaforms.net/dist/form-builder/5.0.0/wforms-layout.css?v=8b5c9ffd0b6fc88dc72529725004f6b69b9e0ae8" rel="stylesheet" type="text/css" />

<link href="https://mozillafoundation.tfaforms.net/uploads/themes/theme-23.css" rel="stylesheet" type="text/css" />
<link href="https://mozillafoundation.tfaforms.net/dist/form-builder/5.0.0/wforms-jsonly.css?v=8b5c9ffd0b6fc88dc72529725004f6b69b9e0ae8" rel="alternate stylesheet" title="This stylesheet activated by javascript" type="text/css" />
<script type="text/javascript" src="https://mozillafoundation.tfaforms.net/wForms/3.11/js/wforms.js?v=8b5c9ffd0b6fc88dc72529725004f6b69b9e0ae8"></script>
<script type="text/javascript">
    wFORMS.behaviors.prefill.skip = false;
</script>
    <script type="text/javascript" src="https://mozillafoundation.tfaforms.net/wForms/3.11/js/localization-en_US.js?v=8b5c9ffd0b6fc88dc72529725004f6b69b9e0ae8"></script>

And this goes where you want the form to render:

First Name

Last Name

Email

Country

Language

Privacy Agreement

I'm okay with Mozilla handling my info as explained in this Privacy Notice.

Email Subscription

Yes, I want to receive email updates about Mozilla’s campaigns.

data-sync-user commented 4 months ago

➤ Daniel Miranda commented:

Alternatively, it looks like FormAssembly provides some javascript that will also load the form in, if styling is not an issue:

data-sync-user commented 4 months ago

➤ Daniel Miranda commented:

One last thing that I want to call out are two fields that can be utilized to make the user experience better: thank you URL and source URL.

Thank you URL:

At the moment, a successful submission of the form assembly form will redirect users to an unstyled page saying “thank you”. If stakeholders can create a styled page on their site that has a thank you message, we can instead redirect users here to avoid users being redirected to an unstyled, formassembly hosted page. This would need to be set up on the FormAssembly side. If stakeholders end up wanting to go this route, I would be happy to set up the redirect once a thank you page is in place.

Source URL:

This field can be set to the URL of the site that the form will be hosted on, that way stakeholders can track how many subscriptions are coming from this site.

This would have to be set up on FormAssembly also, but if stakeholders provide a URL, I would be happy to set this up 👍

data-sync-user commented 4 months ago

➤ Tyler Denton commented:

Handed off to Social Driver, waiting on response

data-sync-user commented 4 months ago

➤ Tyler Denton commented:

Social Driver took a whack at this while I was out and missed some steps in their process that would resolve this ticket. This ticket is now linked to the prerequisite ticket.

MozillaFoundation / foundation.mozilla.org