Maxlength for input field on Checkout Template form

Hey, trying to set a limit for max characters for my inputs in my form.

The left one to ‘3’, and the right one to ‘5’.

As for now, maxlength=“x” in attributes doesn’t work at all and you can write limitless numbers…

Also, bonus question: I also would like the placeholder text to disappear once you press the input, but now it stays until you type something.

Big thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Typo maybe? since maxlength is the attribute required.

The baked in browser behavior is just that. There is no attribute to deliver that behavior. It may be possible with custom code, but I would really ask why bother. Messing with form element behavior is always a serious usability concern/issue.

Thank you @webdev for your answer,

Typo maybe? since maxlength is the attribute required.

Unfortunately was just a typo in this topic, but not in my project…

Please share a published URI for testing.

@webdev, https://pandy.webflow.io/pandy-hemmet-2

Read-only link is found in topic description

maxlength is for type=text.

Hello @webdev,

I put this on a text field in my projet, when I got to preview mode this works perfectly.
But when I go live on the site (safari and chrome) this doesnt work at all.

Do you know why this can be?
I’m loosing my mind with this…

It doesnt seem to be working

Thank you very much!

If you want to enforce a maxlength, apply that attribute to a text input field.

Thank you for your answer!

Actually if I’m not wrong this is a text input field, right?

I can’t see your project so I created one and set values on input fields as shown in this short video.

Hello @webdev, thank you for this!

I’m doing exactly that.

Here’s my project:
https://preview.webflow.com/preview/gallieresparis?utm_medium=preview_link&utm_source=dashboard&utm_content=gallieresparis&preview=d4d3cdaaa1bf1847d534d73a91b3882b&mode=preview

The field is the first in the “Commande” page.

Thanks for all your help!

Looks like Webflow sets the maxlength of that element (Info element on checkout template) to 256. I don’t have a shop I can test a custom field against. Your custom parameter is not being displayed in the source. You should be able to set it via JavaScript custom code on your checkout page.

First remove this code as it is broken anyway → <script> <input id="maxlength" maxlength="10"> </script>

Try an embed like so.

<script>
$(document).ready(function () {
    $(".input_gravure").attr("maxlength", "6")
});
</script>
1 Like

Excellent, it works perfectly, you are awesome!
I am not good with code and I thought it might work with it but didnt have the correct one.

Thank you, really!

Hi there,

Trying this on the Checkout page of this site in the ‘info element’ – Webflow isn’t setting the 256 character limit automatically, and when I add the embed you suggest it isn’t changing anything.

Any chance you could take a look for where I’m going wrong? I am trying to set the character limit to 350 for a gift message.

Here is the share link:

https://preview.webflow.com/preview/pyarful?utm_medium=preview_link&utm_source=designer&utm_content=pyarful&preview=fa01113d400a49dfa8ce1e9ecfcc7a24&pageId=5f53c55ef2bd75ca7d8d633f&workflow=preview