Create a Checkbox in the Welcome Block

Cesar Banchio Updated by Cesar Banchio

In case we want to stop the user from continuing the flow if the have to accepted the terms and conditions, we can create a workaround with some CSS and Javascript to implement this. We can create a checkbox in the welcome message so the user can check it and continue with the flow.

The block will look like this:

The first thing we need to do is create a multi-question block.

Once we have set up the multi question block, you can add the following snippet in the Design Section Custom JS

<script>

const handleClick = () => {

let form = this.window.document.querySelector("form")

let button = form.querySelector("button")

if(button.disabled === true) {

button.disabled= false

} else {

button.disabled= true }

}

const selectForm = () => {

let form = this.window.document.querySelector("form")

if(form) {

let button = form.querySelector("button")

button.disabled = true;

let child = form.querySelectorAll(".columns")[1]

var div = document.createElement("div");

var label = document.createElement("label");

label.innerHTML = ` I read and I accept the <a href="https://www.landbot.io" target="_blank">terms</a>`

var checkbox = document.createElement("INPUT");

checkbox.setAttribute("type", "checkbox");

checkbox.innerHTML = ` I read and I accept the <a href="https://www.landbot.io" target="_blank">terms</a>`

checkbox.onclick= handleClick

div.appendChild(checkbox);

div.appendChild(label);

form.insertBefore(div, form.children[4])

clearInterval(id)

}

}

const id = setInterval(selectForm, 500)

</script>

What this snippet will do is search for the welcome message block, create an HTML checkbox element and append it after the last child.

So you need to take in consideration the number of rows of questions in the multi-question block and adapt it according to your bot.

On this example we have 4 rows of questions, therefor on the form, we select the 4th child (form.children[4]).

What you also need to take in consideration is the what you want the checkbox text to say. You can change it on the snippet on these places:

label.innerHTML =

and

checkbox.innerHTML =

On this example, we also created a a tag where you can place your terms and conditions policy.

This snippet also disables the button to start the flow and only enables it if the user has checked the checkbox. You can remove this function by removing the commands in the handleClick function:

if(button.disabled === true) {

button.disabled= false

} else {

button.disabled= true }

}

and removing this line in the selectForm function:

button.disabled = true;

Template

You can use the template linked below that is already set up to create the checkbox:

Just click here for the template

How did we do?

Contact