FROM

LESSON 2: GROW YOUR LIST

GetYourWebsiteTogether.com

WHAT YOU’RE GOING TO LEARN:How to pull customizable opt-in form code for your site

Where to add the code for your opt-ins

How to style your opt-in forms

The no-code way to add opt-ins to your site

GET THE CODEFirst, we have to pull an unstyled form from your

email list provider.

Open your list and look for embedded signup forms

Remove all options so you can customize it yourself

ADD CODE TO WPYou can add opt-in code anywhere on your site where

you can add HTML.

Add a text widget to your sidebar…

Or switch to the text tab and add it to a post or page

SO WHAT’S IN THE CODE?Let’s break it down.

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll">

<div class="mc-field-group">

<label for="mce-EMAIL">Email Address </label>

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll">

<div class="mc-field-group">

<label for="mce-EMAIL">Email Address </label>

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

This is the label you can remove or edit

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll">

<div class="mc-field-group">

<input type="email" value="" placeholder=“Enter your email” name="EMAIL" class="required email" id="mce-EMAIL">

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

The placeholder shows inside the field.

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll">

<div class="mc-field-group">

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value=“Sign me up!” name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

Make your subscribe button a call-to-action!

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id=“mc_embed_signup_scroll">

<p>Add an opt-in message here</p>

<div class="mc-field-group">

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

Tell people what they’re signing up for.

LET’S STYLE ITBecause a pretty form = more signups.

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll">

<div class="mc-field-group">

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id=“mc_embed_signup_scroll">

<p>Add an opt-in message here</p>

<div class="mc-field-group">

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id=“mc_embed_signup_scroll">

<p> Add opt-in message here.</p>

<div class="mc-field-group">

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

<div id="mc_embed_signup">

<form action="//elembee.us5.list-manage.com/subscribe/post?u=22030671efff74abcf94437b0&amp;id=6ffcca505f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id=“mc_embed_signup_scroll">

<p> Add opt-in message here.</p>

<div class="mc-field-group">

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

</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_22030671efff74abcf94437b0_6ffcca505f" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

DON’T WANT TO MESS WITH CODE?Try PopupAlly plugin.

BLOG IT OUTUp Next

FROM

GetYourWebsiteTogether.com