How to Populate a Textarea in Unbounce Landing Page Forms
How To Populate Textarea Unbounce Landing Pages Forms and set default text to make forms easier to use for your users. 9 simple steps on how to prefill Unbounce Landing Page forms with Javascript.
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.
Luckily, you can add Javascript to an Unbounce page, and this is what helped us to populate our textarea with default text.
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”) - Next, you’ll need to get your Javascript ready, an example below from this thread on Stackexchange (thanks Hari Das)
<textarea id="message"> </textarea> <script> document.getElementById("message").innerHTML="Your message here"; </script>
- Copy the Javascript above (also copy the <script> tags
- Then jump back to your Unbounce page, look to the bottom, hit Javascripts > ‘Add new Javascript’ a popup window opens
- Once you’ve pasted your Javascript, click ‘Save Code’, then when you’re back in the Unbounce Page Builder window click Save Changes (top right)
- Now preview your page and your textarea will be populated! Hooray!