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??
Thanks
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
you will also need the files under MauticFormBundle/Builder (form, script and style) for this type of template mautic/app/bundles/FormBundle/Views/Builder at 4.x · mautic/mautic · GitHub
It’s not the button text … It’s the button input attributes box. The box where you could put in custom classes etc in.
I want to put this in
class="w-[150px] sm:w-[205px] h-[40px] sm:h-[56px] text-center rounded-full text-xs sm:text-lg text-[#8B3C3A] border-2 solid border-[#8B3C3A] font-semibold uppercase font-twk-lausanne hover:bg-[#8B3C3A] hover:text-white transition duration-500 ease-in-out my-3 sm:my-6"
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.
oh, I see, you mean in the mautic form setup, the fields that store the html elements attributes has a limitation, is this correct?
for that case, I recommend you use just one class and add all the styles in the css selector for that class,
like class="mybutton"
then in the css file
.mybutton {
width:150px;
height:40px;
text-align:center;
//and so on
}
I am not very familiar with TailwindCSS but I know it should be possible to combine all those utility classes into one class
Correct …
By using class in css file defeat the purpose of using framework utilities classes in the first place. I won’t be able to style it on the fly.
Anyhow I went the “button.html.php” method by adding the class utilities in it but still require me to edit cycle the form setting and save each time I make changes in it.
You can see an example over at
Tailwind CSS is similar to Bootstrap framework or Zurb Foundation framework. Just another competitive framework to use but Tailwind CSS work great on React.
TailwindCss is very powerful and you can place all the utility classes into one component class for better reusability, like they document below, for example:
Yeah I am aware of this …
I run Mautic but not the website itself or the style of the website. All of the form are added to website using automatic javascript links.
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:
document.addEventListener("DOMContentLoaded", function(e) {
const allMyClasses = "w-[150px] sm:w-[205px] h-[40px] sm:h-[56px] text-center rounded-full text-xs sm:text-lg text-[#8B3C3A] border-2 solid border-[#8B3C3A] font-semibold uppercase font-twk-lausanne hover:bg-[#8B3C3A] hover:text-white transition duration-500 ease-in-out my-3 sm:my-6".split(" ");
const myButton = document.querySelector('button[name="mauticform[submit]"][type="submit"]' )
allMyClasses.forEach( className => { myButton.classList.add(className) ; } );
});
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.
Either lift limit or add new input box and use it for appending strictly to classes only.
Sound like a nice feature for Mautic 5