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:
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:
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!