Email Subscribe in header and footer

[parlezclothing]

Hey Im trying to get the subscribe form working can you please let me know and what the code needed for mailchimp is couldnt find one

Best

cav

[Melanie – SUPPORT]

I will forward your request to a more experienced support staff, I’m pretty new and don’t want to give vague answers.
Thanks for the patience!

[b3nz0n]

i also want this feature 😉

[Melanie – SUPPORT]

Thank you for the patience.

[Cosmin – SUPPORT]

Hey,

You need to get the subscribe form embed code from MailChimp, which can be generated when editing one of your lists.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[b3nz0n]

can you please send the css so we can get the same look and feel.
or just your embed code

[Tekguild]

You will need to use the embed code generated from your Mailchimp account – if you want the same look as the Flexform demo, use the ‘Super Slim’ embed code. It should look something like this (I replaced certain parts to keep sensitive date obscured):

<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/slim-xxxxxx.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* 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=”http://yourwebsite.us4.list-manage.com/subscribe/post?u=xxxxxxxxxxx&id=xxxxxxx&#8221; method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<label for=”mce-EMAIL”>Subscribe to our mailing list</label>
<input type=”email” value=”” name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”email address” required>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</form>
</div>

<!–End mc_embed_signup–>

Copy and paste that code into the Theme Options>Header Options>Subscribe form code area.

To style the subscribe form:

1. Replace the font used – replace the ‘Helvetica,Arial,sans-serif’ code with your preferred font. For example: “Abril Fatface”, sans-serif
2. The change the font size of the ‘Subscribe to our email list’ add this to your custom styles (I use the My Custom CSS plugin) and change the number for the font size:

#header-subscribe label {
font-size: 12px;
}

3. To change the width of the drop down form, add the width property to the section of code in this section of the embed code (in bold):

#mc_embed_signup{background:#fff; clear:left; font:14px “Abril Fatface”, sans-serif; width: 350px; }

4. To change the font size of the ’email address’ and ‘Subscribe’ button text, add this to your custom CSS styles and change the number for the font size:

#header-subscribe input {
font-size: 24px;
}

5. To change the button color/style, change the class property from ‘button’ in the embed code to something unique you can use to style the button, like this (in bold):

<input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”my-email-form-button”>

Then in your custom CSS styles (again, I use My Custom CSS plugin), add the class property and style as you wish. I’m copying the 2 style types from the Flexform theme demo:

#header-subscribe .my-email-form-button {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
float: right;
padding: 6px 12px;
margin-top: 5px;
}

and this one for the border radius change on hover:

#header-subscribe .my-email-form-button:hover {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

That should get you in the ballpark.

[kittiek8]

Hi, I followed these steps, but unfortunately mine still isn’t working – please see the snapshot – or you can view the website live here: http://www.gembox.co.nz

Do you know what I might have done wrong? Is there any way I can default my site to what the demo actually looks like and make the adjustments from that? E.g slider, menus footer.

Thanks,

Kate

[Tekguild]

Kate –

I don’t want to leave you hanging but I think that, if you can’t get this working after seeing my instructions, you may want to consider hiring someone more versed in web design to help you.

You can use the theme documentation and demo content to *possibly* get what the demo looks like, but I don’t know for sure as I’ve never used the demo content – maybe someone from the Swift Team can say how that works…

[Melanie – SUPPORT]

I removed the “privacy” from your post grokism as Kate won’t be seeing your response if you post it privately.

Kate please hire a developer of your trust to assist you with your modifications, thanks a lot and all the best!

[ad]

Jush lot into this site
http://Www.mailchimp.com and u will know how to set the subscriber for your website.
Alternately YouTube is the best tutorial search for adding mailchimp form to the website

[Melanie – SUPPORT]

Thanks ad, great tipp 🙂