Design modifications to template not showing

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

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

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!

Hi,

thanks for your help. See attached screenshot of what I can see in my design window here 

https://app.box.com/s/6z5z3obi1rp341ucdru0osxhwp8rajjh

Also I would love to know how you embedded that scrolling animation of the screen in this post and the email I got - that's great!

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!

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?

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!

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.

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!

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?

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!

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.

Hi, good morning.

I've done that and it works fine. As soon as I tried to change something it reverted to the template though. So I re-imported and left it as is.

So at the moment I only want two more modifications. The preview button at the bottom - that needs to be the same colour as the other buttons which is #e75212

And I'd prefer the page background image to be set to cover so that the image is visible not blurred/stretched.

If you could let me have those modifications it would be fab but meanwhile I can let the client look at content. Hopefully after that they will only want wording changed or further sections which (fingers crossed) won't throw out the mods.

Many thanks once again, very impressed with the service.

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 

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.

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.