How Can We Help?

Creating custom buttons using JavaScript

You are here:
< All Topics

You can use the Logic feature to call custom JavaScript code that can manipulate the content of a form. This can be used to inject custom buttons into form’s layout.

You can download a form template containing the below example here.

Warning!

Invoking custom JavaScript code – if used incorrectly – might even totally break the form. Make sure you know what you’re doing.

Example: injecting a button into the toolbar

Step 1: creating a custom style for the button

In order to make sure that the button looks similar to other buttons, you can style it by creating a custom CSS in the Custom HTML property of any section in the form:

<style>
.custom-button{
	background-color: transparent;
	color:  #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	height: 100\%; 
	padding: 0 8px;
	display: flex;
	align-items: center;
}

.custom-button:hover {
	color:  #333333;
	background-color:  #EAEAEA;
}

.custom-button:active {
	background-color:  #C8C8C8;
}
</style>

This style is being applied to a “custom-button” CSS class, that we will have to apply to our button later.

Step 2: creating a custom button in JS code

We will create a new rule in the Logic section, and put a single “Execute custom js” step there, with the following code:

const customButtonId = "customButton1";

let buttonAlreadyExists = document.getElementById(customButtonId);

if (!buttonAlreadyExists) {

	let customButtonDiv = document.createElement("div");
	customButtonDiv.id = customButtonId;
	customButtonDiv.className = "custom-button";
	customButtonDiv.innerHTML = "I am a custom button.";

	const customButtonsRoot = document.getElementById("custom-buttons-root");

	customButtonsRoot.appendChild(customButtonDiv)

	customButtonDiv.onclick = () => {		
		alert("The button has been clicked!");
	};

}

The code creates a new button and appends it to the “custom-buttons-root” HTML element, which is located right after all the toolbar buttons of the form.

Result:

custom.button.gif

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Table of Contents