Comments

How to Edit the MailChimp Sign Up Form with CSS — 30 Comments

  1. Hi Lesa,
    I tried this out but I can’t seem to link the html with the mailchimp.css here is my code:

    Do you see anything that I need to change?

    Thanks,
    BJ

    • BJ,
      The code was stripped out of your comment, so I can’t reference it. Post it again, but wrap the code [ css ] it will display here (thanks to a very helpful plugin).

      Without seeing the code, I’d guess that your problem is the url that points to the mailchimp.css. To test this, copy/paste the url in your web browser. It should display. If it doesn’t, you’ve found your problem. To fix it, check the file path on your server. You may have an additional folder somewhere that you aren’t accounting for.

      Lesa

  2. Thanks so much for this tutorial — I was tearing my hair out trying to figure out how to get a newsletter signup at the end of every post (I’m using Add Post URL for the WP plugin).

    Quick question: How do I get a bit more white space between my signup form and the end of my post? You can see what I mean here:

    Thanks again!

    • To add more space between your post and your signup form, you’ll have to add the extra space to the end of every post. Unfortunately, there’s no easy way to “code” it in to how the Add Post URL displays.

      Just adding an extra blank line won’t work as WordPress doesn’t seem to like blank lines and has a tendency to remove them, no matter what you do. The one thing that I have found to work, and work consistently, is to put a x on the line that I want to add, and then change the font color to match the background. WP won’t remove it since it is content from an HTML standpoint.

      Incidentally, I use Add Post URL as well for the RSS sign up at the end of my posts. It’s a great tool for adding any type of code — optin, ads, copyright notice, whatever — to the bottom of every post.

  3. That worked a treat. I still think my signup form looks clunky – and I don’t look forward to figuring out how to add a little image of an ebook to the text area, but thank you for writing this tutorial because I couldn’t have done it otherwise!

  4. Still trying to decide between aweber and mailchimp. Cost for a new blog goes to mailchimp. I am concerned that selling affiliate products for monetization could get your mailchimp account banned.
    At this point I have not seen good mailchimp opt in forms. Aweber has hunderds to choose from. Mailchimp only shows a couple. Am I wrong?

  5. Have you had success integrating a MC form on your site with more than just an email field? When I select ‘get embed code’, I’m only offered the markup for a one field, email only form.

    • Matt,
      In the Create Form Embed Code screen, choose “Classic Form” instead of the default Slim form. This will give you more options.

      If you don’t like how the form displays initially, click the “options” button. Here, you can deselect: form title, interest groups, required field indicator, and format options.

      If the fields displayed are STILL not what you want, go back to the List Fields and Merge Tags screen and either add/delete fields or make different fields required. Then, go back to the Create Form Embed code and select the option for displaying either All Fields or only Required Fields so that only those fields that you want are displayed.

      Lesa

      • Fantastic, thanks for the quick and detailed reply, Lisa!

        I had tried the ‘Classic Form’ but missed that I had to deselect ‘only required fields’. It now looks how it should.

        What do you prefer for spam protection with MC?

        thanks again,

        -Matt

        • One of the added benefits of a double optin process is that it filters out spam bot registrations. Only real people who want to hear from you will be on your list.

          Use the double optin (mailchimp makes it difficult to do anything else) and you don’t need extra spam controls.

  6. Is there a common misconfiguration resulting in ‘name’ and ‘interest groups’ being left blank in subscription confirmation emails?

    i.e.,

    Email Address: @
    Name:
    Interested in…:

    • Not that I know of… Is there data in those fields that isn’t getting passed to the confirmation email? Or is it missing in the database as well? If the later, just make those fields required and then no one will be able to complete your registration without filling that information in. If the former, submit a support ticket with Mailchimp because there is something odd going on.

  7. The data is making it to the database; I have access to it. Just the confirmation emails aren’t delivering the values. Will submit a ticket.

    thanks!

  8. Hi I am having such problems. Can you help me?
    i bought a html optin signup form and just need to past mailchimp code.
    I did that and the problem is when someone enters their email address it forces them to opt in. How can I disable it?
    Plus my main problem is that I have no clue where to create the automatic thank you letter that they should get once they put in their email address.
    And my last problem is the code created a link to a website that I dont even own. How did that happen
    Can you help me

    • Eve,
      The ONLY way around the Mailchimp double-optin requirement is to hire a programmer to create a optin sequence for you. If you use the code provided by Mailchimp, you are forced to use the double-optin (it’s good business practices anyway — read my post The Single Optin vs Double Optin for more details as to why.)

      You can find the automatic Thank You letter under Signup Forms -> General Form -> Final Welcome Email. Note that you must check the box to enable sending of this email.

      Without actually seeing the code, I can only guess as to where the link to a site that isn’t yours came from, but my guess is that it is embedded into the html that you bought. I would also bet that the site it links to is spammy and not something you should associate with. For beautiful optin boxes that work with just about any email service provider, I highly recommend Using the Magic Action Box plugin.

      If you are set on using a Single optin (and bypassing the need to have people confirm), I’d recommend you check out Get Response. They are one of the few lower priced email service providers that make the double optin optional (their code works with magicactionbox too). They don’t offer a totally free account like Mailchimp, but their plans are pretty affordable.

  9. Great tutorial, I was going crazy trying to find the location of the css file never thought of just adding it to my style.css and just changing the path. This just gave me so many ideas!

  10. I have a question concerning Field Text Color ; I want to change it from Black to Yellow. And though I’ve built a signup form in Mailchimp with the Yellow as the color of the Text in Field, and then got the embedded code from the list ( which syncs these changes, hence changing them somewhat accordingly on the website). YET, the Color of the Text in the Field is the only thing I couldn’t yet change !
    I’ve searched heavily on this … Any Suggestions are very well appreciated . No seriously a %35 Discount on all our products.
    My Signup Form is found on the website here: http://www.ownadore.com
    Thanks !

    • I checked out your site and sign up form. That form needs more than a little formatting, which I’m going to guess isn’t your strong suit (not meaning to be critical, just realistic). If your site was built on WordPress, I’d suggest looking for a plugin that will give you beautiful sign up boxes without having to know a single line of code. Unfortunately, you have a shopify site, which I know little about. I suggest reaching out to the shopify people and asking them if they have any integrations for MailChimp to help make your sign up box look better. If they can’t offer you any help, my next best suggestion is to move your site to WordPress. One of the best things about that platform is there are literally thousands of developers who built amazing add-ons and then make them available to the public for free or next to free. You just can’t find that kind of diversity on any other site, especially for the price.

      • Thank You for your Feedback Lesa, it’s helpful. Since this is my 4rth year with Shopify, only invested so much , and am learning from here and there on how to best code on my own, I’m hesitant to change.
        Yet I get what you mean, Have been testing the different types of codes and making adjustments and I think it’s time I request help from Mailchimp. But then why is Shopify considered the best e-commerce platform ?
        And would WordPress allow image indexing to google ? Which I realized Shopify was slow or needed apps to allow for that indexing to take place.

        • Shopify does one thing well: sell products. So, for people who only want to sell products, it’s great. But it has limitations if you want to do anything else (like grow a mailing list).

          Google and other search engines LOVE WordPress and how it is structured, so sites built on the platform are easily crawled, no special add-ons needed. Images, in particular, are indexed unless you tell the search engines not to crawl them.

          To speed indexing of any site you build, create a sitemap and submit it to Google. Not sure how you would go about this on a non-WordPress site, but it’s super easy with a free WordPress plugin. Learn more in my post here: https://conversation2sales.com/sitemap-site/

  11. Yes I have created a sitemap the year I opened the website back in 2015; still my images weren’t indexed but recently in late 2018 and just for mobile … Thought I should put this out about shopify.

Leave a Reply

Your email address will not be published. Required fields are marked *