{"id":15230,"date":"2015-03-16T13:31:06","date_gmt":"2015-03-16T13:31:06","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=15230"},"modified":"2024-05-15T10:05:53","modified_gmt":"2024-05-15T10:05:53","slug":"how-to-customize-the-digital-signature-box","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/","title":{"rendered":"How to customize electronic signature fields in your 123FormBuilder forms?"},"content":{"rendered":"\n

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

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<\/a>. Add your own CSS code in the forms Design \u2192 Add custom CSS<\/b> section to override the default styles of our theme.<\/p>\n\n\n\n

\"Add<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

How to locate the ID<\/h2>\n\n\n\n

You’ll need to open the form in view mode and right-click the digital signature box. Next, hit Inspect element<\/b>. This will open the browser’s console.<\/p>\n\n\n\n

#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas<\/pre>\n\n\n\n
\n\n\n\n
How to add attributes<\/h2>\n\n\n\n
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<\/b> field.<\/p>\n\n\n\n
1. Change the background color of the signature field.<\/p>\n\n\n\n
#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas
{
background-color:#bcd9f5;
}<\/pre>\n\n\n\n
<\/p>\n\n\n
\n
\"Signature<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
2. Remove the Sign here<\/em> placeholder and icon.<\/p>\n\n\n\n
#form [data-type=signature] [data-role=signature-container] .signature__placeholder-container 
{
display: none!important;
}<\/pre>\n\n\n\n
<\/p>\n\n\n
\n
\"Remove<\/a><\/figure>\n<\/div>\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":14,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[125],"tags":[],"class_list":["post-15230","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tricks"],"yoast_head":"\nHow to style the signature box | 123FormBuilder Help<\/title>\n<meta name=\"description\" content=\"Read our Knowledge Base article to learn more about how to style the signature box according to your needs with some basic CSS codding and examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to customize electronic signature fields in your 123FormBuilder forms?\" \/>\n<meta property=\"og:description\" content=\"Read our Knowledge Base article to learn more about how to style the signature box according to your needs with some basic CSS codding and examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-16T13:31:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-15T10:05:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-7-1024x573.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to style the signature box | 123FormBuilder Help","description":"Read our Knowledge Base article to learn more about how to style the signature box according to your needs with some basic CSS codding and examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/","og_locale":"en_US","og_type":"article","og_title":"How to customize electronic signature fields in your 123FormBuilder forms?","og_description":"Read our Knowledge Base article to learn more about how to style the signature box according to your needs with some basic CSS codding and examples.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2015-03-16T13:31:06+00:00","article_modified_time":"2024-05-15T10:05:53+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-7-1024x573.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/"},"author":{"name":"","@id":""},"headline":"How to customize electronic signature fields in your 123FormBuilder forms?","datePublished":"2015-03-16T13:31:06+00:00","dateModified":"2024-05-15T10:05:53+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/"},"wordCount":198,"commentCount":2,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-7-1024x573.png","articleSection":["CSS Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/","name":"How to style the signature box | 123FormBuilder Help","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-7-1024x573.png","datePublished":"2015-03-16T13:31:06+00:00","dateModified":"2024-05-15T10:05:53+00:00","author":{"@id":""},"description":"Read our Knowledge Base article to learn more about how to style the signature box according to your needs with some basic CSS codding and examples.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-7-1024x573.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-7-1024x573.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-customize-the-digital-signature-box\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"How to customize electronic signature fields in your 123FormBuilder forms?"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/15230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=15230"}],"version-history":[{"count":69,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/15230\/revisions"}],"predecessor-version":[{"id":48802,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/15230\/revisions\/48802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=15230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=15230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=15230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}