Newsletter Subscription Full-width

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

Wireframe

Footer Newsletter Subscription


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.

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%]

Was this article useful?

Be notified when this page is updated. Optional.