This technique was first used on the Beyonce store.

How It Works

1. The code checks if the product has inventory. If inventory is 0 or below, then the form displays, else nothing happens.
2. An empty iframe is added, so the Mailchimp form submits discreetly, giving us control of the UI/UX presentation.
3. Once the form is submitted, the form field disappears and a thank you message appear.

New Mailchimp Signup Form

Open Mailchimp, navigate to the list you want populated

Create Snippet

Create a snippet named sold-out-mailchimp.liquid Add the code below.

Change the Mailchimp signup form to the one you created in step 1, but make sure to change the target to target="mailchimp-iframe".  

{% assign available_inventory = product.variants.first.inventory_quantity %}

{% if available_inventory <= 0 %}
    <section id="sold-out-form inventory_{{ available_inventory }} {% if available_inventory <= 0 %}no_inventory {% elsif available_inventory > 0 %}have_inventory {% else %}null_inventory inventory_is_broke{% endif %}" style="margin-top: 15px;">

        <p>Please notify me if this product becomes available</p>

        <!-- Begin MailChimp Signup Form -->
        <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
        <style type="text/css">
        #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
        /* 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="//chloeandhalle.us10.list-manage.com/subscribe/post?u=88adb327dcabde30998542a7d&amp;id=83f2eabd07" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="mailchimp-iframe" novalidate>
                <div id="mc_embed_signup_scroll">
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="" required>
                <!-- 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_88adb327dcabde30998542a7d_83f2eabd07" tabindex="-1" value=""></div>
                <div class="clear"><input type="submit" value="Notify me" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                </div>
            </form>
        </div>

        <div class="mailchimp-thank-you" style="display: none;">
            <h4>Thank You</h4>
        </div>

        <iframe name="mailchimp-iframe" style="display:none;"></iframe>
    </section>
    <style type="text/css">
        #mc_embed_signup form {
            text-align: left;
        }
        input#mce-EMAIL {
            width: 150px !important;
            border-radius: 0 !important;
        }   
        input#mc-embedded-subscribe {
            border-radius: 0 !important;
        }
        #product-details form {
            margin-bottom: 1em;
        }
        #purchase.disabled {
            background: #ccc !important;
            color: dimgray;
            border: none !important;
        }       
    </style>
    <script type="text/javascript">
        $( "#mc-embedded-subscribe" ).click(function() {
          $( "#mc_embed_signup" ).hide( "slow" );
          $( ".mailchimp-thank-you" ).show( "slow" );
        });     
    </script>
{% endif %}