Feature request: Option to disable default form CSS

[ara303]

When an Advanced Forms from is rendered on the front end, it has a few CSS rules applied by default. Due to the way this CSS file is authored, it's a bit of a pain to override/reset these CSS rules if they happen to not be what I want.

It would be wonderful if Advanced Forms had an option that removes the default CSS entirely, thus enabling a developer to write their own from scratch. Perhaps a toggle option at the bottom of the Display tab of the Form Edit screen to remove Advanced Forms CSS...?

Currently, one needs to fight against the default CSS to override/reset AF's default CSS. Due to heavy use of the > selector in the default, selectors are a bit uglier/messier than necessary because of the default rules' specificity. It's worth noting also that Advanced Forms' CSS is enqueued after the theme style.css file, so the theme CSS will lose specificity due to its lower load order.

These are the sorts of very specific CSS rules one has to use to reset most of AF's defaults:

.acf-form > .acf-fields > .acf-field {
    position: static;
    margin: 0;
    padding: 0;
    border-top: none;
}

.acf-form .acf-field .acf-label {
    margin: 0;
}

.acf-form .acf-field .acf-label label {
    font-weight: normal;
    margin: 0;
}

.acf-form > .acf-form-submit,
.acf-fields > .af-submit {
    padding: 0;
}

As you can see (hopefully), these are a bit more specific than they really should have to be, which is because of quite heavy use of > in the default CSS.

If the option to disable CSS in the UI isn't something that you're interested in, perhaps there could be something when displaying a form via function call? 'default_css' => false - I'm not sure if that's easier either. Maybe just like a hook would be sufficient to dequeue the stylesheet. Everything I've tried to remove that stylesheet hasn't worked.

[ara303]

A few things learned:

• It's ACF Pro that includes the acf-input.css file on the front-end, and so the weird use of > is on ACF and not Advanced Forms.
• acf-input.css is only included when logged in, which in my case 99% of users wouldn't be.
• It is still helpful to not have this CSS file when testing styles for the form, and I was able to forcibly remove acf-input.css from the front-end with the following:

function unqueue_af_css() {
    wp_deregister_style('acf-input'); 
}
add_action( 'wp_enqueue_scripts', 'unqueue_af_css', 9999 );

I've explored and solved the issue sufficiently and figured out an acceptable workaround, and so I can close this issue.

[fabianlindfors]

Hi!

Glad you figured it out yourself. I’m trying to keep Advanced Forms as stylable as possible but I’m always at the mercy of ACF.

Thanks for reaching out!