Comments

How to Edit the MailChimp Sign Up Form with CSS — 25 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!

Leave a Reply

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