Overriding Email Octopus Signup Form Styles with Custom CSS

Image created for illustrative purposes only

The Problem

Let's imagine this scenario: you use Email Octopus for your email sign-up form, and your website has both light and dark themes. You want your form to have some styles applied when the light theme is on, and you also want other styles when the theme is dark. If you are in this situation, then this blog post is for you, because this situation is exactly what I encountered along the way. After some research and trial, I found a way to style forms according to the theme. And this is by using custom CSS.

The Solution

To override the Email Octopus styling of the sign-up form, we can leverage the power of CSS. We need to inspect the sign-up form using browser inspection tools and see what styles we want to override. Here I will show what styles I changed.

/* .dark is the class on the HTML element itself, then we have the specific Email Octopus elements */
.dark [data-form='47723b6c-8f81-11f0-b7c3-cf3806724efd'].inline-container {
  /* We need '!important here', because the Email Octopus form is using
  that */
  background-color: oklch(0.13 0.028 261.692) !important;
}

/* This selector is quite complex, but this is needed because the Email Octopus also uses a similar selector, and to override that, we need a selector with higher specificity */
.dark
  [data-form='47723b6c-8f81-11f0-b7c3-cf3806724efd'].inline-container
  .eo-form-wrapper
  .text-block {
  color: oklch(0.967 0.003 264.542);
}

/* And the main thing is that I like to write long assssss commments, this is just in my nature */

.dark
  [data-form='47723b6c-8f81-11f0-b7c3-cf3806724efd'].inline-container
  .eo-form-wrapper
  h1 {
  color: oklch(0.967 0.003 264.542);
}

In the code above, I did this: in the first CSS rule, I selected the relevant class from the Email Octopus sign-up form and assigned it a darker background color. Then, below that, I changed the text color to be lighter. And in the third CSS rule, similar to the second, I changed the color of the text. If you are interested in what oklch() that I used in CSS above is, then go to MDN documentation. About CSS specificity, you can read here. The result is down below:

And if the light theme is on, then there won't be any dark class on the html element, and therefore, styles from the Email Octopus form won't be overridden. Here is how it would look on the light theme:

Conclusion

Here you go! This is the solution I used to the problem of not having different CSS styles of a third-party subscription form in my application 😃.

Got questions? Send me an email to commitnobug@outlook.com