Cognito Form Test

by Louis Walch

HTML

<div id="cognito_form_embed">
  <script src="https://www.cognitoforms.com/f/seamless.js" data-key="d7GvRwQ-Y0239vE3BVLwMA" data-form="2"></script>

<br/><br/><br/>
    
  <script src="https://www.cognitoforms.com/f/seamless.js" data-key="d7GvRwQ-Y0239vE3BVLwMA" data-form="1"></script>

</div>

SCSS

$placeholder-color: #828282;

BODY {
    background: #F4F4F4;
}

#cognito_form_embed {
    
    .cog-form__container {
        background-color: transparent;
    }
    .cog-header {
        display: none;
    }
    LEGEND,
    LABEL {
        /* Apply font style */
        color: black;
        font-family: sans-serif;
        font-weight: bold;
        text-transform: uppercase;
    }
    

    INPUT[type="text"],
    INPUT[type="email"],
    INPUT[type="tel"],
    TEXTAREA {
        border: 1px solid #828282;
        font-family: serif;
        background-color: transparent;
        color: black;
        &:focus {
            border-color: black;
        }
    }

    ::-webkit-input-placeholder {
        color: $placeholder-color;
    }
    :-moz-placeholder {
        color: $placeholder-color;
        opacity: 1;
    }
    ::-moz-placeholder {
        color: $placeholder-color;
        opacity: 1;
    }
    :-ms-input-placeholder {
        color: $placeholder-color;
    }

    .cog-upload {
        padding: 0;
        border: 0;
        .el-upload-dragger {
            > DIV {
                padding: 0;
                margin: 0;
                border: 0;
                background-color: transparent;
            }
        }
    }
    
    .cog-helptext {
        font-family: serif;
        opacity: 0.6;
    }
    
    BUTTON[type="button"] {
        border: 1px solid black;
        background-color: transparent;
        font-family: sans-serif;
        color: black;
        border-radius: 0;
        text-transform: uppercase;
        padding: 10px 20px;
    }
   
   
    BUTTON[type="submit"] {
        border: 2px solid black;
        background-color: black;
        border-radius: 0;
        text-transform: uppercase;
        color: white;
        padding: 20px 90px;
        font-family: sans-serif;
        &:hover {
            color: black;
            background-color: white;
        }
    }
    
}