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?
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
Looks like custom JS. Is this possible with webflow?
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
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.