[Create] Conversational Forms in Unbounce

forms

#21

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.


#22

You can achieve this with dynamic text


#24

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


#25

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

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?

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 :sweat_smile::sweat_smile:

Thank you very much in advance!


#26

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.


#27

Hey Noah :smiley:

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! :smiley: 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.


#28

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


#29

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 :slight_smile:

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


[How To] Add A Multi-Step Form 2.0
#30

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


#31

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


#32

Is it possible to use this script with conditional fields ?


#33

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

Thanks


#34

This is great!

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

Thank you


#35

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


[How to] Conditionally Display Additional Form Fields Based On Dropdown Selection
#36

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 ?


#37

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


#38

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?


#39

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


#40

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


#41

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.