How to display a plain text field as a Multiple-Line input field within my User Account Sign Up Form?

I am looking to display a plain text field as a Multiple-Line input field within my User Account Sign Up Form for more text heavy sections like “Bio”, “Positions”, “Awards & Accolades”, etc.

When selecting a Plain Text Field to add to the Custom Fields under User Account Settings it explicitly states that this field can be displayed as a single or multiple-line input field however, i’m seeing no way to actually do this when designing the Account sign up page.

Read Only Link: Webflow - Black Women in Ecology, Evolution, and Marine Science

User Settings Screenshot - Field Description

User Settings Screenshot - No Radio Buttons for Single or Multiple-Line

I’m not sure where you’re seeing the multi-line option, I haven’t noticed anything. Can you share a screenshot?

In any case, I’ve looked into this and unfortunately the way the User Accounts UX works, you have to drop fields rather than bind them, so you cannot replace an input with a textarea in the designer.

If you try to do it in script, even with the same id & attributes, Webflow.js does not function properly to identify the textarea as it’s own.

And, in the current state of browser tests I’ve done, I’ve not found any easy way to make an input behave like a textarea with word wrapping, line breaks, etc using CSS word-wrap, height, etc.

Basically that leaves two approaches I’ve used;

PROXY THE TEXTBOX
Hide the textbox, and place a textarea element. Use JS to copy data back and forth. The problem there is that webflow.js has a significant delay before loading and setting those fields on the /user-account screen, and there is no JS event to hook into from which you can detect that field update. That means some hacky mutationobserver work.

SEPARATE FORM, EXTERNAL DATA
Option #2 is a separate form that is wired to a webhook and external endpoint. You have a user identifier, and you send/retrieve that additional data externally, or possibly even into the CMS through the API and serverless function. Note this is hard to implement at sign-up, eaiser on the user-accounts screen since the user record is already created. When necessary I do this as a two-step onboarding. Part one is just name, password, etc. Part two occurs at first login.

If you’re trying to collect data for a user directory, you might need to head in that direction anyway, since otherwise those custom user fields are inaccessible to collection lists.

I am actually interested in this approach. Do you have a tutorial anywhere? I’m currently using Make for connections.

How do you limit it to first login? and what about if they want to update their directory information – They resubmit the whole form again?

Would there be anywhere they could see their information within the User Account Page?

I build these types of solutions for client projects but each is different, so I haven’t tried making any general tutorials like this.

For onboarding, you can route them on first login to their user-accounts page.
I’ve built a routing solution here for User Accounts-

Yep, your User accounts page is where you’d likely want to create and wire this form.
You’d load the current data, let them edit and resubmit it for an update.

Yes that’s how you’d likely want to build this, as a separate form on User Accounts.

How would I load the current data from their previous submission?

– Also thank you sooo much!!

In the option #2 I described all of that is external and you’d build an API or use automations and webhooks to access it.

On the client side, you’d use Javascript to get and set that data through your webhooks. It’s all custom development, Webflow doesn’t provide any external data provider support natively.

This is why each build is unique- it matters what you’re storing, where you’re storing it, when you need to update or retrieve it, and so on.

I was able to come up with a great solution for this – thank you for pointing me in the right direction.

How did you end up approaching it?
I’m certain others will struggle with this too.

1 Like

Would love to hear how you approached this as well!