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?
samliew
(webflowexpert.com)
December 21, 2017, 5:43am
2
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.
samliew
(webflowexpert.com)
December 21, 2017, 5:59am
4
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?
samliew
(webflowexpert.com)
December 21, 2017, 6:13am
6
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.
Awesome, thanks! Do I need to edit the code block at all or do I just copy and paste in the footer code area?
samliew
(webflowexpert.com)
January 7, 2018, 11:06pm
10
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?
system
(system)
Closed
May 12, 2018, 11:35pm
12
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.