CMS Development

audreypkx
Participant | Platinum Partner
Participant | Platinum Partner

Custom Form with CSS

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 !

0 Upvotes
4 Replies 4
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Custom Form with CSS

  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

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Custom Form with CSS

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! 🙂

0 Upvotes
audreypkx
Participant | Platinum Partner
Participant | Platinum Partner

Custom Form with CSS

Yes it helped me. Thank you 🙂

0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Custom Form with CSS

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

 

0 Upvotes