# How many characters does form button input attributes accepts?

**URL:** <https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712>\
**Category:** General Discussion\
**Created:** [January 11, 2023, 4:44pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712 "2023-01-11T16:44:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 11, 2023, 4:44pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/1 "2023-01-11T16:44:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 11, 2023, 6:15pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/2 "2023-01-11T18:15:52Z")

</div>

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:

> **[mautic/app/bundles/FormBundle/Views/Field at 4.x · mautic/mautic](https://github.com/mautic/mautic/tree/4.x/app/bundles/FormBundle/Views/Field)**
>
> 4.x/app/bundles/FormBundle/Views/Field

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](https://github.com/mautic/mautic/tree/4.x/app/bundles/FormBundle/Views/Builder)

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 11, 2023, 6:32pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/3 "2023-01-11T18:32:04Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 11, 2023, 7:12pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/4 "2023-01-11T19:12:58Z")

</div>

oh, I see, you mean in the mautic form setup, the fields that store the html elements attributes has a limitation, is this correct?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/335bfd0d5e9f88e10b132620b412121c96155803.png)

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

```auto
.mybutton {
width:150px;
height:40px;
text-align:center;
//and so on
}

```

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 11, 2023, 7:14pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/5 "2023-01-11T19:14:47Z")

</div>

I am not very familiar with TailwindCSS but I know it should be possible to combine all those utility classes into one class

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 11, 2023, 7:16pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/6 "2023-01-11T19:16:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 11, 2023, 7:17pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/7 "2023-01-11T19:17:09Z")

</div>

You can see an example over at

[https://previewone.agwm.com/](https://previewone.agwm.com/)

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 11, 2023, 7:19pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/8 "2023-01-11T19:19:13Z")

</div>

Tailwind CSS is similar to Bootstrap framework or Zurb Foundation framework. Just another competitive framework to use but Tailwind CSS work great on React.

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 11, 2023, 7:25pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/9 "2023-01-11T19:25:33Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/c/c8f4ff7638d980ad5b2aed556baaaece6c3cfb86.png)

> **[Adding Custom Styles - Tailwind CSS](https://tailwindcss.com/docs/adding-custom-styles)**
>
> Best practices for adding your own custom styles to Tailwind.

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 11, 2023, 7:33pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/10 "2023-01-11T19:33:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![leoschuler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/leoschuler/32/4798_2.png) [@leoschuler](https://forum.mautic.org/u/leoschuler)\
**Post date:** [January 11, 2023, 7:52pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/11 "2023-01-11T19:52:54Z")

</div>

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:

```auto
 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) ; } );
                });

```

---

<div class="post-metadata">

**Author:** ![escopecz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/escopecz/32/370_2.png) [@escopecz](https://forum.mautic.org/u/escopecz)\
**Post date:** [January 12, 2023, 8:37am UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/12 "2023-01-12T08:37:25Z")

</div>

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:

> <https://github.com/mautic/mautic/blob/528dddc626ec5530848852c5d0509028456ce135/app/bundles/FormBundle/Form/Type/FieldType.php#L298>

It is defined as a “string” type which creates it as a VARCHAR field with 191 char limit:

> <https://github.com/mautic/mautic/blob/528dddc626ec5530848852c5d0509028456ce135/app/bundles/FormBundle/Entity/Field.php#L233>

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.

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 12, 2023, 3:22pm UTC](https://forum.mautic.org/t/how-many-characters-does-form-button-input-attributes-accepts/26712/13 "2023-01-12T15:22:19Z")

</div>

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