Remove default styles on ConvertKit form in WordPress

user_7109869 0
Viewed 217

One has a ConvertKit form, that was added using ConvertKit plugin, and uploaded on a widget as follows

enter image description here

After applying some styles, when I am logged in, the form looks like this

enter image description here

However, when I log out, there are some default styles being loaded and the form ends up looking like this

enter image description here

How does one remove ConvertKit default stylings?

There may be different ways of removing the default styles applied by ConvertKit. I have tried the following, but with no success:

Inspecting the form in the front-end, one sees that inside a form with the class "seva-form formkit-form", apart from two div, one has a style element., as follows

<form class="seva-form formkit-form">
   <div class="formkit-background">...</div>
   <div data-style="minimal">...</div>
   <style>...</style>

As I have seen that removing the style block <div data-style="minimal">...</div> solves the issue with the form, tried, as per @m4n0's suggestion applying .formkit-form div[data=style="minimal"] { display: none; }, but it didn't solve the problem.

wordpress forms plugins widget css
1 Answers

Based on your changing requirements that we discussed through comments:

form.formkit-form[data-uid="3624b8b144"] {
   border: transparent;
   margin: 0 auto; /* To center the form, you can also use flexbox centering */
}

/* I had to increase the specificity of the below selector because there are other selectors acting on it */

form.formkit-form div.formkit-powered-by-convertkit-container a.formkit-powered-by-convertkit {
   display: none; /* To hide the copyright but check how their licensing works */
}

.formkit-guarantee a {
    color: #fff; /* To change the color of privacy link */
}

Output:

enter image description here

user_48139130
Related