▼
Streaming live at 10am (PST)

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

#1

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?

#2

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

#3

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.

#4

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

https://stackoverflow.com/q/3392493/584192

#5

Looks like custom JS. Is this possible with webflow?

#6

http://sandbox-903b9c.webflow.io/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

#7

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.

#8

Page Footer Code

#9

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

#10

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

#11

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.