The SureForms conversational form button is locked on next when using it but sometimes next may not be appropriate and you want to use a different phrase such as continue which is my preferred option.
Natively this can’t be achieved but it is really easy to achieve with a little JS which means its even possible to limit the URLs that the JS will run on or target specific forms if you want different labels.
Without the Snippet
The above gif shows the native next option in conversational forms
With the Snippet running
The above shows the snippet in and working targeting form 18 and changing the next to continue.
<script>
(function () {
// ——— configure which forms to target ———
const FORM_IDS = [18, 19, 42]; // These are the forms we are targeting
const BTN_SELECTOR = ".srfm-cf-next-btn"; // next buttons - This is the target
const NEW_LABEL = "Continue"; // New Button text
// Build a scoped selector like ".srfm-form-container-18, .srfm-form-container-21, ..."
const FORM_SCOPE = FORM_IDS.map(id => `.srfm-form-container-${id}`).join(", ");
function renameAll() {
// For each targeted form, rename all visible text-based "next" buttons
document.querySelectorAll(FORM_SCOPE).forEach(form => {
form.querySelectorAll(BTN_SELECTOR).forEach(btn => {
const hasText = btn.textContent && btn.textContent.trim().length > 0; // skip icon-only nav button
if (hasText && btn.textContent.trim() !== NEW_LABEL) {
btn.textContent = NEW_LABEL;
btn.setAttribute("aria-label", NEW_LABEL);
}
});
});
}
// Run and keep watching (handles AJAX re-renders)
const schedule = () => Promise.resolve().then(() => setTimeout(renameAll, 0));
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", schedule); else schedule();
window.addEventListener("load", schedule);
const target = document.body;
const mo = new MutationObserver(schedule);
mo.observe(target, { subtree: true, childList: true, attributes: true, characterData: true, attributeFilter: ["class"] });
// Nudge after interactions (step changes)
document.addEventListener("click", () => { setTimeout(renameAll, 50); setTimeout(renameAll, 300); }, true);
document.addEventListener("keydown", e => { if (e.key === "Enter") setTimeout(renameAll, 0); }, true);
})();
</script>Target All SureForms
<script>
(function () {
const FORM_SCOPE = ".srfm-form-container"; // applies to every SureForms form
const BTN_SELECTOR = ".srfm-cf-next-btn";
const NEW_LABEL = "Continue";
function renameAll() {
document.querySelectorAll(FORM_SCOPE).forEach(form => {
form.querySelectorAll(BTN_SELECTOR).forEach(btn => {
const hasText = btn.textContent && btn.textContent.trim().length > 0; // avoid icon-only next in the footer bar
if (hasText && btn.textContent.trim() !== NEW_LABEL) {
btn.textContent = NEW_LABEL;
btn.setAttribute("aria-label", NEW_LABEL);
}
});
});
}
const schedule = () => Promise.resolve().then(() => setTimeout(renameAll, 0));
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", schedule); else schedule();
window.addEventListener("load", schedule);
const mo = new MutationObserver(schedule);
mo.observe(document.body, { subtree: true, childList: true, attributes: true, characterData: true, attributeFilter: ["class"] });
document.addEventListener("click", () => { setTimeout(renameAll, 50); setTimeout(renameAll, 300); }, true);
document.addEventListener("keydown", e => { if (e.key === "Enter") setTimeout(renameAll, 0); }, true);
})();
</script>
