Form Templates: Header text is displaying in a different color cloning the form for Job application form template

  • Profile Image
    choreo
    Asked on August 09, 2018 at 03:29 AM

    I just created a new Form using a Job Application Form on the site. If you sort the templates by "application" type it shows to be #13 on my screen. The Template show to have section headers that are a charcoal grey background with bright orange text and buttons, but on the form I just created, it is like there is a dark grey overlay covering up all these elements

    How can I fix this?

    My URL shows the problem and I have uploaded a screenshot of what the Template Thumbnail looks like on your site

    FYI - These areas also have the dark grey overlay in the Form Builder itself.

    Screenshot
  • Profile Image
    Kiran
    Answered on August 09, 2018 at 06:04 AM

    I have tried copying the template to my account and was able to see the issue. However, the issue seems to be with some styling (CSS file) that is not being imported to clone. This could be due to the form was built using the earlier form builder. I have checked your Jotform and it looks like that you have added some custom code to your form to change the color.

    Let me also forward the issue to our backend team to investigate the issue further. If there is any news in this regard, you'll be posted here.

    Thank you!

  • Profile Image
    arda
    Answered on August 16, 2018 at 02:47 PM

    Hi there,

    Your form use a pastel theme and I see there are all pastel themes has the same error. We can correct permanently later but I prepared temporarily solution for you. You should add this CSS code in your form then it will be like the preview theme. You can add that with Form Designer. 


    Also, I cloned to your form and you can see how your form's looks in https://form.jotform.com/82273375623964

    You can benefit from this guide to how can you add the CSS code. https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you will have a problem then don't hesitate reaching us.

    Best Regards.


    Add These Code: 

    .form-all {
       padding-top:0!important;
    }

    .form-header-group h1 {
      font-size: 17px!important;
    }

    .form-header-group .form-subHeader {
      font-style: italic;
      color:#FD8F29;
      font-size:13px;
    }

    .form-label {
      display: inline-block !important;
    }

    li[data-type="control_pagebreak"]{
      margin:0;
      padding:0;
    }

    li[data-type="control_pagebreak"] .form-pagebreak{
      margin:0;
      padding:0;
    }

    li[data-type="control_pagebreak"] .form-pagebreak-next-container,
    li[data-type="control_pagebreak"] .form-pagebreak-back-container {
      padding: 12px 0 12px 3px;
    }

    li[data-type="control_pagebreak"] .form-pagebreak-back-container {
      width:136px;
    }

    div.form-pagebreak {
      padding:0 10px!important;
      margin:0!important;
      box-sizing: border-box;
    }

    .form-error-message{
      background:#FCC!important;
    }

    .form-line.form-line-active {
      background:transparent!important;
    }

    .form-line.form-line-active .form-label{
      color:rgb(82, 75, 58) !important;
    }

    .form-line.form-line-active .form-sub-label{
      color:rgb(82, 75, 58) !important;
    }
    .form-error-arrow {
      border-bottom-color:#FCC!important;
    }
    .form-line-error .form-label,
    .form-line-error .form-sub-label{
      text-shadow:none!important;
      color:#fff!important;
    }
    .form-button-error {
        margin: 0 -10px!important;
        background-image: url(https://www.jotform.com/images/noises/noise.png);
        background: #ccc!important;
    }

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

      .form-all {
           max-width:100%!important;
      }  

      div.form-header-group  {
     margin: 0 !important;
      }
    }