How to customize the digital signature box?

To customize the digital signature box on your form, you’ll need to use Inspect Element in your browser to locate its ID. By applying custom CSS codes to the field you can customize the appearance of it. Add your own CSS code to override the default styles of our Theme.

How to locate the ID

You’ll need to open the form in view mode and right-click the digital signature box. Next, hit Inspect element. This will open the browser’s console.

The following ID will change the design of all signature fields.

#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas

How to add attributes

Paste the ID and continue by opening curly braces { }. Inside the curly braces place the CSS attributes, followed by a semicolon.

Change the background color of the signature field

#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas
{
background-color:#0080ff;
}

Add your own image as the background

#form div[data-role=control][data-type=signature] div[data-role=signature-container]

{

content: url(‘https://www.something123.com/button123.png’);

}

Result:

Change the design of the Clear button

You can also style the clear link that appears on the bottom right side of the signature box whenever the form visitors provide a signature. By using the inspect element option again, copy the ID from the highlighted line in the developer tools window.
#form div[data-role=control][data-type=signature] div[data-role=signature-container] > a[data-role=clear-signature]
Next, go to the Themes section of your form and hit use custom CSS. In the custom CSS lightbox, paste the ID and provide the styles that you want.

#form div[data-role=control][data-type=signature] div[data-role=signature-container] > a[data-role=clear-signature] {
color: #e22727;
font-size: 17px;
font-family: ‘Roboto’, sans-serif;
transform: rotate3d(-1, 3, 1, -34deg);

}

Result: