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.
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
Paste the ID and continue by opening curly braces { }. Inside the curly braces place the CSS attributes, followed by a semicolon.
#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas
{
background-color:#0080ff;
}
#form div[data-role=control][data-type=signature] div[data-role=signature-container]
{
content: url(‘https://www.something123.com/button123.png’);
}
Result:
#form div[data-role=control][data-type=signature] div[data-role=signature-container] > a[data-role=clear-signature]
#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:
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.