topic Re: Autogrow Multi-Line Form Field to its Content in CMS Development

Autogrow Multi-Line Form Field to its Content

rs13930 — Tue, 12 Dec 2023 15:48:15 GMT

Hi! I'm pretty new to using dev tools (and coding in general) I'm trying to style a form so that every <textarea> (multi-line form field) in our theme autogrows to its content. I did find this resource (https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/) explaining how to do this with a custom form and my team is using a custom form module, but how exactly would I apply this? Is this possible with a HubSpot form?

I've attached the module code and fields but can provide more info if anyone has any ideas.

Thanks in advance!

Re: Autogrow Multi-Line Form Field to its Content

Jaycee_Lewis — Wed, 13 Dec 2023 20:26:31 GMT

Hi, @rs13930 👋 Thanks for reaching out! Let's invite some of our community members to the conversation — hey @ankitparmar09 @Syeda_Fatima @MBERARD have you styled any forms using this method recently? Or do you have any insight into other ways @rs13930 might tackle their project?

Best,

Jaycee

Re: Autogrow Multi-Line Form Field to its Content

MBERARD — Thu, 14 Dec 2023 09:53:39 GMT

Hi @rs13930 ,

Can you add the following code to your module:

- in your style tag:

.input--grower { display: grid; } .input--grower::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; } .input--grower > .hs-fieldtype-textarea.hs-input { resize: none; overflow: hidden; } .input--grower > .hs-fieldtype-textarea.hs-input, .input--grower::after { border: 1px solid black; padding: 0.5rem; font: inherit; grid-area: 1 / 1 / 2 / 2; }

- after the closing style tag add the following code:

{% require_js %} <script> window.addEventListener('message', (event) => { if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') { console.log('form is ready'); const currentForm = document.querySelector(`form[data-form-id="${event.data.id}"]`); if (currentForm) { const textareas = currentForm.querySelectorAll('textarea'); if (textareas.length > 0) { textareas.forEach((textarea) => { const currentInput = textarea.closest('.input'); if (currentInput) { currentInput.classList.add('input--grower'); textarea.addEventListener("input", () => { currentInput.dataset.replicatedValue = textarea.value; }); } }); } } } }) </script> {% end_require_js %}

The script listen to a given event sent by hubspot form. Once the form is ready the function will start and your textearea will be updated.

You may need to adapt the style of the textarea and the fake element that show the text.

Let me know if you have trouble or questions.

Best,

Matthieu