Sometimes I want a checkbox option to stop a form from continuing. Currently the Next step and Submit buttons does not by default have conditional logic included. By adding a small JavaScript snippet we can fix this. Controlling the Next step and/or Submit buttons.
Here is a more informal video walk through of how I added the code as well as how it works.
How to use the code
The following is JavaScript (JS) code and can be added directly to the Custom JS area of Fluent Forms.
Go to Fluent Forms -> All Forms.
Hover over your form -> click Settings.
In the left Fluent Forms menu below Settings -> click Custom CS/JS.
You will see two boxes:
– Custom CSS -> for styling.
– Custom JS -> for Javascript (this is where our code goes).
Or use Fluent Snippets or another code snippet plugin as this can impact multiple forms. I prefer to use a code snippet plugin as it keeps better order of my various code snippets I have on a site.
Do remember to change the Fluent Form ID number and the checkbox values listed in the code.
Step 1: Disable Next button when Stop is selected
Variation 1 — Current logic (option 1 overrides option 3)
- Option 1 (“Go ahead”) selected alone:
- Button is green and clickable.
- Option 2 (“I am not sure”) selected alone:
- Button is green and clickable.
- Option 3 (“Stop”) selected alone:
- Button turns red and is disabled.
- Options 1 + 3 selected together:
- Button is green and clickable.
- Why? In this logic, option 1 overrides option 3, so the “Stop” condition is ignored when both are checked.
This is the default behavior in Variation 1 of the JavaScript code.
document.addEventListener("DOMContentLoaded", function () {
// Select your form ID
const form = document.querySelector("#fluentform_20");
if (!form) return;
// Select the Next button inside the form
const nextBtn = form.querySelector(".ff-btn-next");
if (!nextBtn) return;
// --- Styling ---
nextBtn.style.backgroundColor = "green";
nextBtn.style.color = "white";
nextBtn.textContent = "Next";
nextBtn.style.padding = "5px 9px";
nextBtn.style.fontSize = "14px";
nextBtn.style.borderRadius = "6px";
nextBtn.style.fontWeight = "600";
nextBtn.style.cursor = "pointer";
nextBtn.removeAttribute("disabled");
form.addEventListener("change", function () {
const checkboxes = Array.from(form.querySelectorAll("input[type='checkbox']"));
// Change the checkbox values
const option2Checked = checkboxes.some(cb => cb.value === "Go ahead" && cb.checked);
const option3Checked = checkboxes.some(cb => cb.value === "Stop" && cb.checked);
// Logic:
// Option 3 alone → red, disabled
// Option 2 alone → green, enabled
// Options 1 + 3 → green, enabled (option 1 overrides)
if (option3Checked && !option2Checked) {
nextBtn.setAttribute("disabled", "disabled");
nextBtn.style.backgroundColor = "red";
nextBtn.textContent = "Stop";
nextBtn.style.cursor = "default";
} else {
nextBtn.removeAttribute("disabled");
nextBtn.style.backgroundColor = "green";
nextBtn.textContent = "Next";
nextBtn.style.cursor = "pointer";
}
});
});
Variation 2 — Option 3 always takes priority
document.addEventListener("DOMContentLoaded", function () {
// Select your form ID
const form = document.querySelector("#fluentform_20");
if (!form) return;
// Select the Next button inside the form
const nextBtn = form.querySelector(".ff-btn-next");
if (!nextBtn) return;
// --- Styling ---
nextBtn.style.backgroundColor = "green";
nextBtn.style.color = "white";
nextBtn.textContent = "Next";
nextBtn.style.padding = "5px 9px";
nextBtn.style.fontSize = "14px";
nextBtn.style.borderRadius = "6px";
nextBtn.style.fontWeight = "600";
nextBtn.style.cursor = "pointer";
nextBtn.removeAttribute("disabled");
form.addEventListener("change", function () {
const checkboxes = Array.from(form.querySelectorAll("input[type='checkbox']"));
// Change the checkbox values
const option3Checked = checkboxes.some(cb => cb.value === "Stop" && cb.checked);
// Logic:
// If option 3 is selected, always red and disabled, even if option 1 is also selected
if (option3Checked) {
nextBtn.setAttribute("disabled", "disabled");
nextBtn.style.backgroundColor = "red";
nextBtn.textContent = "Stop";
nextBtn.style.cursor = "default";
} else {
nextBtn.removeAttribute("disabled");
nextBtn.style.backgroundColor = "green";
nextBtn.textContent = "Next";
nextBtn.style.cursor = "pointer";
}
});
});
Disable Submit button when Stop is selected
Explanation.
- We attach a listener to the form.
- When “Stop” (option 3) is checked -> Submit button turns red, says Stop, and is disabled.
- Otherwise, it is green, says Submit, and is enabled so one can move on and send in the form.
The JavaScript (JS) code for disabling the Submit button
document.addEventListener("DOMContentLoaded", function () {
// Select your form ID
const form = document.querySelector("#fluentform_21");
if (!form) return;
// Select the Submit button inside the form
const submitBtn = form.querySelector(".ff-btn-submit");
if (!submitBtn) return;
// Set default button
function styleButton(btn, color, text, disabled) {
btn.style.backgroundColor = color;
btn.style.color = "white";
btn.style.padding = "12px 28px";
btn.style.fontSize = "15px";
btn.style.borderRadius = "6px";
btn.style.fontWeight = "600";
btn.style.border = "none";
btn.style.transition = "all 0.2s ease";
btn.style.textTransform = "uppercase";
btn.style.cursor = disabled ? "default" : "pointer";
btn.textContent = text;
if (disabled) {
btn.setAttribute("disabled", "disabled");
btn.style.opacity = "0.7";
} else {
btn.removeAttribute("disabled");
btn.style.opacity = "1";
}
}
// Initial state: green Submit
styleButton(submitBtn, "green", "Submit", false);
// Watch for changes on any checkbox
form.addEventListener("change", function () {
const checkboxes = Array.from(form.querySelectorAll("input[type='checkbox']"));
const option3Checked = checkboxes.some(cb => cb.value === "Stop" && cb.checked);
if (option3Checked) {
// Anytime option 3 is checked → Stop
styleButton(submitBtn, "red", "Stop", true);
} else {
// Otherwise → Submit
styleButton(submitBtn, "green", "Submit", false);
}
});
});
Step 3: Going further – variations
Explanation.
- Option 1 (“Go ahead”) + Option 3 (“Stop”) → Conflict state:
The button becomes transparent, shows the text Conflict, and the cursor changes to a “not allowed” sign. - Option 3 alone → Stop state:
The button becomes red, says Stop, and is disabled. - All other cases → Normal state:
The button is green, says Next, and works normally.
The JavaScript (JS) code which includes multiple conditions for the next button
document.addEventListener("DOMContentLoaded", function () {
// Select your form ID
const form = document.querySelector("#fluentform_20");
if (!form) return;
// Select the NEXT button inside the form
const nextBtn = form.querySelector(".ff-btn-next");
if (!nextBtn) return;
// Set default button style: green + "Next"
nextBtn.style.backgroundColor = "green";
nextBtn.style.color = "white";
nextBtn.style.padding = "6px 12px";
nextBtn.textContent = "Next";
nextBtn.style.cursor = "pointer";
nextBtn.removeAttribute("disabled");
// Watch for changes on any checkbox
form.addEventListener("change", function (e) {
if (!e.target.matches("input[type='checkbox']")) return;
// Collect all checkboxes in the form
const checkboxes = Array.from(form.querySelectorAll("input[type='checkbox']"));
// Adjust these to match your actual checkbox values
const option1Checked = checkboxes.some(cb => cb.value === "Go ahead" && cb.checked);
const option3Checked = checkboxes.some(cb => cb.value === "Stop" && cb.checked);
if (option1Checked && option3Checked) {
// Example: If both Option 1 + Option 3 are checked
nextBtn.removeAttribute("disabled"); // keep enabled
nextBtn.style.backgroundColor = "transparent"; // transparent button
nextBtn.style.color = "black"; // text still visible
nextBtn.textContent = "Conflict"; // custom message
nextBtn.style.cursor = "not-allowed"; // cross cursor
} else if (option3Checked) {
// If only Option 3 is checked → disable the button
nextBtn.setAttribute("disabled", "disabled");
nextBtn.style.backgroundColor = "red";
nextBtn.style.color = "white";
nextBtn.textContent = "Stop";
nextBtn.style.cursor = "default";
} else {
// Default state (no option 3)
nextBtn.removeAttribute("disabled");
nextBtn.style.backgroundColor = "green";
nextBtn.style.color = "white";
nextBtn.textContent = "Next";
nextBtn.style.cursor = "pointer";
}
});
});
Resource used: ChatGPT.
