Table of Contents

Create a Checkbox in the Form Block

Cesar Banchio Updated by Cesar Banchio

This workaround is not compatible with embedded bots

Case 1: Form Block is the 1st Block of the Flow

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 first block 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 form block.

Once we have set up the form 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 form 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 form 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

Case 2: Form Block is not the starting point of the flow or you have more than one form block.

On this scenario, the JS snippet we will add in the Design Section Custom JS will be this:

<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 = (id) => {

let form = 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)

}

}

window.selectFormFunction = () => {

var id = setInterval(function(){

selectForm(id);

}, 500);

}

</script>

And we will need to add a code block to activate the function that searches for the form block right before, like so:

the snippet inside the code block:

window.selectFormFunction()

This method will also work in case you have more than one form block and you want to add it to specific ones.

How did we do?

Form Block

Contact