Custom Form Themes

marioPhoto 2
marioPhoto 1
OLD
NEW

Custom Form & Letterhead Theme

SeamlessDocs allows you to create custom Global Account themes for all your forms. Would you like help creating beautiful and accessible custom themes for your organization?

Contact Us

Thank You.

Now, simply copy and paste this snippet of code into your Advanced CSS panel.

@import url(https://assets.seamlessdocs.com/css/liveview-base-min.css);

NOTE:
You can also request from your Success Manager to set this up as the DEFAULT theme on your account.

Need a step by step guide? Check out our guide

Oops! Something went wrong while submitting the form.

Example Themes for Web Forms & Docs...

Webform Liveview
View it Live
Docs Liveview
View it Live
Webform Liveview
View it Live
Webform Liveview
View it Live
Docs Liveview
View it Live

Prebuilt Themes

Dark Mode
@charset "UTF-8"; /* CSS Document */ /*Dark theme css*/ .l-document-content-area.public_mode.web { padding-left: 0 !important; padding: 50px 330px 30px 50px !important; background-color: #000000 !important; } input{ color: #FFFFFF; } .month:hover{ color:#ffffff; } .addthisevent_dropdown.active a:hover{ background-color: #313131 !important; color: #FFFFFF; } #web, body { font-family: -apple-system,BlinkMacSystemFont,San Francisco,Inter UI,sans-serif!important; padding: 0!important; font-size: 15px!important; color: #ffffff!important; text-align: center; background: #000000; } form.odoform div.item:not(.unwrap-style) { padding: 30px 30px 30px 30px; box-shadow: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); border-color: transparent; background-color: #474749; width: 100%!important; margin-bottom: 25px!important; border-radius: 3px; } .addon_modal__body .field [type=password], .addon_modal__body .field input[type=text], .editor_modal input[type=email], .editor_modal input[type=password], .editor_modal input[type=text], .editor_modal select, .inline_group.citystatezip select.citystatezip_state, form.odoform .uneditable-input, form.odoform input[type=color], form.odoform input[type=date], form.odoform input[type=datetime-local], form.odoform input[type=datetime], form.odoform input[type=email], form.odoform input[type=month], form.odoform input[type=number], form.odoform input[type=password], form.odoform input[type=search], form.odoform input[type=tel], form.odoform input[type=text], form.odoform input[type=time], form.odoform input[type=url], form.odoform input[type=week], form.odoform select { -webkit-box-shadow: 0 0 0 1px #858d94; box-shadow: 0 0 0 0px #858d94; } .l-document-content-area.public_mode.web { padding-left: 0!important; padding: 50px 330px 30px 50px!important; background-color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: 700!important; letter-spacing: 0; margin: 0; margin-top: 0!important; padding: 0!important; border: 0!important; color: #ffffff!important; } .control-label { color: #ffffff!important; font-size: 15px!important; font-weight: 700!important; margin: 0 0 20px 0!important; float: none!important; line-height: 28px!important; } .control-label span{ color: #ffffff!important; } .file_stack_click, .file_stack_clear { border: none; color: #ffffff; text-decoration: underline; background-color: #474749; } .dynamic_fields .control-group { background-color: #474749 !important; } .addon_modal__body .field [type=password], .addon_modal__body .field input[type=text], .editor_modal input[type=email], .editor_modal input[type=text], .editor_modal input[type=password], .editor_modal select, .inline_group.citystatezip select.citystatezip_state, form.odoform .uneditable-input, form.odoform input[type=time], form.odoform input[type=week], form.odoform input[type=number], form.odoform input[type=email], form.odoform input[type=url], form.odoform input[type=search], form.odoform input[type=tel], form.odoform input[type=color], form.odoform input[type=text], form.odoform input[type=password], form.odoform input[type=datetime], form.odoform input[type=datetime-local], form.odoform input[type=date], form.odoform input[type=month], form.odoform select { display: inline-block; height: 50px!important; width: 100%; color: #FFFFFF; font-size: 15px; -webkit-box-shadow: 0 0 0 1px #222; box-shadow: 0 0 0 0px #222; border: 0!important; border-radius: 3px!important; background-color: #222; appearance: none!important; -webkit-appearance: none!important; -moz-appearance: none!important; -o-appearance: none!important; } #web textarea { font-family: -apple-system,BlinkMacSystemFont,San Francisco,Inter UI,sans-serif!important; width: 100%; padding-top: 15px!important; color: #FFFFFF; font-size: 15px!important; -webkit-box-shadow: 0 0 0 1px #c4cdd5!important; box-shadow: 0 0 0 0px #c4cdd5!important; border: 0; border-radius: 3px!important; background-color: #222; } .inline_group_item label { color: #ffffff!important; font-size: 12px!important; font-weight: 500!important; margin: 0 0 12px 0!important; line-height: 20px!important; text-align: left!important; } table#matrix_table th { color: none!important; text-align: left; font-size: 12px; padding-left: 0!important; font-weight: 700; } .canvas_sketch [id*=clear_btn], .goog-te-gadget-simple, .item.control-group.tag-input-file label, a.dynamicFields__createNewInput, input.btn.btn-primary.clear-signature { -webkit-appearance: none; display: block!important; position: static!important; -webkit-appearance: none!important; appearance: none!important; background-color: transparent!important; height: 55px!important; max-height: 55px!important; font-weight: 700!important; text-shadow: none!important; box-shadow: none!important; color: #fff!important; font-size: 15px!important; border: 1px solid #c4cdd5!important; width: 208px!important; -webkit-transition: all .4s ease!important; transition: all .1s ease!important; font-family: inherit!important; text-align: center; border-radius: 3px!important; text-decoration: none; float: left; text-align: center!important; cursor: pointer; margin-bottom: 0!important; } table#matrix_table th { color: #fff!important; text-align: left; font-size: 12px; padding-left: 0!important; font-weight: 700; } .l-document-content-area.public_mode.web { padding-left: 0!important; padding: 50px 330px 30px 50px!important; /* background-color: #f4f6f8!important; */ } .form-actions { padding: 19px 20px 20px; margin-top: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-top: none; } .video-responsive { width: calc(110%); } input.btn.btn-primary.clear-signature { float: right; } .inline_group.citystatezip select.citystatezip_state:hover, form.odoform .uneditable-input:hover, form.odoform input[type="time"]:hover, form.odoform input[type="week"]:hover, form.odoform input[type="number"]:hover, form.odoform input[type="email"]:hover, form.odoform input[type="url"]:hover, form.odoform input[type="search"]:hover, form.odoform input[type="tel"]:hover, form.odoform input[type="color"]:hover, form.odoform input[type="text"]:hover, form.odoform input[type="password"]:hover, form.odoform input[type="datetime"]:hover, form.odoform input[type="datetime-local"]:hover, form.odoform input[type="date"]:hover, form.odoform input[type="month"]:hover, form.odoform select:hover { background: rgba(000,000,000,.14); } #web input::placeholder { color: #E9EBEC !important; } #web input::placeholder:hover { background-color: #CFCDCD; color: #E9EBEC !important; } .l-document-masthead { background-color: #474749; } form.odoform .switch{ background-color:#474749; } form.odoform .switch .switch-input:checked ~ .switch-label { background: #6d7a85; } form.odoform .switch .switch-label::after, form.odoform .switch .switch-label::before { color: #FFFFFF; text-shadow: none; font-size: 13px; text-transform: none; font-weight: 600; padding-left: 15px;background-color:none; } a { color: #fff; } .addthis_counter .addthis_button_expanded { display: block; background-repeat: no-repeat; background-position: 0 -40px; width: 50px; height: 33px; line-height: 33px; padding-bottom: 4px; margin-bottom: 3px; text-align: center; text-decoration: none; font-size: 1pc; font-weight: 700; color: #333; } input.action_button.primary:hover{ background-color: #000000 !important; box-shadow: 0 9px 32px -5px rgba(199,212,221,.41) !important; -webkit-box-shadow: 0 9px 32px -5px #c7d4dd !important; } .action_button.primary { background-color: #222 !important; } .addthisevent_dropdown.active { display: block; cursor: pointer; line-height: 110%; background: #333; text-decoration: none; font-size: 14px; font-weight: 100; color: #474749; padding: 5px -1px 0px 15px; border:1px solid #000; } .document-header--company-address p { margin-bottom: 12px; color: #FFFFFF; line-height: 20px; font-weight: 400; font-size: 13px; -webkit-font-smoothing: antialiased; } .addthisevent_dropdown span { display: block; line-height: 100%; background: #333; text-decoration: none; font-size: 14px; color: #CAC9C9; padding: 9px 10px 9px 40px; } .fieldset p{ color: #fff !important; } .addthisevent_dropdown span:hover { background: #333; color: #fff; } .addthisevent_dropdown span:hover { background-color: none !important;color: #333333 !important; } span.addthisevent_dropdown.active a:hover { background-color: #ffffff !important; color: #000000 !important; } .receipt_number-field { display: none; background-color: #333333 !important; box-shadow: none !important; padding-left: 15px !important; font-weight: 600; color: #CAC9C9 !important; margin-bottom: 15px !important; } #web textarea:focus, .addon_modal__body .field [type="password"]:focus, .addon_modal__body .field input[type="text"]:focus, .editor_modal input[type="email"]:focus, .editor_modal input[type="password"]:focus, .editor_modal input[type="text"]:focus, .editor_modal select:focus, .editor_modal textarea:focus, .inline_group.citystatezip select.citystatezip_state:focus, form.odoform .uneditable-input:focus, form.odoform input[type="color"]:focus, form.odoform input[type="date"]:focus, form.odoform input[type="datetime-local"]:focus, form.odoform input[type="datetime"]:focus, form.odoform input[type="email"]:focus, form.odoform input[type="month"]:focus, form.odoform input[type="number"]:focus, form.odoform input[type="password"]:focus, form.odoform input[type="search"]:focus, form.odoform input[type="tel"]:focus, form.odoform input[type="text"]:focus, form.odoform input[type="time"]:focus, form.odoform input[type="url"]:focus, form.odoform input[type="week"]:focus, form.odoform select:focus { border: none !important; box-shadow: none !important; outline: auto 5px -webkit-focus-ring-color; color: #CAC9C9; background-color: #333333 } .addthisevent_dropdown span{ background-color: #333333!important; } .addthisevent_dropdown span:hover { background-color: #333333 !important; color: #CAC9C9 !important; } .datepicker_jqui .days .week .day:hover { background: #ffffff; color: #000000; border: 1px solid #000000; } .datepicker_jqui { background-color: #333333; } .g-recaptcha + a { color: #ffffff; } .g-recaptcha + a:hover { opacity: .8; } .dynamic_fields .control-group input:hover { background-color: #333333 !important; color: #ffffff; opacity: .8; } .file_stack_click, .file_stack_clear { border: none; color: #ffffff; text-decoration: underline; } .autocomplete-select-list { position: absolute; background: #333333; box-shadow: #ccc 1px 1px 4px; padding: 5px; margin: 0; border: 1px solid #ccc; width: 80%; display: none; z-index: 999; color: #ffffff; }

Copy and paste all of the above to add to your form.

No Sidebar
body { zoom: 1.05; position: absolute; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; color: #333333 !important; } .item.control-group.tag-plugin-image_uploader img { zoom: 0.95 !important; } main#mainContent div, main#mainContent div p, main#mainContent div p span { color: #333 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } footer.client-footer.ng-scope { display: none; } .client-header { position: fixed; top: 0; left: 0; right: 0; background: #000; z-index: 1; height: auto; padding: 0; -webkit-box-shadow: none; box-shadow: none; } .client-header .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; } .client-header .container:before, .client-header .container:after { display: none; } .client-header__bar { color: #fff; font-size: 14px; padding: 8px 0; width: 720px; margin: 0 auto; } .client-header__bar a, .client-header__bar strong { color: #fff; font-weight: 600; } .module_actions input[type=button].action_button:focus, .module_actions input[type=button].action_button:hover { box-shadow: none !important; -webkit-box-shadow: none !important; } /* ************** */ .l-document-masthead { display: none; } .pager.module_actions { position: initial; bottom: 0; right: 0; z-index: 150; width: auto; padding: 0px; } .l-document-content-area.public_mode.web { padding-left: 0!important; padding: 50px 30px 30px 50px!important; background-color: #f4f6f8!important; } .l-document-content-area.public_mode.web { background: white !important; } #web, body, .control-label, form.odoform fieldset.fieldset p.group_label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; color: #333333 !important; } form.odoform div.item:not(.unwrap-style), .wrapper.merged_double, .wrapper.merged_triple { box-shadow: none; padding: 0px !important; } #web input, #web select, #web textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; } .inline_group_item label { font-size: 14px!important; } form.odoform { margin-bottom: 80px } #web select { background-position: calc(100% - 15px) !important; } form.odoform div.item[data-conditional=true] { overflow: visible; } #web textarea { box-shadow: 0 0 0 1px #858d94 !important; } .previous input { background-color: #fff!important; color: #212b35!important; -webkit-box-shadow: 0 0 0 1px #858d94; box-shadow: 0 0 0 1px #858d94; margin-bottom: 15px!important; } @media (max-width: 1100px) { .l-document-content-area.public_mode.web { padding: 45px 10px 25px !important; } .client-header { padding-left: 10px; padding-right: 10px; } .client-header__bar { width: auto; } .l-document-content-area.public_mode.web .fieldset .image_wrapper { margin-left: 5px !important; } } .l-document-content-area.public_mode.web { padding-left: 30px !important; padding-right: 30px !important } #embed_vimeo_iframe_div, #youtube_embed_iframe_div { position: relative; padding-bottom: 56.25%; height: 0; width: 100%!important; margin-left: 0px; margin-top: 0px; margin-bottom: -0px; } .video-responsive { width: 100%; } @media (max-width: 1100px) { #web .form_wrap_inner, #web .form_wrap_outer { max-width: 100%!important; } .client-header { padding-left: 30px; padding-right: 30px; } #embed_vimeo_iframe_div, #youtube_embed_iframe_div { position: relative; padding-bottom: 56.25%; height: 0; width: 100%!important; margin-left: 0px; margin-top: 0px; margin-bottom: -0px; } .video-responsive { width: 100%; } }

Copy and paste all of the above to add to your form.