Move petition CTA above the fold on campaign page mobile views

[mtdenton]

via @Gbaldassano, split from #10896
Stakeholder: needs grooming

Context

Optimizing the Petition forms to maximize conversions is a priority for the Engagement team. As a result, they would like us to move the petition form/CTA up so it appears above the fold on mobile (similar to what was done for donate forms)

However, there are some considerations to take into account:

• Screen readers would have a different experience on desktop sizes if paragraphs were kept to the left, which means it would start reading the petition side first. While not optimal to give these users a different experience, it seems like we don't have an option here without radically rearranging or redesigning this page.
• We will have to rearrange the DOM through the template and make it respond to different viewport sizes with order sort of like we did in donate-wagtail #1755. The h1 page title will need to be independent of the current top paragraph div and always remain at the top of the page despite the order of the other elements.
• The compactness of the form doesn't improve on mobile sizes. We may want to consider any other ticket coming from SPIKE: Adjusting Petition Form Fields/Moving Petition CTA Above the Fold #10896 addressing this as a requirement as well.

I've mocked up what this could look like but omitted needed input from the design team on arrangement, margin/padding, etc. (cc @kristinashu):

This takes the liberty of removing a few elements that were causing spacing issues:

• The gray bar to be removed in Hide unnecessary gray bar between the main nav and the heading on campaign pages if there's nothing to display #10919 (consider making this a blocking issues)
• The form footer divs, we'll need input on what to do with these as well:
  

[mtdenton]

We might consider splitting this as well, maybe assigning to an overarching petition page improvements epic. Suggested ticket ideas:

• make h1 page title independent of the campaign-page-content parent div
• set visibility of wFormFooter and supportInfo elements to hidden if there is no content to be displayed

[Gbaldassano]

@mtdenton thanks for making this! I added the design label to this to make sure designers have weigh in before any dev work. CC: @kristinashu

[kristinashu]

Also noting we need to decide next steps for the sticky CTA button #10896 (comment)

And make sure this won't affect the newsletter sign up snippet position? Particularly on mozfest site (if any changes happen, we need approval from Marc). Keeping in mind that ideally, our UX patterns are as consistent as possible.

[kristinashu]

@Gbaldassano @mtdenton for the quick fix, can you please confirm both with the stakeholders and with the code re: the comment above about the sticky button on mobile?

[kristinashu]

@nancyt1 had mocked up this version that is the same dev-wise as the original comment but she's suggesting stakeholders make use of the snippet copy to give supporters more context:

[mtdenton]

@Gbaldassano @mtdenton for the quick fix, can you please confirm both with the stakeholders and with the code re: #10920 (comment) about the sticky button on mobile?

We could change the code in sticky-cta.js to only appear once the petition element leaves the top of the user's viewport and hiding the button again if the petition element comes back into view. This way, it will only take real estate from the long paragraphs below and still allow users a method to quickly get back to the form.

For posterity, the JavaScript I'm referring to is here-ish:

foundation.mozilla.org/source/js/common/template-js-handles/sticky-cta.js

Line 44 in 6cd2796

elStickyButton.classList.add(`hidden`);

[kristinashu]

Thanks @mtdenton! And that won't be too buggy/glitchy? Will it only affect petitions and not newsletter sign up CTAs?

[mtdenton]

You bet! There shouldn't be any reason for it to behave strangely from my POV but we can evaluate. I'm also thinking that we can rewrite this JavaScript to determine if it's on a petition page or not and act accordingly so that newsletter sign up CTAs won't be affected.

[kristinashu]

Great! cc @mmmavis

[mtdenton]

Re-checking on staging for launch after un-reverting, looks good to go