Custom Mail Chimp Forms

 

#mc_embed_signup

This is for the whole FORM BOX "container" this is where you can change the background color. To do that change this "background:transparent". If you want the background of this form copy the code below to a word processor and make your edits there so this code here stays safe.->To change the background of this form edit: "transparent" to a HEX code such as #D2AF41.
 

#mc_embed_signup input

This is for the EMAIL input box. Right now this is setting the width100% so it can change to adapt to the size you like when you pull on the container to resize it

 

#mc_embed_signup input#mc-embedded-subscribe

This is for your SUBSCRIBE BUTTON. The way it looks when your mouse is not hovering over it. We also want it to have SQUARE SHARP CORNERS instead of the default MC corners which are rounded. We also want the WIDTH to be 100% to adapt to its container box -> IF YOU WANT THE BUTTON TO BE SMALLER: change width: 100%!important;" to width: auto!important;

 

 

To Edit The Code

 

 If you want to edit the code below copy and paste the code between <!-- Begin MailChimp Signup Form --> & <!--End mc_embed_signup--> below to a word processor. Make your edits and then paste into WIX. This way you keep this code clean ;-) 

 

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">

#mc_embed_signup{background:transparent; clear:left; font:18px "Futura Light"Helvetica,Arial,sans-serif; 
background-color: transparent;}
#mc_embed_signup input#mc-embedded-subscribe {background-color: #D4AF37 !important; border-radius: 0!important; width: 100%!important; padding: 0 10px;}

#mc_embed_signup input {width:100%!important;}

    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//thesalvagedsawhorse.us16.list-manage.com/subscribe/post?u=11fd37e717c491cd110067ac4&amp;id=69342a46e4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- 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;" aria-hidden="true"><input type="text" name="b_11fd37e717c491cd110067ac4_69342a46e4" 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-->

 

 

To Use or Edit The Code Below:

  1. Click on the HTML element. Copy and then Paste where you want it on your site. 

  2. OR click on the whole strip and this form and all its code will paste with it

  3. OR you can grab an HTML element by clicking the PLUS sign to your right, place the HTML element on the page where you want it. Double click in it and paste the code above into the element (or paste any edited code you are playing with)

  4. *don't forget to change the background color and that the form is "transparent"

  5. To EDIT the code double click on the form and paste your edited code into the HTML space and hit Update. If anything goes wrong -replace the code with the code above.. and start again.

 

Join my mailing list 

Receive discount codes, first dibs on new products & the scoop on upcoming craft fairs. 

  • Grey Instagram Icon
  • Grey Pinterest Icon