growth / How to Populate a Textarea in Unbounce Landing Page Forms

How to Populate a Textarea in Unbounce Landing Page Forms

Andy Thorne
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:

Unbounce Landing Page Form

After we Populated the Unbounce from Textarea

What the form looks like when we populated the textarea (the message) with default text:

Unbounce Landing Page Form

How to Populate a Textarea on an Unbounce Landing Page Form

  1. Setup your Unbounce landing page
  2. 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
  3. 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
  4. Use the Inspector tool (arrow picker thingy) and click the Textarea in your form – see below screenshot
    Using inspector to find the textarea of a formAs you’ll see in the inspector window (black area) the textarea has an id of “message” (textarea id=”message”)
  5. 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>
  6. Copy the Javascript above (also copy the <script> tags
  7. Then jump back to your Unbounce page, look to the bottom, hit Javascripts > ‘Add new Javascript’ a popup window opens
    Add Javascript to Unbounce Landing Page
  8. 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)
  9. Now preview your page and your textarea will be populated! Hooray!