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:#bcd9f5;
}

2. Remove the Sign here placeholder and icon.

#form [data-type=signature] [data-role=signature-container] .signature__placeholder-container 
{
display: none!important;
}