Scroll Back to Form Button

Add a Scroll back to form button

var position = ["bottom", "left"];

var form;

// Gets form element.
if (twik_tags != null) {
for (var twik_tag of twik_tags) {
if (document.querySelector(twik_tag.selector) && twik_tag.value) {
form = twik_tag.selector;
}
}
}

var formElement = document.querySelector(form);
var formRect;

// Get submit button of form.
var submitFormButton = [...formElement.querySelectorAll("input, button")].reduce((a, b) => {
if (a.type) {
if (a.type === "submit" || (a.type === "button" && b.type !== "button")) {
return a;
}
}
return b;
});
var submitFormButtonStyle;

// If found submit button, get its style.
if (submitFormButton.type && (submitFormButton.type === "submit" || submitFormButton.type === "button")) {
submitFormButtonStyle = window.getComputedStyle(submitFormButton);
}
else {
throw new Error("No submit found.");
}

// Create CTA.
var buttonElement = document.createElement("button");

// Get CTA style.
var buttonStyle = {
display: "none",
border: submitFormButtonStyle.border,
borderRadius: submitFormButtonStyle.borderRadius,
font: submitFormButtonStyle.font,
backgroundColor: submitFormButtonStyle.backgroundColor,
color: submitFormButtonStyle.color,
position: "fixed",
[position[0]]: "40px",
[position[1]]: "40px",
padding: submitFormButtonStyle.padding,
width: submitFormButton.getBoundingClientRect().width,
zIndex: Number.MAX_SAFE_INTEGER,
cursor: submitFormButtonStyle.cursor,
textTransform: submitFormButtonStyle.textTransform
};

// Apply CTA style.
for (var key in buttonStyle) {
buttonElement.style[key] = buttonStyle[key];
}

// Add scroll onclick event to CTA.
buttonElement.addEventListener("click", () => {
formRect = formElement.getBoundingClientRect();
if (formRect.bottom <= 0) {
window.scrollTo({
top: Math.max(formElement.offsetTop - 40, 0),
behavior: "smooth"
});
}
})

// Add text to CTA.
if (submitFormButton.value) {
buttonElement.innerHTML = submitFormButton.value;
}
else {
buttonElement.innerHTML = submitFormButton.innerHTML;
}

// Add CTA to body.
document.body.appendChild(buttonElement);

// Display CTA is form is off-screen.
function displayCTA() {
formRect = formElement.getBoundingClientRect();
if (formRect.bottom <= 0) {
buttonElement.style.display = "block";
}
else {
buttonElement.style.display = "none";
}
}

// On scroll, run displayCTA.
window.addEventListener("scroll", displayCTA);

displayCTA();

Overview

Floating scroll back-to-form button keeps users click away from your web-form. Some websites have the form only above the fold. On other websites, users can scroll past the form or render form not visible. In these cases floating call-to-action button is especially useful. This button instantly takes users back to filling out the form. To add this variant to your website, select your form in Twik's Visual editor, copy this variant's code and append a script. Configure this variant by choosing its location on the screen in the "var position" line. You can select "top" or "bottom", "left" or "right", to customize the floating button to match your page layout. If you wish to personalize the text of your floating CTA button, replace the If statement in the "Add text to CTA" section to any string you wish to test out (For example: [buttonElement.innerHTML = "Contact Us"]).