Freeform: Remove default styling injection

Question

I seem to be stuck with a simple -- but quite annoying -- question. I'm setting my own styling for a form and keep running into issues where I'm fighting with Freeform's default styling. I'm not including this anywhere in the template, at least that I know of, yet Freeform still seems to be injecting it's own styling onto the page. Am I missing something here where i can turn that off? Any help here would be greatly appreciated. I have attached an image showing what gets injected that I'd like removed.

Answer 1

This is probably injected as part of the form template that's used to render the form. In the Freeform section of the CP, if you edit a form and choose the 'cog' icon in the right-hand pane to access the form settings, you'll see a dropdown labelled 'Formatting Template', which lets you choose a template to render out the form markup, with a number of popular frameworks listed (Bootstrap, Foundation etc.).

In order to override this markup (and remove the CSS include), you can create your own custom templates using one of these templates as a guide. The Freeform docs cover how to do this here.

The default templates are located here:

vendor/solspace/craft3-freeform/src/templates/_defaultFormTemplates.

Make a copy of the file you want to use as a base, and place it in your own templates directory; I tend to use templates/_forms for form templates. Give your new form template a meaningful name - Freeform does some nice parsing of custom template names to display them in the Formatting Template dropdown, so it's worth naming it well.

Open your new custom template and look for a line right at the top that looks like this:

{% css formCss %}

Remove that line from your template and save it. Finally, make sure in the Admin CP > Freeform Lite/Pro > Settings > Formatting Templates, you've included the path to your custom forms template directory relative to your main templates directory. For my example directory above, I'd enter _forms as the directory path.

Now, edit your form and when you open the Formatting Template dropdown in the form settings, you should see your new custom form template. Select it, save your form and refresh the front-end form page. Hopefully, the Freeform CSS that was being injected is now removed from the markup.

Hope that helps!