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

   Email Address *
   
   

   First Name *
   
   

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

   Email Address *
   
   

   First Name *
   
   

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.