Cognito-forms – Style of the Cognito Form does not match that for the rest of the website

cognito-forms

I inserted a Cognito form into my website but the style (none of the options) does not match the rest of the website.

How can I override the style to match my site?

Best Answer

Here is some sample css that fully customizes the look and feel of the fields and validation. It isn't pretty, but illustrates how to accomplish this:

.cognito #c-forms-form{ background:#aed136; color:#698215; font-family:'Open Sans'; overflow:hidden; padding-right:3em; }
.cognito .c-section,.cognito .c-field:nth-child(1){ margin-top:0; padding-top:0; }
.cognito .c-forms-heading{ display:none; }
.cognito .c-label,.cognito .c-editor,.cognito .c-action,.cognito .c-validation,.cognito .c-forms-thankyou-message{ margin:0; padding:0 4px!important; }
.cognito #c-forms-form label{ color:#FFF; }
.cognito .c-label{ margin-bottom:.3em; }
.cognito .c-editor{ margin-bottom:.2em; }
.cognito #c-submit-button{ background:#9fc226; border:0; float:none; font-family:'Open Sans'; font-size:1.5em; font-weight:900; margin:0; outline:0; padding:.4em; width:5em; }
.cognito #c-submit-button:hover{ background:#698215; }
.cognito .c-editor textarea{ height:5em; resize:none; }
.cognito .c-editor input[type=text],.cognito .c-editor textarea{ border:0; box-shadow:inset 2px 2px 0 2px #eaeaea, 4px 4px 0 0 #a6c92f; color:#d85527; font-family:'Open Sans'; font-weight:500; padding:.6em; }
.cognito .c-editor input[type=text]:focus,.cognito .c-editor textarea:focus{ background:#fff5f1; box-shadow:inset 2px 2px 0 2px #ffe4db, 4px 4px 0 0 #a6c92f; outline:none; }
.cognito .c-validation{ background:#d85527; border-radius:0; font-size:.8em; left:0; margin-top:-.4em; position:absolute; }
.cognito .c-validation:after{ border:solid transparent; border-bottom-color:#d85527; border-color:rgba(0,0,0,0); border-width:7px; bottom:100%; content:" "; height:0; left:15px; margin-left:-7px; pointer-events:none; position:absolute; width:0; }
.cognito .c-field-required{ display:none; }

As an example of how to use this, I created a simple HTML document with the embed code for my form, and added a <style> element to the <head> tag with the above code.

edit: I'm a member of the Cognito team

Related Topic