• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Marketing Strategy Facilitators & Mailchimp Pro Partners

  • Home
  • Marketing Strategy & Planning
  • Mailchimp Services
    • Service Catalogue
    • Mailchimp Improvement Audit
    • Shopify & WooCommerce Marketing
    • Mailchimp Online Courses (on Udemy)
    • Mailchimp Live Classes
    • Mailchimp Corporate/Team Training
    • Consulting
  • Free Tools
    • 5 day Mailchimp marketing boost
    • Map maker for email
    • Is Mailchimp down?
    • Marketing facts and stats.
  • Content
    • Blog
    • Videos
  • Contact & About
You are here: Home / Marketing / Add focus to a Mailchimp subscribe form field

Add focus to a Mailchimp subscribe form field

I’ve written various posts in the past regarding how to have a form field in focus automatically when a website page loads. What we mean by in focus is that the cursor will be active in a predefined field when a webpage is loaded. This means that all the viewer need do is start typing and the field will start to be filled (as opposed to the viewer first having to click in the field and then typing). In a blog post I wrote recently Add focus to a Gravity Forms field, a commenter requested how to add focus to a Mailchimp form field when the native Mailchimp form is used. Read on for the instructions.

How to add focus to a Mailchimp signup form field

Follow the instructions below to learn how to add focus to a Mailchimp form field. In this tutorial we’ll use the HTML5 autofocus attribute but jQuery could be used if preferred.

  1. Copy your Mailchimp List Embedded Form Code. In the example below I’ve used the Naked form code but any of the forms should work.
  2. Paste the code you copied in the step above into a text editor. Your code should look something like
    <!-- Begin Mailchimp Signup Form -->
    <div id="mc_embed_signup">
    <form action="//organicweb.us2.list-manage.com/subscribe/post?u=649786612ca922aac80e568b2&amp;id=2e2728530f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
    </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <div class="mc-field-group">
    <label for="mce-FNAME">First Name <span class="asterisk">*</span>
    </label>
    <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    </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_649786612ca922aac80e568b2_2e2728530f" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
    </form>
    </div>
    
    <!--End mc_embed_signup-->
    
    

    which will result in a form looking something like (p.s. the form is unstyled below and hence looks a bit strange)

    Subscribe to our mailing list

    * indicates required


  3. Add the text autofocus into the input field HTML that you want focused upon load. For example, if you want the email field focused then change
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

    to

    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL autofocus ">

    . The full code will now look like

    <!-- Begin Mailchimp Signup Form -->
    <div id="mc_embed_signup">
    <form action="//organicweb.us2.list-manage.com/subscribe/post?u=649786612ca922aac80e568b2&amp;id=2e2728530f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
    </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" autofocus >
    </div>
    <div class="mc-field-group">
    <label for="mce-FNAME">First Name <span class="asterisk">*</span>
    </label>
    <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    </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_649786612ca922aac80e568b2_2e2728530f" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
    </form>
    </div>
    
    <!--End mc_embed_signup-->

    which will result in the email field being in focus on page load

    Subscribe to our mailing list

    * indicates required


  4. Now the HTML per the step above needs to be added to wherever you want your form to display.

How to add the Mailchimp form to WordPress

Adding a Mailchimp form to WordPress is incredibly simple. Just copy the amended code above and

  • To insert into a widget then save the copied HTML into a text widget.
  • To show the form in a page or post just paste the copied HTML into the text tab of the WordPress page/post editor.

That’s all there is to it. Remember, we are Mailchimp Experts and clients using our Mailchimp services get 50% off From Mailchimp for 6 months.

Found this useful? Please share:

Filed Under: Marketing

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to create a lead-capture form with file download.

How to target your most engaged Mailchimp contacts.

Reader Interactions

Leave a Reply Cancel reply

Primary Sidebar

Ready? Boost your marketing …

Get Started

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Mailchimp Video Tutorials

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer ratings

Mailchimp pro partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2021 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service