[Create] Conversational Forms in Unbounce

forms

#1

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! :speech_balloon: :tada:

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

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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. :rocket:


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


Multi-Step Forms... What's The What?
#2

Noah you’ve done it again!


#3

This is absolutely killer! We are going to experiment with this immediately. Nice work.


#4

This is great. :+1:

Does anybody know a way to prevent the conversation from continuing if there is a validation error?

For example, if somebody does not enter a proper email address than the conversation would say something like “Please re-enter your email” instead of a red box popping up and the form continuing.

Thank you.


#5

I think that’s something that @Noah is looking into right now, but if anyone else has an idea of how to implement that in the meantime, I’d definitely love to see it!


#6

Hi Noah, woooww, this is so cool!!
I used it right away and built this: http://try.onefit.nl/test/
However, I would like to change the ‘type your answer here’ to another text.
Does anybody know how this is possible?
Thanks and regards,
Nicole


#7

This is really cool!

My main concern is how this works with form validation and unexpected responses. For example, what happens when the script asks for a first name and the user responds, “How much does it cost?”.


#8

Hey everyone! First, I’d like to mention that this library is very flexible and comprehensive. There’s a lot that can be done with it if you’re not afraid to get your hands dirty, so I’d highly recommend the reviewing the library here.

That said, I’ve got a few answers for some questions in this thread:

@AlanJ, this library has a couple methods for form validation. This simplest way I’ve been able to get working is by removing any built-in validation and adding a ‘pattern’ attribute to my field. You can do this with jQuery like this:

$("#email").attr("pattern", ".+\@.+\..+");

You can add a custom error message like this:

$("#email").attr("cf-error", "Please re-enter your email!");

@nicole, for the default placeholder text, you will need to overwrite the default by adding the following to the object passed to $(formElm).conversationalForm:

dictionaryData: {"input-placeholder": "test text!"}

Here’s what these two solutions look like in context:

@Phillip, Conversational forms are a relatively new concept for users, so I can see where you’re coming from with your concerns. While there are ways of validating the inputs, I don’t know of a good way of accounting for that scenario. Thanks for bringing this up though, I’ll keep my eyes peeled for a good way of solving this problem.


#9

Trying to use this in a lightbox with WP integration on the account, but the box comes up empty. Any ideas?


The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks
#10

Hey @Anders_Westholm feel free to direct message me with a link to your page and I’ll see if I can identify what’s going on!


#11

Thank you @Noah for your response. :pray: The email pattern you gave me works so I was wondering if you can also give me a pattern for an international generic phone number to make sure there are only digits and special characters as what I have tried so far only makes the form not show up at all.

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?

Thank you again.
Alan


#12

Thanks for your response Noah, will try it right away!


#13

I just want to chime and say that we have been testing these forms on multiple campaigns and they are doing very well. We have success over standard forms with this method. We’re really loving it!

Take a gander here >>> http://kellyklee.com/ppc/chubb/insurance/h.html, but PLEASE DO NOT SUBMIT THE FORM(I’ll know if you do and I will HUNT you down :slight_smile: ) at the end of the path. In this case we use conversation forms as a friendly opener and then move the user to a multistep form to complete the data collection. We have tried several variations and this one is converting the highest


#14

Very cool, thanks for sharing! Out of curiosity, what solution are you using for that multistep form?


#15

@Andy2 it’s all in Unbounce :slight_smile:


#16

@digibomb Even the multistep form? If so, how?


#17

@Andy2 yes, even the multistep … it is a riff on this [How To] Add A Multi-Step Form 2.0


#18

@digibomb Amazing! Thanks very much (and for entertaining the tangent to the original post). Spent a lot of time last year trying to figure this out in Unbounce, missed that community post from the other month.


#19

@Andy2 no prob! :slight_smile:


#20

Big shouts to @Noah for this script!

I was playing around with some convertables and tried this script as an exit overlay.

It’s dangerously close to being creepy, so I’d use this sparingly, but you can check it out here:

http://unbouncepages.com/convoconversions/