[Create] Conversational Forms in Unbounce

Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

community tips scripts banner

We’re constantly exploring new ways to optimize conversions with Unbounce, and sometimes that means making form completion less of a chore and more of a conversation. That said, we’re thrilled to introduce our newest addition to Tips and Scripts…

Introducing Conversational Forms in Unbounce! 💬 🎉

Give your forms personality by turning them into conversations!
Conversational forms make it easy for designers and developers to engage visitors in a more compelling and conversational way, without making the user feel like they’re speaking to a robot.

You can see this in action (built in Unbounce) here:
http://landingpage.noahmatsell.ca/texting-form/

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

First, go grab the script:
https://gist.github.com/noahub/ee480189a99aeac35d6005ce57a2aa3a

Or alternatively, you can download the .unbounce file: https://www.dropbox.com/s/ay5pt3rwn412i5v/texting_form.unbounce?dl=0

Step 1.

Create a form element on your landing page.

Step 2.

Create form fields with conversational form labels

Step 3.

Disable auto-generate from label and create a simplified name/id

Step 4.

Create a box element, nest form inside box element. The size of this box will determine the size of your conversational form.

Step 5.

Copy the javascript snippet ‘conversational_form.js’ and paste it in your Javascripts section with placement ‘Before Body End Tag’.

Step 6.

Change the thumbnail images for the bot/user by swapping in your own hosted thumbnail image URLs.

Step 7.

Copy the CSS snippet ‘conversational_form.css’ and paste in your Stylesheets section.

That’s it!

Want to learn more about this script?
Read more about Space10 lab, the creators of the Conversational form library here:
https://github.com/space10-community/conversational-form


Can’t see the instructions? Log in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

52 replies

T

Hello,

Has anyone successfully gotten this script to work in 2020? I’ve noticed that even the example page isn’t working any longer.

T

Hi everyone,

It seems that with this piece of code only, answers are not counted as leads (empty leads list despite my multiple tests).
Id like to have the answers send with the email notification integration just like any normal form but I dont know how to process, anyone could help me?

Thanks!

sagarhvora

Where to track the answers?

sagarhvora

Can the answers of this forms get integrated with Marketo?

Joe_Savitch

I just tried installing this and struggled… until I found the answer! On the javascript you must check the box for jQuery (1.4.2) or the form won’t show up.

Also… I updated the pattern matching for email as it was breaking and used this:

[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$

Lastly, I chose show alert message for the form confirmation option and then it showed my custom alert message.

dominik.rabalski

Hi @Noah good job with that script. Its really neat!
I have a question tho:

Do you think it would be possible that after giving the last answer, user would be redirected to a new page? We have our thank you page we would like people to visit after filling the forms.

Ed_Stanfield
Badge

I’ll make a note of this and give it a try next time I have a need. Thanks.

dominik.rabalski

I have just found a fix. Use dropdown instead of radio/checkbox. Leave the first option empty tho.

A

Hey everyone. Have been using conversational forms since recently and was wondering if someone knows a solution for my following problem. When users are requested to type in a number (phone, postcode, etc.) on mobile, the regular keyboard(with alphabet and so on) pops up but it would be much better if just the numerical keyboard would show up. Does anyone know how to fix this?

N

Thanks for the script and all the new features in the forum. Still one question is left with no answer for me …
@Noah : Is there a way to use conditionnal within your script ?
One example : Are you interested by auto insurance ?
If yes -> continue the normal way
If no -> Skip the two following questions

Of course it’s an example, but I want to use it for different purpuse rgdp compliant 😉

N

@jmo : You’re missing a coma at the end of - UserImage : “https…png”,

jmo

Hi! Funny… as soon as I put the placeholder line, all disappears in the page! … what might I been doing wrong? 🙂 Thanks!

58

Ed_Stanfield
Badge

I have the same question about radio buttons in the conversational form. The Question text associated with the radio buttons is not displaying correctly. What is being displayed is the text associated with the first button. Has anyone found a fix for this?

A

Hi, that’s very helpful! Could you maybe create also one for Japanese numbers? always starts with 0 and has either 10 digits (for landline) or 11 digits (for cellphone). I would highly appreciate it.

A

Just use {previous-answer} in your unbounce form label and it will pick the answer from before.

A

I also hope this is still somehow active, I would like to know how to add these personalized messages, like in the example “Welcome Jess, whats your name”. Also every time I use a checkbox, the label is not displayed. Would be great if someone could help…

Edit: I just found one answer by myself, just use {previous-answer} in your Unbounce form label and it uses the previous answer, for example the Name

P

I hope this thread isn’t dead - I’m looking for a way to fix the issue where the question is ignored and the first selection is shown when using radio buttons. Does anyone have any fix for this?

Also trying to include validation for UK phone numbers if anyone can share this too?

C

Hi, I tried this for the phone number validation and it worked for me:

("#phone").attr("pattern", "^((([0-9]{3}))|([0-9]{3}))[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4}“);
$(”#phone").attr(“cf-error”, “Please re-enter your phone number.”);

E

Hi @Noah and @Rob , I can’t make it work with Conditional Fields [How to] Conditionally Display Additional Form Fields Based On Dropdown Selection
Are those 2 scripts compatible ?

H

Hi, thanks for the link. How do you apply the dynamic text to the conversational form e.g. making it personalised by stating the name of the customer, as it doesn’t state it in the link.

Thank you

H

This is great!

Does anyone know how to remove/replace the unbounce icon on the left hand side of the conversational form?

Thank you

DPFMG

@seanofa & @Etienne You are not the only one this is driving me mad please healpppppppppppppppppppp

Thanks

E

Is it possible to use this script with conditional fields ?

S

Also, when I tried to use radio buttons or checkboxes in the form, the conversational area is filled with the first option of the radio buttons/checkboxes and not what was typed into the field label. Do you know how to fix this issue?

I also have the same problem… is this an easy fix, or have I missed an obvious step?
Thank you in advance

nikPod

@Noah or anybody, has anyone discovered a way to ask multiple questions at once while using the convo form?

Here’s the use case.
We need the visitors height in inches.
Obviously, people would rather enter feet and inches, then have us do the math for them.

We would LOVE to use a convo form on this project, but I don’t see an easy (user friendly) way to achieve that goal.

Any insight???

Reply


Terms & ConditionsCookie settings