{"id":5221,"date":"2025-12-19T14:52:00","date_gmt":"2025-12-19T13:52:00","guid":{"rendered":"https:\/\/botnation.ai\/create-a-web-chatbot-form\/"},"modified":"2026-02-25T12:28:12","modified_gmt":"2026-02-25T11:28:12","slug":"create-a-web-chatbot-form","status":"publish","type":"support","link":"https:\/\/botnation.ai\/en\/support\/create-a-web-chatbot-form\/","title":{"rendered":"Create a Web Chatbot Form"},"content":{"rendered":"<p>Discover all the Botnation features dedicated to forms.<\/p>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Tuto : cr\u00e9er un formulaire avec votre chatbot\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/4QRIi7r-oMA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<p>On average, a chatbot generates 30% more leads than a traditional form. That\u2019s why, on our platform, we\u2019ve developed various features to make the creation of a chatbot form as simple and ergonomic as possible, and to make the user experience as fluid and pleasant as possible. <\/p>\n\n<p>We\u2019ll look at all these features below, as well as the steps involved in saving the data captured in a Google Sheet.<\/p>\n\n<h2 class=\"wp-block-heading\">1. User input<\/h2>\n\n<p>This feature lets you ask an open-ended question such as \u201cWhat\u2019s your name?\u201d, \u201cWhat\u2019s your age?\u201d, \u201cWhat\u2019s your email?\u201d or \u201cDescribe your project in a few lines:\u201d and save the answer in a variable.<\/p>\n\n<p>Among the construction functions, click on \u201cUser entry\u201d.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image.png.webp\" alt=\"\" class=\"wp-image-5158\"><\/figure>\n\n<p>This will add the following element to your sequence:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-2.png.webp\" alt=\"\" class=\"wp-image-5162\" style=\"width:547px;height:auto\"><\/figure>\n<\/div>\n<p>Once you\u2019ve entered the question, the first drop-down menu will ask you to choose the variable in which you wish to save your user\u2019s answer. So create this variable, or choose it if you\u2019ve already created it. <br><br>The next drop-down menu concerns the variable type. There are 3 of them: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Free text entry: the chatbot will record everything the user has written. This is what you choose if you want to capture a name, address or additional information, <\/li>\n\n\n\n<li>Digits entry: the chatbot will only detect numbers. Choose this option to capture an age or a telephone number. <\/li>\n\n\n\n<li>E-mail entry: the chatbot keeps only the email in memory. If the user writes \u201cmy email is julien@botnation.ai\u201d, the chatbot will only remember \u201cjulien@botnation.ai\u201d. <br><\/li>\n<\/ul>\n\n<p>In this example, we\u2019ve asked the question \u201cWhat is your surname?\u201d, entered \u201cLast name\u201d as the variable name and logically chosen \u201cFree text entry\u201d as the variable type.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-1.png.webp\" alt=\"\" class=\"wp-image-5160\"><\/figure>\n<\/div>\n<p>Next, the module asks you which sequence you\u2019d like the user to be redirected to after answering.<br><br>If you don\u2019t want to make the question compulsory, there\u2019s nothing to stop you adding a cancel button that will allow you to move on to the next question, for example.<\/p>\n\n<p>Here\u2019s how this translates ergonomically for the user in the chatbot.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-3.png.webp\" alt=\"\" class=\"wp-image-5164\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">2. User input type Quick Replies<\/h2>\n\n<p>This feature allows you to ask a closed question such as \u201cWhat is your marital status?\u201d or \u201cDo you own your home?\u201d and to propose all possible choices in the form of buttons, and finally to store this choice in a variable.<\/p>\n\n<p>Add this feature by clicking on the \u201cQuick Replies\u201d icon among the other functions. (See below). <\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-4.png.webp\" alt=\"\" class=\"wp-image-5166\"><\/figure>\n\n<p>This will add the following element to your sequence:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-5.png.webp\" alt=\"\" class=\"wp-image-5168\"><\/figure>\n<\/div>\n<p>The feature consists of a question (limited to 640 characters) and a maximum of eleven Quick Replies.<br><br><\/p>\n\n<p>To set up a button, click on \u201c+ Add a Quick Reply\u201d.<\/p>\n\n<p>You can then name the Reply (25 characters max).<\/p>\n\n<p>You can also associate a picture with each replie. This appears as an icon at the start of the Replie. <\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-6-1024x472.png.webp\" alt=\"\" class=\"wp-image-5170\"><\/figure>\n\n<p>For the type, we\u2019ll take the \u201cUser input\u201d option.<br>The parameters are :<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Name of the variable<\/li>\n\n\n\n<li>Value of the variable<\/li>\n\n\n\n<li>Redirection sequence<br><\/li>\n<\/ul>\n\n<p>We can therefore give the button a name that may be different from the value of the variable.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-7-1024x469.png.webp\" alt=\"\" class=\"wp-image-5172\"><\/figure>\n\n<p>We therefore create different Quick Replies for each choice with the same variable but different values.<\/p>\n\n<p><br>In this example, for the question \u201cWhat is your marital status?\u201d, we will have the following Quick Answers:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>\u201cMarried\u201d, which will store the value \u201c1\u201d in the \u201cStatus\u201d variable<\/li>\n\n\n\n<li>\u201cCivil Solidarity Pact\u201d, which will store the value \u201c2\u201d in the \u201cstatus\u201d variable<\/li>\n\n\n\n<li>\u201cCohabitation\u201d, which will store the value \u201c3\u201d in the \u201cstatus\u201d variable<\/li>\n\n\n\n<li>\u201cSingle\u201d which will store the value \u201c0\u201d in the \u201cstatus\u201d variable<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-8.png.webp\" alt=\"\" class=\"wp-image-5174\"><\/figure>\n\n<p>Here\u2019s how this translates ergonomically for the user in the chatbot.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-9.png.webp\" alt=\"\" class=\"wp-image-5176\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">3. Weblist<\/h2>\n\n<p>Quick Replies are limited to eleven buttons. That\u2019s why Botnation has developed the \u201cWeblist\u201d feature, where this constraint no longer exists. <br><br>This can be useful for choosing from many possible answers, such as: a vehicle model, a region, a year of birth, etc\u2026<\/p>\n\n<p>Among the construction features, click on \u201cWeblist\u201d.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-10.png.webp\" alt=\"\" class=\"wp-image-5178\"><\/figure>\n\n<p>This will add the following element to your sequence:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-11.png.webp\" alt=\"\" class=\"wp-image-5180\"><\/figure>\n<\/div>\n<p>The parameters for this feature are : <\/p>\n\n<ul class=\"wp-block-list\">\n<li>The question with a maximum of 640 characters,<\/li>\n\n\n\n<li>The name of the variable in which the choice will be saved,<\/li>\n\n\n\n<li>How the buttons are displayed to the user,<\/li>\n\n\n\n<li>The list of choices (by default, the variable will take the value of the button name),<\/li>\n\n\n\n<li>The option to dissociate the button name and the value the variable will take,<\/li>\n\n\n\n<li>And finally, the redirection sequence after selection.La question avec un maximum de 640 caract\u00e8res,<\/li>\n<\/ul>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>ATTENTION<\/strong><br>We don\u2019t have the option of adding an image\/icon to the various choices, as was the case for Quick Replies.<br>On the other hand, another advantage of the Weblist is that the 25-character limit for the button name no longer exists.<\/p>\n<\/blockquote>\n\n<p>In this example, we\u2019ll ask the user \u201cIIn which district of Paris are you looking for an apartment?\u201d and suggest the twenty districts.<br>Buttons will be named 1st, 2nd, 3rd, etc., but the value stored in the \u201cDistrict\u201d variable will only be the number.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/Liste_Choix_FR-507x1024.jpg.webp\" alt=\"\" class=\"wp-image-5182\"><\/figure>\n<\/div>\n<p>Here\u2019s how this translates ergonomically for the user in the chatbot.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-12.png.webp\" alt=\"\" class=\"wp-image-5184\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">4. Multiple Choice List<\/h2>\n\n<p>Sometimes, in a form, you need to check several choices for the same question, such as \u201cWhat language(s) do you speak?\u201d or \u201cChoose vehicle customization options:\u201d.<br><\/p>\n\n<p>For this specific case, we have developed the \u201cMultiple Choice List\u201d feature.<\/p>\n\n<p>Among the construction features, click on \u201cMultiple choice list\u201d.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-13.png.webp\" alt=\"\" class=\"wp-image-5186\"><\/figure>\n\n<p>This will add the following element to your sequence:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-14.png.webp\" alt=\"\" class=\"wp-image-5188\"><\/figure>\n<\/div>\n<p>You can enter the question that will be displayed above the list of choices, the minimum and maximum number of choices the user will have to make, the name of the validation button and the redirection sequence once the user has validated his choices.<\/p>\n\n<p>You can add choices made up of two elements: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>The variable that will contain the result. Indeed, each choice will be linked to a variable. If the user selects the choice, the variable linked to this choice will have the value 1, otherwise 0.<br><br>  <\/li>\n\n\n\n<li>The title of the choice that will be displayed<\/li>\n<\/ul>\n\n<p>In this example, we ask \u201cWhat language(s) do you speak?<br>For the minimum number of choices ticked, we leave 1 as the person must speak at least English.<br>For the maximum, we leave the default number.<\/p>\n\n<p>For the choices we will enter different languages with initials as the variable.<br><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-15.png.webp\" alt=\"\" class=\"wp-image-5190\"><\/figure>\n<\/div>\n<p>Here\u2019s how this translates ergonomically for the user in the chatbot.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-17.png.webp\" alt=\"\" class=\"wp-image-5194\"><\/figure>\n<\/div>\n<p>Once the user has clicked on the \u201cValidate\u201d button, the chatbot will update the variables we\u2019ve specified (1 if checked, 0 if unchecked).<br><br><br>You can check this by going to \u201cUsers\u201d, sub-section \u201cUsers\u201d.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-18-1024x424.png.webp\" alt=\"\" class=\"wp-image-5196\"><\/figure>\n\n<h2 class=\"wp-block-heading\">5. Evaluation<\/h2>\n\n<p>The Evaluation feature allows users to give their opinion in the form of a note, such as \u201cHow did you find the welcome at our establishment?\u201d, with a rating ranging from 1 \u201cNot satisfactory\u201d to 5 \u201cVery satisfactory\u201d.<\/p>\n\n<p>Among the construction features, click on \u201cEvaluation\u201d.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-19.png.webp\" alt=\"\" class=\"wp-image-5199\"><\/figure>\n\n<p>This will add the following element to your sequence:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-20.png.webp\" alt=\"\" class=\"wp-image-5201\"><\/figure>\n<\/div>\n<p>The parameters are as follows: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>The question in 640 characters maximum,<\/li>\n\n\n\n<li>The name of the variable in which the note will be saved,<\/li>\n\n\n\n<li>Maximum score,<\/li>\n\n\n\n<li>The title of the lowest score,<\/li>\n\n\n\n<li>The title of the highest note,<\/li>\n\n\n\n<li>The name of the validation button<\/li>\n\n\n\n<li>The redirection sequence after user selection.La question en 640 caract\u00e8res maximum<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-21.png.webp\" alt=\"\" class=\"wp-image-5203\"><\/figure>\n<\/div>\n<p>Here\u2019s how this translates ergonomically for the user in the chatbot.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-22.png.webp\" alt=\"\" class=\"wp-image-5205\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">6. Saving data in a Google Sheet<\/h2>\n\n<p>When you create a form chatbot, after asking all your questions using the various dedicated features, before thanking users, you can save the data in a Google Sheet.<br><\/p>\n\n<p>We won\u2019t go into detail here. There are several articles in our online help that deal with this very subject. <\/p>\n\n<h3 class=\"wp-block-heading\">a. Create the Google Sheet<\/h3>\n\n<p>The first thing to do is to create the Google Sheet. <\/p>\n\n<p>It must comply with a few rules: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Your table must contain one and only one header line in the 1st row.<\/li>\n\n\n\n<li>The first column of your table must never be empty<\/li>\n\n\n\n<li>Do not use the value undefined in a cell. This keyword is reserved for formulas that do not return a result. <\/li>\n<\/ul>\n\n<p><br>For the form we\u2019ve created in this tutorial, the Google Sheet should look like this.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-23-1024x331.png.webp\" alt=\"\" class=\"wp-image-5207\"><\/figure>\n\n<h3 class=\"wp-block-heading\">b. Linking your Google account to the chatbot<\/h3>\n\n<p>Secondly, you need to link your Google account to your Chatbot. This takes place in the \u201cPlugins\u201d tab of your chatbot\u2019s \u201cSettings\u201d. <\/p>\n\n<p>Click on the \u201cLogin with Google\u201d button, then select the account that has access to your Google Sheets file from the page that appears.<br>Once the permissions are accepted, you are back on your Chatbot and the account you just linked is now selected.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-24.png.webp\" alt=\"\" class=\"wp-image-5209\"><\/figure>\n\n<h3 class=\"wp-block-heading\">c. Create data backup sequence<\/h3>\n\n<p>Finally, all that remains is to create a sequence in which we will use the \u201cSend datas\u201d feature.<\/p>\n\n<p>Among the construction features, click on \u201cGoogle Spreadsheets\u201d and choose \u201cSend datas\u201d from the submenu.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-25.png.webp\" alt=\"\" class=\"wp-image-5211\"><\/figure>\n\n<p>This will add the following element to your sequence:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-26.png.webp\" alt=\"\" class=\"wp-image-5213\"><\/figure>\n<\/div>\n<p>The parameters are as follows: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Spreadsheet file: Select the Google Sheets file to be used.<\/li>\n\n\n\n<li>Sheet: Select the sheet to use<\/li>\n\n\n\n<li>Force insert new line (option) : If checked, a new line will be created<\/li>\n\n\n\n<li>Update lines which match with : Select the conditions to identify the line(s) to be updated.<\/li>\n\n\n\n<li>Create line if no line matches (option): If no row in your table matches the specified conditions, a new row will be created.<\/li>\n\n\n\n<li>Set data to update: Specify the columns to be updated, matching the columns to the variables captured by the chatbot.<\/li>\n<\/ul>\n\n<p>For our example form, this will give : <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-27.png.webp\" alt=\"\" class=\"wp-image-5215\"><\/figure>\n<\/div>\n<p>If you follow all these steps correctly, every time a user completes the form, all the data will be saved and you\u2019ll be able to analyze the results using Google\u2019s powerful spreadsheet tools.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2024\/01\/image-28-1024x255.png.webp\" alt=\"\" class=\"wp-image-5217\"><\/figure>\n\n<p>Now you know all about our features dedicated to forms in a web chatbot.<br>Now it\u2019s your turn.<\/p>\n","protected":false},"featured_media":21255,"template":"","meta":{"_acf_changed":false},"categorie-support":[194,198,222,221],"class_list":["post-5221","support","type-support","status-publish","has-post-thumbnail","hentry","categorie-support-features","categorie-support-tutorials","categorie-support-variables-en","categorie-support-web-chatbot-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/support\/5221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/types\/support"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/media\/21255"}],"wp:attachment":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/media?parent=5221"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/categorie-support?post=5221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}