How to customize CSS in embedded forms?

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

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?

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

Sure, here it is: https://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

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:

https://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!

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

Awesome man, glad to hear!

If you have any questions, let me know!