Typeform - Build Conversational Forms And Collect Data

• Typeform  is an online form builder which helps to collect and share data. Typeform differs from other form builders by collecting data in a conversational form with its unique design.
• In the year 2012, Typeform was founded in Barcelona, Spain, by David Okuniev and Robert Muñoz
• Goto typeform

Pricing plans of typeform

Basic free plan
1.10 fields per typeform
Basic question types
2.Metrics & Reporting
3.Self-notifications (email)
4.Answer piping
5.Send data to 500+ apps (Zapier)
6.Responses API
7.Embedding

PRO Plan

“USD 30/mo”

1.Unlimited typeform fields
2.Advanced question types
3.Metrics & Reporting
4.Self-notifications (email)
5.Answer piping
6.Send data to 500+ apps (Zapier
7.Responses API
8.Embedding
9.Conditional logic (logic jump)
10.Respondent notifications (email)
11.Calculator (scoring & pricing)
12.Custom Thank you screen
13.Hidden fields
14.Payment field
15.MailChimp integration
16.File upload field (2Gb storage)



PRO+ Plan for 1 user

“USD 59/mo for 1 user”

1.Unlimited typeform fields
2.Advanced question types
3.Metrics & Reporting
4.Self-notifications (email)
5.Answer piping
6.Send data to 500+ apps (Zapier)
7.Responses API
8.Embedding
9.Conditional logic (logic jump)
10.Respondent notifications (email)
11.Calculator (scoring & pricing)
12.Custom Thank you screen
13.Hidden fields
14.Payment field
15.MailChimp integration
16.File upload field (4Gb storage/User)
17.Invite other users to workspaces
18.Priority support
19.Customer Outcomes Manager (for yearly accounts with 10+ users)
20.Redirect upon submit
21.Webhooks
22.Close embedded typeform after submit
23.Remove Typeform branding



What type of forms can be created at Typeform ?
1.Contact forms
2.Contests
3.Interactive storytelling
4.Invitations
5.Job application forms
6.Landing pages
7.Online order forms
8.Polls
9.Questionnaires
10.Quizzes & tests
11.Registration forms
12.Simple apps
13.Surveys
14.Waiting lists

• You can try PRO for free with basic plan (free) with some limitations.It means you can use the pro facilities in private mode instead of public mode.

Typeform Dashboard

• Typeform dashboard has the menu account settings, help centre page link. We also have the option to create new typeform and we can create workspace.
• Workspace helps to gather two or more different forms in one place.
• In workspace you can also invite other people.
• Forms in the workspace has the dropdown button which has the link options for

1.Editing the form
2.Preview option
3.Duplicate
4.Results
5. Delete

What are the options available to create Newform?

1.Blocks
2.Settings option for the selected block
3.Design
4.Logic Jump
5.Calculator
6.Notifications
7.Settings option for the overall form
Apart from this , in the create new form page we have 3 more tabs available.They are Integrate, Share, Results.These options were explained after Hidden Field block.

• The editor has some features which you don’t even need to drag and drop.
• Typeform knows the need of forms and they made it more simple.
• Just choose a block the design will be automatically created.Colour changing options available.

Blocks:
Blocks consists of variuos types.They are
1.Welcome Screen
2.Thank You Screen
3.Multiple Choice
4.Short Text
5.Long Text
6.Statement
7.Picture Choice
8.Yes/No
9.Email
10.Opinion Scale
11.Rating
12.Date
13.Number
14.Dropdown
15.Legal
16.File Upload
17.Payment
18.Website
19.Question Group
20.Hidden Fields

• In the above blocks most of them have the common  options Image ,Video and Description.
• Except the blocks of Welcome, Thank you, Statement, Question group and Hidden fields all other blocks are having “Required” option you can enable or disable it.

Welcome screen:

2.Thankyou Screen:
It has,
2.1,Redirect URL
2.2 Social Sharing Icons

3.Multiple Choice:
Multiple choice has,
3.1 Multiple selection:
When it is disabled, you can choose only one choice and it will automatically skips to next block.
When it is enabled, you can choose multiple choice at the same time.

3.2 Randomize:
When it is enabled,

• You have choice one,two,three,four.
• Typeform will automatically (in random order) set the choice three,one,four,two .
• Sometimes user  will choose the first choice whatever it may be without viewing other choices.
• Randomize option with its rearranging choices helps to view all the choice and after that selecting suitable choice by the user.

3.3 Add “other” option:
Sometimes the user may feel he/she haven't found the choice what he/she is looking for , they can use this option and they can write some words!. Typeform has this option forMultiple Choice .

3.4 Vertical alignment:

• Multiple Choice by default will arrange the choice in horizontal (i.e in 2 (or) more column wise).
• By enabling vertical alignment , the choices will arrange in only one column that is vertical !.

20. Hidden Fields:
Here we are going to see piping variable option first.
What is piping?

• Piping makes the visitor to feel having a live conversation while filling the form.
• Traditional forms were have just blank fields with required mark and it is boring.
• Instead of that typeforms comes with an super option,piping variables.For example, When visitor gives the name fred, if you have already set the piping option, you can now set further questions with the given name like “hello fred!” , “why fred!”, “hi fred!” instead of asking   “what’s your” , “enter your”,”how did you”.
• Like above , you can grab informations from user and immediately you can use it for futher questions which makes user to feel having a live conversation like in chats.

How to use piping?

• First choose a block and write like “What is your name”.
• Next choose another block and now type “@” It will display piping variable in dropdown menu “What is your name” as a small yellow block .Click on it and after that piping block, now write “!Nice name. And  what’s the favourite food for you [piping block]?.
• For the above concept it will be look like below,

[piping block] “!Nice name. And  what’s the favourite food for you [piping block]?.
But the user will see like below.
fred!Nice name. And  what’s the favourite food for you fred?.
Because the user have already given the name fred.

What are Hidden Fields in typeform?

• Hidden fields can be used to give custom URL (for example URL with user first name & more...)to a user who already known. For example, subscriber  of your website.custom URL is a link to form created with Typeform.
• If you are taking a new  survey  for your subscribers,  you don't need to set a blank field in the survey to ask name once again. Instead you can welcome  the subscribers  with their  first names using hidden variables.

How to work with Hidden Fields in typeform?
Create a form in workspace.Click dropdown button and got to edit option.
Note: In that page 3rd column has URL created for this particular form.Have a small look on it because we are going to make some changes here.Assume URL is now https://www.example.typeform.com/to/Abcde

• First click block option and select hidden fields.
• Hidden field block appears.Here we need to enter variable names.
• What is variable name and why it is needed in hidden field?.

Variable name used to store a value , first name,last name & more. In short it helps to store our information which we entered.

• Ok,return to the topic hidden field block,Now we need to enter variable name.
• Remeber that if you have finished typing variable name(for example:firstname) you need to press Enter button.
• Next you will get immediately a field on left most side of the form  for the entered variable name.
• Enter a value (for example:kavi).
• So now you can understand the above concept by looking below.

firstname(variablename) – kavi(a value).

• Note:If you write variable name in UpperCase letter it will automatically change into Lowercase letter.
• Now the URL which discussed in the topic https://www.example.typeform.com/to/Abcde will be changed into https://www.example.typeform.com/to/Abcde?firstname=kavi
• In the form, now you can use hidden fields anywhere.For example, Type “@” in the editing screen form.Varible name will appear.Here we have firstname & it will appear.Choose it.But in output it will show kavi . So if you type “Hi @!” & chosen firstname in editing and saved it.The live form will show “Hi kavi!”
• And you can see the responses made by the user at Results page.

Integrate:
It is of 2 types
1.Integrations
2.Webhooks
Integrations:

• Datas collected in typeform can be stored automatically to other online apps like google spreadsheets with the help of integrations.
• The typeforms can be integrated to other online apps also.Some are,

a.Mailchimp
b.Cloudflare hosted site
c.Automate.io
d.Zapier integrations.It will help to integrate typeform datas upto 500 services.
Webhooks:

• Webhooks is a Pro+ plus plan in typeform which costs 59$/month for one year.
• In general "Webhook is a notification will be sent auomatically when a specific event(ex:name submission in form) occurs".
• Users who are using this option should have some knowledge about this.So users, be sure what you are doing with this.
• To explain webhook with an example,assume that you have a webapp and a typeform.A webapp also have a URL.Copy that URL and paste that in destination URL which is in Typeform webhook and check whether request sent is working or not.
• If request sent loaded successfully , it means that webapp connected perfectly.
• After that if a user submitted data in typeform(which is called as an event technically), a notification will be sent automatically to the webapp.
• Above said is a small example but i hope it will be little bit helpful to understand the webhook.

Share:

• We can share our typeforms in various ways.Typeform further simplified sharing forms in 3 ways.

1.Link
2.Embed
3.Email
Link:

• If you want to share your typeforms to socialmedia sites, gmail then you can use this option.
• In this page, you can see a link.Copy the link and paste it in your favourite social media sites.

Embed:

• If you want to use typeform in your website/blog then you need to use embed option.
• Copy the code and paste in source editot (html editor) of website / blog.
• It has 3 types

1.Standard
2.Full Page
3.Popup
Standard:

• Standard type can be used in sidebar, above the footer (or) below the header.
• You can set the height and width of the form.

Full Page:

• In this type  ,the website will be at back position and Full Page will be at front position.(i.e)Website will be hided.
• I think it is one of the best option if you don’t want to create landing page.However we can’t completely replace Landing Page needs.

Popup:

• The output of the Popup type will come with a button. And if you click the button, typeform appears with a popup.
• It has 3 types

a.Popup – Normal type of popup which appears at the center.
b.Left Drawer- Popup starts from left and also stays at left.
c.Right Drawer-Popup starts from right and also stays at right.

• We can also set the popup form to display automatically when the website/blog loads.
• We can set the popup form to close automatically when the form is submitted.

Email:

Results:

• Results page helps to view the details submitted by the users/visitors in the form.
• Also you can view which devices(like Pc or mobile) used to submit the form.
• If you have used google analytics, it is easy to understand the results page.

Logic Jump

• Logic Jump is one of the awesome which ask questions only for the selected category using conditional statements.
• Sometimes in forms, questions will start from multiple choice/topic like Computer  (or)  Sports ?
• If the user choose computer he don’t need to answer about sports
• In this situation , Instead of setting  skip option  to the user for sports questions
• We can also set only computer questions for the user
• Typeforms can do the above things with logic jump

An example for logic jump
I have created sample question for logic jump and it needs the block
1.Multiple choice Block
2.Question group block [Important block].When there is a logic jump concept used in form this block will be needed atleast 2.
3.Short text block
Sample question created for logic jump
In Multiple Choice block
Are you a blogger or webdesigner?
blogger
webdesigner

In 1st question group block
If the user chooser "blogger" then this 2 questions will be asked
1.How many posts you will  publish in blog per week ?[short text block]
2.How many pageviews you will get in blog for month? [short text block]

In 2nd question group block
If the user chooser "webdesigner" then this 2 questions will be asked

1.How many projects you will get per month ? [short text block]
2.How many projects you will finish per month ? [short text block]
Now the above question is very basic and you can also use this test.
Now create form using block for the above question and after that go to logic jump.
Logic jump page
Here you can add conditions which is called logic jump.And also you have some other options.They are
Logic Map (Beta) – Each block will be arranged like numbered list.You can select anyone block and after that you can apply logic jump.
Editor-You can directly view and edit the blocks which you have arranged in form page editor.
Live(Preview) – You can have sample view of the form output.
Sample structure of conditonal statement in logic jump
If [multiple choice block] is/is not  [multiple choice option 1/multiple choice option 2] Then jump to [question group block / short text block]

And for the above sample question we can create conditional statement like this
First condition:
If [Are you a blogger or webdesigner?] is/is not [blogger(choice)] Then jump to [Blogger(question group block)]
Second condition:
If [Are you a blogger or webdesigner?] is/is not [webdesigner(choice)] Then jump to [Webdesigner(question group block)]

Calculator

• If you want to make simple quiz competition, typeform calculator is one of the best option.And it’s a PRO Plan .Still you can use/test this option in private mode.
• Check the video
• From the above video i am explaining calculator.
• First you need to create multiple choice block .Create Minimum(but not compulsory) of 2 ,so you can understand better, how it is working.
• Choose a block , After that choose Calculator option.
• In the Calculater page, Click Add a Calculation .And after that you can see,

When answering block [1]
If answer is dropdown1then dropdown2 – blank box to the sum of the dropdown3
Explanation for the above line:
1.[1] represents the block you have chosen.
2.dropdown1 – It consists of choice options 1,2 and so on for the selected one question .
3.dropdown2 – It consists of basic arithmetic options such Add,Subtract,Divide and Multiply.
4.blank box –Here we can give marks to the choice.
5.dropdown3 – It was named as Score which represents the marks you have got .
5.1 Actually it is one of the variable in typeform which can be used to show final marks for the quiz attender.
5.2 Scores will be calculated in each block .And scores will be updated with every right or wrong choice .
5.3 After last block, it will show the original marks, the attender has got.

• Calculator Page also has 3 view options.They are,

1.Logic(It’s a beta version) – It will look like flowcharts view like blocks.We can say like a Visual representation
2.Editor – It is similar to form editor
3.Live preview of the form.
How to show quiz marks to the quiz attender?

• If you are only using the multiple choice, the visitor cannot see his marks.To show marks to the visitor who attended quiz, we need to use variables .
• Create a Thank you screen .In the description fill the word with “Your Score”.
• After that Type “@” symbol .Now the variable apperas with dropdown option.
• In that you can see rose color small block Score .Just click it to add in the form.
• In the Live view you can see the full quiz form.

Notifications

• In the notification option .It has two tabs.We can enable (or) disable this option.

1.Self notifications
2.Respondent notifications
Self notifications:
Send a notification to : Here you need to enter an email. For example, Suppose if you are the creator of the form when a new responder submits the form you will get notification automatically in your mail.So you need to enter your email here.
Reply to :Here you need to enter respondent email. In the above example a new responder submitted the form.We can send a thank you mail for him/her with this option.
Note:To get respondent email, you should set email block in typeform.

• Typeform has premade of subject lines and Messages with piping variables.So the datas will be passed and displayed automatically.

Respondent notification: It must be enabled then only responders can get thank you mail.Similar to self notification it also has premade of subject lines and Messages with piping variables.

Settings

It has 2 tabs.
1.General
2.Messages
General:
You can change the language.Typeform support 25+ languages
· Catalan
· Chinese (simplified)
· Chinese (traditional)
· Croatian
· Czech
· Danish
· Dutch
· English
· Estonian
· Finnish
· French
· German (formal)
· German (informal)
· Greek
· Hungarian
· Italian
· Japanese
· Korean
· Norwegian
· Polish
· Portuguese
· Russian
· Spanish
· Swedish
· Turkish
· Ukrainian

• Progress Bar can be enabled (or) disabled.You can set progress bar proportion type like 2 of 10 questions answered.Or like interms of percentage. 51% completed.
• Typeform Branding - You can remove typeform logo by going PRO+(paid plan ).
• Redirect after submitting [PRO+ plan] – When the responder finished the form submitting, it can redirected to any URL using this option.
• Google Analytics – If you have google analytics id you can submit to analyse statistics

Messages:

• Typeform has given some shortcuts because it want to provide conversational form to responder and also to form user.
• You can change it on your own.Also you restore to default option.
• For example , if the user wants to go to next question they can use ENTER button in keyboard.
• Some other options are,
• Hint for multiple selection -Choose as many as you like
• Instruction for Dropdown question -Type or select an option
• Instruction for dropdown question on touch screens -Select an option
• Label for “Other" answer option –Other
• Hint for adding text -Type your answer here…
• Keyboard hint when respondent hovers over options – Key
• Button to respond “Yes“ –Yes
• Button to respond “No" –No
• Keyboard shortcut for "Yes" option – Y
• Keyboard shortcut for "No" option – N
• Button to accept statement in a Legal block - I accept
• Button to reject statement in a Legal block - I don't accept
• Proportion of questions answered - _ of_ answered
• Percentage of typeform complete - _% completed
• Button to revise errors when respondent submits – Review
• Button to send typeform - Submit

Error Messages:
Some of the Error messages

• If an answer is required - Please fill this in
• If an answer requires a selection- Oops! Please make a selection and it goes on.Check typeform for more details.