[Create] Conversational Forms in Unbounce

Show first post

52 replies

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.

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?

nicki123tw

Hey Noah 😃

Thank you for the replies!

I have tried using

$("#email").attr(“pattern”, “.+@.+…+”);
replacing #email with #number but the I know absolutely nothing about what to replace for the “pattern” part and so when I used that custom validation, the whole conversational form just stops working.

If you have tried it out and managed to make it work do let me know! 😃 CUrrently I’ve just added a message at the end of the conversational form telling users to refresh the page and fill in the information again if anything went wrong.

Noah
Userlevel 7

Hi @nicki123tw, you may want to try removing the built-in phone number validation and adding custom validation to the phone number field similar to the email validation mentioned here:


I haven’t tried this with phone numbers yet, but I think the configuration should be similar.

nicki123tw

Hey there @Noah and the rest of the Unbounce community on this thread 😃

I have just tried this awesome script yesterday, but ran into a few small issues that i was wondering if you could help me with. As shown in the gif below, I was able to validate e-mails and thus prevent users from going further down the form if the input was wrong, but unable to do the same for phone numbers - the error only shows up after the whole conversation was complete.

I tried using CSS to style the form to make the borders 25px on all corners with the below code, but somehow only the bottom corners appeared and opacity simply did not happen:

.conversational-form {
border-radius: 25px;
opacity: 0.5;
}

Is there a way to have an option at the end of the form like ‘let’s do this again’ so that the user can start over with the whole form in case there was an error? Or even better, have the conversational form show up in the lightbox so that the user can just exit the lightbox and restart again with a lightbox button?

com-video-to-gif

I know that’s quite a lot of questions at once but I’ll definitely appreciate it if anyone can help with this issue too 😅

Thank you very much in advance!

2

This amazing tip doesn’t work on IE. Someone have a solution ?

digibomb
Userlevel 6
Badge +1

You can achieve this with dynamic text

F

I wanted to know if we can have some more personalised conversations like, “Thank you {name} for submitting the form. Our team will get back to you within 24hours.” How to use the {name} field inside the other form fields.

Les

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/

digibomb
Userlevel 6
Badge +1

@Andy2 no prob! 🙂

A
Badge

@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.

digibomb
Userlevel 6
Badge +1

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

A
Badge

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

digibomb
Userlevel 6
Badge +1

@Andy2 it’s all in Unbounce 🙂

A
Badge

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

digibomb
Userlevel 6
Badge +1

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 🙂 ) 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

N

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

AlanJ

Thank you @Noah for your response. 🙏 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

Noah
Userlevel 7

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!

A

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

Noah
Userlevel 7

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.

Phillip

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

N

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

Jess
Rank
Userlevel 7
Badge +1

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!

AlanJ

This is great. 👍

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.

Reply


Terms & ConditionsCookie settings