Special characters in class attribute

Hello!

Thanks for your work on Contact Form 7! It’s an effective, reliable plugin for making forms.

Is it possible to have special characters in the class attribute on form elements? Specifically, having a colon in the class like this: class:hover:bg-red.

I’m trying to add such classes (from Tailwind CSS) to CF7 form elements.

What I’ve tried:

[text* your-name id:name class:flex class:border-2 class:focus:border-indigo-500 class:focus:outline-none class:rounded class:w-full class:p-4 placeholder "Enter your name..."]

CF7 ignores the classes with a colon :, producing this:

<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required flex border-2 rounded w-full p-4" id="name" aria-required="true" aria-invalid="false" placeholder="Enter your name...">

What I expect:

<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required flex border-2 focus:border-indigo-500 focus:outline-none rounded w-full p-4" id="name" aria-required="true" aria-invalid="false" placeholder="Enter your name...">

Is there any way around this? By escaping the colon, for example?

Maybe something like: class:focus\:bg-red. Or, class:"focus:bg-red".

Regards,

Josephus

• This topic was modified 6 years, 7 months ago by josephuspaye. Reason: Add expected output
• This topic was modified 6 years, 7 months ago by josephuspaye. Reason: Add suggestions