# How to create your first form with Collect.chat

Welcome to Collect.chat [https://Collect.chat]! Creating an engaging interactive
form for your website is easier than you think. This guide will walk you through
the three simple steps: Design, Questions, and Share, to get your first form up
and running.


DESIGN

The first step is to customize the appearance and placement of your form to
match your website's style. Here, you can choose in which position the form
should appear.



You can give your form a face by selecting from our pre-set avatars or uploading
your own custom image.

Choose a color scheme that matches your website. For a perfect match, you can
even enter a custom hex color code.

Turning off the welcome message
[https://collect.chat/help/article/1063-how-to-add-a-welcome-message-to-chatbot-widget?query=welcome%20message]
will only show the avatar. We recommend that you turn it on, so that the form is
more interactive and engaging.


QUESTIONS

This is where you build the actual conversation flow. Collect.chat
[https://collect.chat/] uses different Question Types
[https://collect.chat/help/article/1027-what-is-a-Question-type] to ask
questions and collect information.



First, let's add a Multi Choice Type
[https://collect.chat/help/article/1029-multi-choice-type]. This question type
is great for offering the user predefined options, such as Yes/No questions.

To ask the name of our user, let's add a Text Question
[/article/1030-text-question-type]. This question type is used to get an
open-ended text answer from users.

Next, let's ask the email address of our user with an Email Type
[/article/1031-email-type]. Collect.chat gives you the option to personalize
your questions using variables
[/article/1047-address-users-by-name-using-variables]. Variables can use the
answer from any of your previous questions. To add one, type the @ symbol and
choose one of your questions.

To end the conversation, we will use the Thank You Type
[/article/1043-thank-you-type], which includes a friendly GIF and a concluding
message "Nice chatting with you." You can also add a call-to-action button here.


PREVIEW THE FORM

Click on the Preview icon at the top right side and see your form in action.

You can see the variable in action here. The answer from our second question is
applied on the third questions's text.




SHARE

To add the form to your website, go to the Share section. Under Website, you'll
find a code snippet. Simply copy this snippet and paste it into your website's
HTML code.

If your website runs on Wordpress, we have a dedicated WordPress plugin. We have
documented all the steps you'll need to take here: How to add chatbot to
WordPress [/article/1007-how-to-add-chatbot-to-wordpress]

If your website is powered by a website builder such as Shopify or Squarespace,
follow the instructions on the Website Builders tab.

If your website is run by a third-party team, simply email them all the
instructions using the email template on the Email Instructions tab.