Add in subscribe widget

[MirandaEcho]

Add in the subscribe widget: Located to the right of our logo, replacing our GET NEWSLETTERS button that is currently there.

The only change we'd want on the design is for the newsletter icon and button to be orange, #fb6927, because our DONATE button is now blue in our global nav.

We'd also like to request the ability to control the button text and the text above the input email box next to the icon.

[benlk]

Did we receive instruction on what newsletter should be signed up for? the current signup link in the header goes to https://publicsource.org/newsletter-signup/, which has two different newsletter signup forms, embedded via Pym.js.

If they'd like, we could make sure that shortcodes are enabled in custom text/html widgets, and then let them embed the signup forms using Pym.js.

[benlk]

A custom HTML widget:

<!-- This is a customized version of the code you will get from Mailchimp’s NAKED Signup Form -->
<p>
    <i class="icon-mail"></i>
  Custom text here!
</p>
<div id="mc_embed_signup">
    <form action="https://publicsource.us8.list-manage.com/subscribe/post?u=353bf8a288d28d217cb70491f&amp;id=b58fd7b533&amp;SIGNUP=DIGESTPAGE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
        <div id="mc_embed_signup_scroll">

            <div class="mc-field-group">
                <input type="email" placeholder="Your Email" name="EMAIL" class="required email" id="mce-EMAIL">
                <input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe">
            </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;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div>
        </div>
    </form>
</div>
<!--End mc_embed_signup-->

[MirandaEcho]

Client feedback/questions:

• [x] For the sign up widget area, can we please try a stronger font-weight for "Sign up for our newsletter" text area. Something quite bold, 700?
• [ ] Where in WP will we be able to control the custom text in the subscribe widget?
• [ ] Also can we change Your Email text area to Mallory font.

[benlk]

Updated to the headline-weight Mallory font in the "Sign up for our newsletter" text, and lighter-weight Mallory in the email text area.

Widget text and styles are editable via the "Custom HTML" widget in the Header Widget widget area.

Updated widget contents:

<!-- This is a customized version of the code you will get from Mailchimp’s NAKED Signup Form -->
<p>
    <i style="color:#418cff;" class="icon-mail"></i>
  <strong style="font-family:tk-mallory-n7,sans-serif;">Sign up for our newsletter.</strong>
</p>
<div id="mc_embed_signup">
    <form action="https://publicsource.us8.list-manage.com/subscribe/post?u=353bf8a288d28d217cb70491f&amp;id=b58fd7b533&amp;SIGNUP=DIGESTPAGE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
        <div id="mc_embed_signup_scroll">

            <div class="mc-field-group">
                <input type="email" placeholder="Your Email" name="EMAIL" class="required email" id="mce-EMAIL" style="font-family:tk-mallory-n3,sans-serif;">
                <input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe">
            </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;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div>
        </div>
    </form>
</div>
<!--End mc_embed_signup-->

[MirandaEcho]

@Ben is possible to make the newsletter icon (the envelope), orange like the button color?

[benlk]

Sure, by changing the color given in the inline style on <i style="color:#418cff;" class="icon-mail"></i> in the markup.

[benlk]

In site custom CSS:

#site-header aside {
    max-width: 420px !important;
}

In the widget:

<!-- This is a customized version of the code you will get from Mailchimp’s NAKED Signup Form -->
<p>
    <i style="color:#fb6927;" class="icon-mail"></i>
  <strong style="font-family:tk-mallory-n7,sans-serif;">Sign up for our newsletter.</strong>
</p>
<div id="mc_embed_signup">
    <form action="https://publicsource.us8.list-manage.com/subscribe/post?u=353bf8a288d28d217cb70491f&amp;id=b58fd7b533&amp;SIGNUP=DIGESTPAGE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
        <div id="mc_embed_signup_scroll">

            <div class="mc-field-group" style="white-space: nowrap;">
                <input type="email" placeholder="Your Email" name="EMAIL" class="required email" id="mce-EMAIL" style="font-family:tk-mallory-n3,sans-serif;">
                <input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe">
            </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;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div>
        </div>
    </form>
</div>
<!--End mc_embed_signup-->