How to customize electronic signature fields in your 123FormBuilder forms?

When using our HTML form generator, you can add electronic signature fields to your forms. The signature field is delimited by a box-shaped canvas.

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 its appearance using our CSS form generator. Add your own CSS code in the forms Design → Add custom CSS section 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 below ID is the one that 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.

Here are a few examples that you can use to customize your Signature field.

1. 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;
}

2. 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');
}

3. Change the design of the Clear button.

You can also style the clear option that appears on the bottom right side of the signature box whenever the form visitors provide a signature.

The ID for the clear link is a bit different than the one for the Signature field. You can find it below:

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

Copy the link above 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);
}