Design modifications to template not showing

  • Profile Image
    GinaW41hl
    Asked on October 26, 2017 at 11:20 AM

    Hi there,

    I've designed a form based on a template but almost none of the design modifications I made are showing up in the published form. Can you help please. 


    https://form.jotformeu.com/72953841427362

  • Profile Image
    Nik_C
    Answered on October 26, 2017 at 12:39 PM

    I checked your form, but I'm not sure what should I check actually since I don't know what did you change:

    1509035797screencast.gif

    Please let us know what would you like to change in the form so we can check that for you.

    We'll wait for your response.

    Thank you!

  • Profile Image
    Nik_C
    Answered on October 26, 2017 at 01:36 PM

    Thank you for additional information. The issue is related to template, theme, and CSS used, but it should fixable with Custom CSS. So please check this cloned version of your form: https://form.jotform.com/72984956951981

    I inserted the below CSS:

    .form-all{

      background-color: rgba(10, 8, 24, 0.81)!important;

    }

    .form-input-wide{

      background-color: rgba(10, 8, 24, 0.81)!important;

    }

    .form-label-top{

      background: rgba(10, 8, 24, 0.81)!important;

    }

    .form-label.form-label-auto {


        background: rgba(10, 8, 24, 0.81)!important;

    }

    Could it work for you?

    Please let us know.

    Thank you!

  • Profile Image
    GinaW41hl
    Answered on October 26, 2017 at 01:46 PM

    That's not really looking like I want it so I am reluctant to apply it and lose my design. It looks like the only option is to build it again on a clean form which is a bit disappointing - several extra hours work when I am very busy. Is there no way to stop the template overriding my modifications?

  • Profile Image
    Nik_C
    Answered on October 26, 2017 at 02:26 PM

    I would say that it is easier and faster to fix the current form than to create from scratch, I worked a bit on your form, please check: https://form.jotform.com/72984956951981

    The templates are meant to use as it is, so any design customizations might be overridden.

    Let us know if the above form is close to what you had in mind, we can adjust further as well.

    Thank you!

  • Profile Image
    GinaW41hl
    Answered on October 26, 2017 at 02:38 PM

    Thank you so much! That's brilliant. I take it all the changes are made with CSS - I think the only other thing I want is for it to be a bit wider - I had 650 on the one I did. The template saved me a lot of time with content but obviously I need it to match the client's brand and general look/feel. Some CSS I'm comfortable with but not all.

    The buttons might be a bit of an issue, I wasn't sure about them previously but I'll need to figure out what I want to do there. Main thing at the moment is that I need to let the client see something as they need to work further on content.

    Very grateful for your help. They are upgrading to paid subscription for this form and quite a few more for a number of projects so worthwhile all round to get this right.



  • Profile Image
    Nik_C
    Answered on October 26, 2017 at 03:03 PM

    I'm glad I was able to help.

    I wasn't able to increase the width, apparently, that cannot be overridden.

    Here is the CSS that I used for the above form:

    .form-all{

      background-color: rgba(10, 8, 24, 0.81)!important;

    }

    .form-input-wide {

        background-color: rgba(10, 8, 24, 0.10)!important;

        border: none;

    }

    .form-label-top{

      border:none!important;

      background: rgba(10, 8, 24, 0.10)!important;

    }

    .form-label.form-label-auto {

        border:none!important;

        background: rgba(10, 8, 24, 0.10)!important;

    }

    .form-section.page-section {

        width: 571px!important;

    }

    div#cid_57 {

        position: relative;

        left: -5%!important;

        color:black!important;

    }

    .qq-upload-button {

        text-align: center;

        line-height: 46px!important;

    }

    div#cid_86{

      position: relative;

        left: -5%!important;

        color:black!important;

    }

    button#input_73 {

        width: 538px;

        position: relative;

        text-transform: uppercase;

        left: -5%;

        border: 3px white solid;

        background: red;

        color: black;

        height: 60px;

    }

    You can just copy and paste the code in your Custom CSS Field.

    If you need any further adjustments for any part of the form or Submit button please let us know, we'll be happy to do it for you.

    Thank you!

  • Profile Image
    GinaW41hl
    Answered on October 26, 2017 at 03:26 PM

    Hi, unfortunately it's not working for me. I've tried it with and without the bit of css i had there previously to affect the spacing between radio buttons. Also checked I hadn't left any bits out. I tried opening it in Opera unsigned in (I'm working in Chrome) and no luck.

    Any other ideas?

  • Profile Image
    Nik_C
    Answered on October 26, 2017 at 03:42 PM

    That's odd, if you want, there is a lot of easier way to do this, just clone my form, here is how: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL and here is the URL of my form: https://form.jotform.com/72984956951981

    When you clone it, the form will be under your account (created as a copy of mine).

    Let us know if that cannot work for you.

    Thank you!

  • Profile Image
    GinaW41hl
    Answered on October 26, 2017 at 03:45 PM

    Many thanks Nik. I'm not going to try till the morning (bedtime here!) but I will have a go first thing. I'll let you know.

  • Profile Image
    ashwin_d
    Answered on October 27, 2017 at 08:01 AM

    Please inject the following custom css code and see if that solves your problem:

    button#input_73 {

        background: #e75212 !important;

    }


    .supernova {

        background-image: url(https://www.jotform.com/uploads/GinaW41hl/form_files/IMMIGRATION%20ASSESSMENT%20FORM%20BKG.426.jpg);

        background-size: cover;

        background-position: 50% 50%;

    }

    You may like to change the background size to "contain;" in the above css code if you still see the background image as blured: 

        background-size: contain;

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    GinaW41hl
    Answered on October 29, 2017 at 06:26 AM

    Hi there, I inserted the above code and it was fine, sorted out the button.

    After that I managed to make quite a few changes, mainly adding content. However. I used the Advanced Designer to change the size of the file upload buttons (they were huge and the label was not centred.) Unfortunately that has made the form revert to the template design again.

    Your agent Nik created a form for me (see answer above) which I was able to clone. I am hoping he can update this for me now and get my buttons to a more reasonable size as well - note there is new content to add as well (don't want to overwrite if poss).

    If you need access to my account please let me know.

    Many thanks.

  • Profile Image
    liyam
    Answered on October 29, 2017 at 10:21 AM

    If you wish to modify something specific only on your form and not something that affects other areas, I would not suggest using the advanced form designer since changes in it affects a whole class of fields using the same class name.

    I'm not sure what would be a reasonable size for you since the form itself uses quite big fonts. But you can check out this form that I cloned from Nik_C and modified the upload button a bit reducing its size: https://form.jotform.com/73014088837965  

    If you find it a bit not enough to your liking, it would be great what changes you wish so we can modify it for you until you get a final layout that satisfies your liking.

    Thanks.