Streaming live at 10am (PST)

Natural Language Form (form field size based on value length)


I am trying to make a natural language form input field be dynamic to the width of the content entered. The tutorial on Webflow asks you to set a width for the field, but this does not work if the user has a long name. I want the width of the form field to be depending on the content entered.

How can I handle this in Webflow?


Could you provide an example, as well as show us what you have already done?


I have done exactly this example

I am hoping at the field around ‘john smith’ width will be depending to the width of the content entered, rather than a set width.


There is no perfect answer, just a bunch of calculations as a workaround


Looks like custom JS. Is this possible with webflow?

#6 (preview)

This is what I used based on this answer

$('.w-input').on('keypress keyup', function() { = this.value.length + 2 + "ch";

Also, feel free to contact me for further code help and/or customization of third-party plugins


Thank you this works perfectly. Where exactly do I copy and past this script to the site? I want the form to be on the homepage.

Sorry for delayed reply, I appreciate you help.


Page Footer Code


Awesome, thanks! Do I need to edit the code block at all or do I just copy and paste in the footer code area?


The custom code I used will apply to all input fields on the site.


Hi Sam,

I’ve put this in the /body custom code area and it is not working. Any chance you could share the page on Webflow so I can see how you made this work in the designer?

closed #12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.