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:
Your email address will not be published. Required fields are marked *
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.
is there any way we can change the height of the area a user can write on?
We tried using the following custom CSS but now only a limited surface of the box is ready to receive input. The upper part is writable, the lower one is not accepting input, like the signature container is not of the set height of 300px
#form div[data-role=control][data-type=signature] div[data-role=signature-container]
{
height: 300px !important;
}
Hi Emmanuel, I am afraid that the signature field’s height can not be adjusted. If you have further questions, feel free to contact us. Have a great day!