Custom Form with CSS

Highlighted
New Contributor

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 !

CSS
Reply
0 Upvotes
4 Replies 4
Esteemed Contributor | Platinum Partner

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;
}

form-2.PNG

 

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

Best Regards! Smiley Happy

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/
Reply
0 Upvotes
New Contributor

Yes it helped me. Thank you Smiley Happy

Reply
0 Upvotes
Esteemed Contributor | Platinum Partner

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! Smiley Happy

 

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/
Reply
0 Upvotes
Regular Contributor | Diamond Partner
  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

Reply
0 Upvotes