WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
[resolved] How to customize CSS in embedded forms? (8 posts)

  1. Marcelo Pedra
    Member
    Posted 1 year ago #

    Hello, I'm trying to do the same thing as in this thread:
    http://wordpress.org/support/topic/plugin-mailchimp-list-subscribe-form-opt-in-form-on-a-different-page?replies=4

    But I would love to use a custom CSS to format the HTML of the embedded form and make prettier than the one in the widget. What would you recommend to do? Can I copy and paste the generated form and use my very own CSS to style it?

    http://wordpress.org/extend/plugins/mailchimp/

  2. mc_tak
    Member
    Posted 1 year ago #

    Hey Kent,

    Thanks for posting your question to the forum. In taking a look at the previous post that you linked to, it sounds like you're looking to use the shortcode to add a form onto your website, thenstyle that with your own CSS. This is definitely doable!

    To clarify, the process of incorporating your own CSS code should not be affected by whether you decide to add a form using the shortcode or not. You should see a consistency in naming conventions in the sign up forms that are generated with the various methods of adding it which are available.

    So, the approach should still be the same. Add your shortcode to your site, then add your custom CSS code to your website. If you're using a WP theme, you can even add your CSS to your theme's primary stylesheet, which is typically in the WP admin area under Appearance > Editor.

    If you're looking for what elements to use in your custom CSS code, I'd recommend using your browser's view source tool or, even better, the 'inspect element' tool in your Chrome browser.

    If you have any questions, just let me know!

    -tk

  3. Marcelo Pedra
    Member
    Posted 1 year ago #

    Hello mc_tak, please notice that I have the mailchimp widget in the footer sidebar, but I'd need to publish it inside the content of a page too.
    How can I customize the CSS for the second form while not affecting the other?

  4. mc_tak
    Member
    Posted 1 year ago #

    Hey Kent,

    Would you be able to link me to the site you have the two sign up forms on? That way I can take a look and see if there are any available options.

    -tk

  5. Marcelo Pedra
    Member
    Posted 1 year ago #

    Sure, here it is: http://casafad.com/suscribite-al-newsletter/

    The solely inclusion of the shortcode just include the already customized form from the widget. Any solution in order to replicate it nicely in the body of a content page? Thank you

  6. mc_tak
    Member
    Posted 1 year ago #

    Hey Kent,

    To control each form independently, you'll want to use nested selectors in your CSS code. This article talks about that a bit more:

    http://css-tricks.com/child-and-sibling-selectors/

    So, for example, your body's sign up form is inside of a <div> with class="entry-content". You can set your CSS uniquely for this sign up form by doing something like:

    .entry-content .mc_merge_var{
          //css
    }

    Which will edit the elements inside of the entry-content class, that have the .mc_merge_var class.

    If you have any questions, let me know!

  7. Marcelo Pedra
    Member
    Posted 1 year ago #

    It works like a charm. I will customize it that way. Thank you very much!

  8. mc_tak
    Member
    Posted 1 year ago #

    Awesome man, glad to hear!

    If you have any questions, let me know!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.