Streaming live at 10am (PST)

Turning web forms into conversations


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


#2

This is very cool. Thanks for sharing!


#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!