Prominent Newsletter Subscription

A prominent full-width newsletter subscription section for your footer.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started Guide to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Open the footer template

Navigate to the footer template /httpdocs/assets/themes/[THEME-NAME]/templates/footers/template.html.

Step 2: Add the code into the template

Paste the following code above <footer class="wrapper-footer">:

[%if [@config:show_newsletter_subscribe@]%]
    <div id="footer-newsletter" class="bg-light py-4">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-sm-6">
                    <h3>Subscribe to our Newsletter</h3>
                    <p class="mb-0">We'll keep you up-to-date on our products and services.</p>
                </div>
                <div class="col-12 col-sm-6">
                    <form method="post" action="[%URL type:'page' id:'subscribe' https:'1'%][%END URL%]" aria-label="Newsletter subscribe form">
                        <input type="hidden" name="list_id" value="1">
                        <input type="hidden" name="opt_in" value="y">
                        <input type="hidden" name="inp-submit" value="y" />
                        <input type="hidden" name="inp-opt_in" value="y" />
                        <div class="input-group">
                            <input name="inp-email" class="form-control" type="email" value="[%nohtml%][@inp-email@][%/nohtml%]" placeholder="Email Address" required aria-label="Email Address"/>
                            <div class="input-group-append"><input class="btn btn-primary" type="submit" value="Subscribe" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"/></div>
                        </div>
                        <div class="checkbox mt-2">
                            <label class="small">
                                <input type="checkbox" value="y" class="terms_box" required/>
                                I have read and agree to
                                <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> &
                                <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
[%/if%]