[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

J
Badge

@digibomb - Beautiful implementation! Curious on how you achieved some of the styling. I like how the box is small so you only see one question and one answer at a time. I adjusted my container size to achieve this, however, I am experiencing a white gradient starting at the top of the box, coming down and overlapping a portion of my robot text. I looked through the styling page here but am not experienced enough to know what to do with it. Any tips for me?

digibomb
Userlevel 6
Badge +1

Sorry for the super late reply here … yes, it took alot of time messing with the css to get it right. We spent quite a few hours QAing it. It’s not so much experience, it’s just playing around 'till you get right … but of course having some css experience helps 🙂

Send me your css and I’ll take a look at it.

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???

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

E

Is it possible to use this script with conditional fields ?

DPFMG

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

Thanks

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

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

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 ?

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.”);

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?

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

A

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

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.

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?

jmo

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

58

N

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

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 😉

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?

dominik.rabalski

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

Ed_Stanfield
Badge

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

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.

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.

sagarhvora

Can the answers of this forms get integrated with Marketo?

sagarhvora

Where to track the answers?

Reply


Terms & ConditionsCookie settings