Turning web forms into conversations

Community resources Webflow Tips
#1

Yes, that’s it! Instead of boring and long forms, why not start a conversation?

Have a look at this example: https://space10-community.github.io/conversational-form/

To transform your form, just follow this easy steps:

1 - Paste this code in the custom code inside head tag:

<script type="text/javascript" src="https://cf-4053.kxcdn.com/conversational-form/0.9.5/conversational-form.min.js" crossorigin></script>

2- Insert a div in your page and over Div Block Settings insert the custom attributes:

Name:

cf-context

Value:

cf-context

3- Insert a form block inside the div and over Form Block Settings insert the custom attributes:

Name:

cf-form

value:

cf-form

And you are done! Happy conversations

You can create conversations by using other custom attributes such as cf-questions. You just need creativity.

Space10 team have done an amazing job!!! Congratz

Have fun!

PS: Someone know how to customize appearance like changing avatars and styling within webflow or with custom code? Didn’t find anything related to it.

More infos:

4 Likes
Implementation of Github Code for Conversational Forms
#3

I have found a way to customize fields within webflow.

To change font styles of user and robot conversation just insert an element and give it a class of “user”, “robot” and “cf-input”.

Download the package from github and see the file “overwrite-styles.html” to have some ideas.

Here is an example you can post over the custom code head of the page you are placing the form, normally in the contact form.

    <style>

			.conversational-form cf-chat-response.robot text{
				background: #eee;
				color: #020202;
			}
			
      .conversational-form cf-input input{
      	height: 80px;
        font-size: 110%;
				padding: 0px 10px;
				border: 1px solid #d6d6d6;
				border-radius: 50px;
				color: #020202;
				box-shadow: none !important;
			}
			.conversational-form cf-chat-response.user text{
				background: #eee;
				color: #020202;
			}
			.conversational-form cf-button{
      	background: #222;
        height: 42px;
        width: auto;
        border: none;
				font-style: normal;
      }
      .conversational-form cf-input-button {
      width: 50px;
      height: 50px;
      background: #020202;
}
		</style>

Have Fun!

#4

I know it has been a year since this topic was opened, but before I open a new one about the same subjecr I’d like to ask if anyone here has got this working and if so can I take a look under the hood?

#5

Image result for Turning web forms into conversations

Conversational Form . Turning web forms into conversations . Conversational Form is an open-source concept by SPACE10 to easily turn any form element on a web page into a conversational form interface.
Thank you
Miranda

#6

@Daniel_Sun I followed the exact steps you listed but it’s not working.

Any chance you can help?

Thanks!

#7

@ravenbranding Any luck on getting this to work? @Daniel_Sun could you please post your read only url?

1 Like