Custom Form with CSS

[#1]

Hi, 

I took two Landing Page Template from the Marketplace.

Here is the first one, customized for a client : http://mr-bricolage-6376193.hs-sites.com/catalogue-noel-2019?hs_preview=acvSALVU-22161501351

the second one template, but the form is not CSS customized : http://mr-bricolage-6376193.hs-sites.com/-temporary-slug-ce6c7956-0ad3-40f3-946a-2c15580efeb4?hs_pre...

My question is : is it possible to get the form from the first Template to put into the second template (I mean the design) ? Normally, the second template has been sold without any form, that's why the form isn't customized. If so, how can I take the CSS from the form from the first template and paste it into the second template ? 

Thank you for your help !

[#2]

Hi @audreypkx 

Yes, u can customize the css file of second link, with css code of first link file.

.hs-custom-form input, .hs-custom-form select {
    line-height: normal;
    width: 100%;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 16px;
    display: block;
    height: 34px;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -o-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -ms-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.hs-custom-form span {
    background: #fff;
    color: #666;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hs-error-msgs {
    color: #d00;
    font-size: 14px;
    margin: 5px 5px 0;
    font-weight: 100!important;
    list-style: none;
    padding: 0;
}

.hs-custom-form {
    text-align: left;
}

input.hs-button.primary.large {
    margin: 20px 0 0;
    height: auto;
    text-transform: uppercase;
}

Did this post help solve your problem? If so, please mark it as a solution.

Best Regards!

[#3]

Yes it helped me. Thank you

[#4]

Hi @audreypkx , how are u?

I'm glad that solved your problem. If possible, be sure to mark the answer that helped you in the post as the solution.

Best Regards! 

[#5]

1. You'll need to go to the design manager (Marketing > Files and Templates > Design Tools) and search for the Honeydew_Catalogue_Noel CSS file.
2. In that file look for body .hs-form-field and copy everything from there to .hsformerror em
3. Then in the design manager search for the Apollo CSS file and paste the styles you copied into it and publish.
4. You may need to make some slight edits to the styles you copied over to accomodate the different template setup.

Alyssa Wilie
Web Developer
LyntonWeb