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

http://natural-language-form.webflow.io/

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

javascript - Adjust width of input field to its input - Stack Overflow

Looks like custom JS. Is this possible with webflow?

Natural Language Form (preview)

This is what I used based on this answer

<script>
$('.w-input').on('keypress keyup', function() {
  this.style.width = this.value.length + 2 + "ch";
});
</script>

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?

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