Developing a template for form based on Tailwind CSS framework so I could use Tailwind CSS utilities in the form input attributes to style the form itself.
So far so good but I can’t style the button the way I wanted since it doesn’t seem to allow me to add more utilities in the form button input attributes because it won’t accept any more characters in the inputbox.
Is there a max character set to the form input attributes box??
I don’t think there is a limit on the button text, if there is any restriction, it is probably the css/style of the page, but when building a form template, you can also update the html used to render each input,
you can copy the specific php file for that form element from here (make sure you copy from the mautic version you are using:
and place inside your template folder under the subfolder: html/MauticFormBundle/Field
But it won’t let me because of character cap. It works but there was no more room for my hover effect classes in that input attributes box. The characters are not capped by the css or style since it a utility class. It seems to be capped by that input text box.
I will check the php file out but I really want it to be editable via input box in form setting instead of having to go edit template then reload template every time I make a change to it.
The style of form must be done on Mautic side using whatever framework the website based on. This website is a new website developed on Tailwind CSS framework which I don’t have access to any of its’ style so it all have to be done on Mautic side.
This is why it easier for me to use utilities classes because if the website developers decided to out of the blue make changes to the themes then form will still change with it since it using their css not my own css.
That why I am avoiding adding my own css on Mautic side when theming this form for “other” when I don’t have access to it but I run the Mautic for them.
I see, unfortunately you need to workaround the field size limitation, the best way would be to write a css class, and you can inject that class in different ways: a mautic form theme, directly on the page you will insert the form or either in a HTML field inside the mautic form, where you can open a <style> tag.
now, since you are using the tailwindCss, if you want to use that utility styles in you css, you would have to write the class with tailwindCSS, run the pre-processor, and attach the output css.
another workaround would be to run a script after the page is load and add the utility classes you need dynamically, something like:
The limit of 191 characters is there so if you’d try to save more it wouldn’t end with a 500 errors as you’d be storing more characters than the database column can:
It is defined as a “string” type which creates it as a VARCHAR field with 191 char limit:
VARCHAR columns are set to the length of 191 characters by default as that’s the max length that can be used for indexing for the UTF8MB4 encoding. However, this field does not have an index and I don’t see a reason why it would have an index ever so feel free to create a pull request with increased length for this field and column. It will need to contain also migration for the existing Mautic installations. See app/migrations folder for examples.