Style mailchimp newsletter form

[albinazs]

https://torchbox.monday.com/boards/1192293412/views/4019870/pulses/1194976940

Changes included in this MR:

Styled Mailchimp newsletter form based on the provided design and the updated content.
A new dedicated template and class are used for the implementation.

Note: the current content on the page has an accessibility issue related to the heading hierarchy. To maintain consistency across all pages, I suggest adding an h2 heading. One option is to use the "get in touch" message from the initial design, placing it under the top-level heading.

To test

On a local build create a page with the 'Mailchimp embedded form' streamfield, and copy+paste Mailchimp embed code in it.

Mailchimp embed code

  <!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
 #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px;}
 /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
    <form action="https://torchbox.us4.list-manage.com/subscribe/post?u=a0ea5dd83a8de60ee361b5e44&amp;id=69e5806a4f&amp;f_id=00023ae9f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <p>Sign up for insights from Torchbox. Get content from our latest projects, current trends and innovation in the nonprofit world. From first hand experiences to cool and interesting things we've seen, stay informed and inspired. 
 <p>
<div class="mc-field-group">
 <label for="mce-FNAME">First Name </label>
 <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
 <span id="mce-FNAME-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
 <label for="mce-LNAME">Last Name </label>
 <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
 <span id="mce-LNAME-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
 <label for="mce-MMERGE3">Organisation </label>
 <input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3">
 <span id="mce-MMERGE3-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
 <label for="mce-EMAIL">Email Address 
</label>
 <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL">
 <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group input-group">
    <strong>Keep me informed about... </strong>
    <ul><li>
    <input type="checkbox" value="1" name="group[76901][1]" id="mce-group[76901]-76901-0">
    <label for="mce-group[76901]-76901-0">Digital Marketing (Email, SEO, Paid Media, Analytics)</label>
</li>
<li>
    <input type="checkbox" value="2" name="group[76901][2]" id="mce-group[76901]-76901-1">
    <label for="mce-group[76901]-76901-1">AI and Innovation</label>
</li>
<li>
    <input type="checkbox" value="4" name="group[76901][4]" id="mce-group[76901]-76901-2">
    <label for="mce-group[76901]-76901-2">Digital products (Strategy, UX, Design, Build)</label>
</li>
</ul>
    <span id="mce-group[76901]-HELPERTEXT" class="helper_text"></span>
</div>
 <div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
 </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a0ea5dd83a8de60ee361b5e44_69e5806a4f" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Screenshots

[helenb]

This is looking good - I think we just need to align it a bit better with the other streamfield content

[helenb]

@engineervix I have pushed some updates to the migrations to handle the clashes with other code changes that have since been merged to master. Please could you review?

[albinazs]

@helenb committed suggestion ready for review

[helenb]

This is approved from a styling pov. I would like @engineervix to check the migrations and help us get it on staging as the different migrations on different branches have made this a bit complicated.

[engineervix]

@engineervix I have pushed some updates to the migrations to handle the clashes with other code changes that have since been merged to master. Please could you review?

Since this hasn't been deployed anywhere, I've deleted the migrations and recreated them in fdbcf64.