How to Populate a Textarea in Unbounce Landing Page Forms
Unbounce is a great tool for creating landing pages. One of the reasons it’s so great is because of the easy-to-use landing page builder with simple drag and drop functions. However, when it comes to doing things that are a little more complex, Unbounces page builders limits start to show.
For example, the other day, we wanted to populate a textarea within a form with some default text, so that users don’t have to fill in so many form fields.
Unfortunately Unbounce’s page builder didn’t allow us to populate a textarea with default text, even though you can add default placeholders in the text and email fields of a form.
Here’s a Before and After of an Unbounce Form With and Without a Populated Textarea
Before we Populated the Unbounce from Textarea:
After we Populated the Unbounce from Textarea
What the form looks like when we populated the textarea (the message) with default text:
How to Populate a Textarea on an Unbounce Landing Page Form
- Setup your Unbounce landing page
- Create a form in your page and add a textarea to that form. Textareas ar usually used for messaged or questions that the user may want to ask
- Open Inspector to find the ID of your textarea
If you’re in Firefox or Chrome, open up your inspector – In Firefox: Tools > Web Developer > Inspector
- Use the Inspector tool (arrow picker thingy) and click the Textarea in your form – see below screenshot
As you’ll see in the inspector window (black area) the textarea has an id of “message” (textarea id=”message”)
<textarea id="message"> </textarea> <script> document.getElementById("message").innerHTML="Your message here"; </script>
- Now preview your page and your textarea will be populated! Hooray!