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.
- 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.
- 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&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)
- 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&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
- 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.
Leave a ReplyCancel reply