[Pro] Mailchimp Sign Up Form

Hi, I’d like to embed a Mailchimp signup form into a Freeway page. I have added a markup item and copied the code from Mailchimp into it, I do seem to get the form, but it’s completely stripped of any styling as it shows on the Mailchimp side.

It mentions placing part of this into the HEAD of your page, but I’m unsure how to do this. Could anyone advise?

This is the code below :

#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. */

Subscribe to our mailing list

* indicates required
Email Address *
First Name
Last Name

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What you would do is the following in Freeway:

  1. From the main menu select: Page > HTML Markup…
  2. Select ‘AFTER ’
  3. Paste the following from your code there and close the window:
#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. */
  1. Then leave the rest of the code below in the Markup item, ‘without the css sections you just pasted in the AFTER ’:

Subscribe to our mailing list

* indicates required
Email Address *
First Name
Last Name

HTH

On Sep 8, 2014, at 8:55 PM, matt covarr wrote:

Hi, I’d like to embed a Mailchimp signup form into a Freeway page. I have added a markup item and copied the code from Mailchimp into it, I do seem to get the form, but it’s completely stripped of any styling as it shows on the Mailchimp side.

It mentions placing part of this into the HEAD of your page, but I’m unsure how to do this. Could anyone advise?

This is the code below :

#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. */

Subscribe to our mailing list

* indicates required
Email Address *
First Name
Last Name

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Exactly what Mike B said. It will work perfectly!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Mike, this seems to have worked. Useful to note though that I could only get it to reference the style sheet once it was uploaded. On a local preview, it still stripped out the styles.

Would be great to know how to add some additional styling to it. ie transparent background, font colour change and custom button.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think you can do that in the actual mailchimp settings, since your doing html markup, not sure if you can change styles in FW


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I could only get it to reference the style sheet once it was uploaded

Because a link of that type will only work online. It needs to be a straightforward http:// request if you want to see it in Preview/locally

<link href=”//cdn-images.mailchimp.com/embedcode/classic-081711.css”

You may be able to change some styling - can you post a link to your online example and specifically tell us what you want to change.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Davis, makes sense. Here is a link to the online test page: http://www.covarrdesign.com/test.html

I’s just a blank page with the form in place. I can set the form to a fixed width within mailchimp, but would like to change the font colour, the button (grey) background colour and ideally have the background set as transparent instead of white.

Not sure if this can be done within Freeway or whether this needs to be done via Mailchimp?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Needs to be done via mailchimp


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Needs to be done via mailchimp

Nonsense!

This is a comment from the included code

/* 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. */

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh. Someone who used Mailchimp before told me all styling had to be done on there, guess they were wrong


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ignoring previous advice - try adding this into that MC code block in the head of your page.

    #mc_embed_signup {color: fuchsia; clear:left; font:14px Helvetica,Arial,sans-serif; }
    #mc-embedded-subscribe.button {background-color: fuchsia;}
    #mc-embedded-subscribe.button:hover { background-color: orange;}
    #mc_embed_signup input { border: 1px solid #c79191; }

That should get you started. Play around with the colours first.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I know you replied to the other thread Matt but I thought we should bring it back here.

Can you post a link to the MailChimp page that has the issues.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave, thanks, here it is: http://covarrdesign.com/dds/subscribe-to-newsletter.html

You’ll see the double-up of elements below the main subscribe button.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You have an extra/duplicate Div in your Markup

<div class="mc-field-group">
	<label for="mce-LNAME">Last Name </label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>

It has been added after

and before

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And also a duplicate Subscribe Div

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

Its nearly at the end of your markup item

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

How did you get on with this?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave, works perfectly. Any way that the code can be tweaked to make the background of the form transparent. Currently it displays in a white block? Thanks for all your help with the various bits…I owe you a beer if you’re ever down in South Africa!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Any way that the code can be tweaked to make the background of the form transparent.

Can yoo show it to me on the page where you want it to be transparent? However I am not convinced it will look right or be easy to fill in.

Maybe there is a compromise.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave, thanks. It is essentially the white background that appears behind the whole form. The actual inside of the form fields can remain white, I’d just like the cream background of the page to show through behind the text etc. I have also noticed that for some odd reason, the whole menu bar now shifts across to the left?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have also noticed that for some odd reason, the whole menu bar now shifts across to the left?

Change this line (or whatever you have now)

#mc_embed_signup { color: saddlebrown; clear: left; font: 14px Helvetica,Arial,sans-serif; }

To

#mc_embed_signup { background-color: #F4F1DC; color: saddleBrown; clear: left; font: 14px Helvetica,Arial,sans-serif; }

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options