CSS Won't Work Anymore When Change Form Themes

I just tried to apply this to our similar form "The Blasting Room - Mastering Form" and created a clone to make it happen. It all worked as before, but the only bummer part is that now the "Amount Due" field is no longer at the bottom of the screen and formatted to remain stationary so it's always showing how much the selections will cost. This function is imperative for this form, so is there anyway you can help me rebuild this with the new template? When I tried copying the CSS from the other form it was super wonky.

Hi theblastingroom,

I tried cloning the original form, and it copied the exact form with the amount due showing at the bottom of the form and stationary:

Can you try cloning the form again?

Give it a try and let us know how it goes.

Hey Mary,

Thanks for helping me tackle this! So the issue is not when I clone the form, it is when I update the theme on the cloned form, which allows me to use the new Upload File element on this old form of mine (which was my problem on the original thread: https://www.jotform.com/answers/27429891-how-to-update-the-file-upload-element-in-my-old-form).

When I click on Default Theme and update it, it allows me to use the new File Upload element, but it also removes the logos (not a big deal) and the custom CSS that was creating the Amount Due across the bottom of the screen (which is super important for this form to continue to function the way we need it to). When I copy the old CSS over, it's all wonky. Is there anyway you could help me recreate it that in with the new theme? Last time I did it I had a Jotform support agent walk me through it, which I why it's a little out of my wheel house to just do myself, lol.

Thanks so much for your help!

Hi theblastingroom,

Can you share with us a screen recording of what’s happening so we can try to replicate it on our end? You can share the video recording on any public sharing platform like Google Drive or Dropbox, or you can simply use Loom to record the video and share the video link with us.

Once we hear back from you, we'll be able to move forward with a solution.

Thanks Shaina! Here's a link so you can see what's happening on my end:

https://www.dropbox.com/scl/fi/067afeo33219qyzou9xmt/Jotform-Amount-Due-Video.mov?rlkey=x315s0ns2mxwgecjugb712gdh&st=72ozla3l&dl=0

In steps, I:

1) clone the form (so I don't mess up the current one)

2) update the theme so that I can now access the updated File Upload element.

3) reload the page so that the new Theme shows

4) show that while I now have access to the new File Upload element, my logo and custom CSS is gone that kept our Amount Due at the bottom of the page / displayed in a standard way.

5) then I copy and paste the old CSS to show that it no longer works as it should and is displaying the Amount Due all wonky.

Hoping to just have help recreating that CSS so that it displays the Amount Due like it did on the old form. I had help from a Jotform Support in the agent in the past when I created that (probably about 7 years ago now, lol), so I unfortunately don't have the know how now to do it on my own. Thanks!

Hi theblastingroom,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks Aries!

Hi theblastingroom,

When you switch your form’s theme to default, the custom CSS styling applied to your fields might stop working because the default theme often has its own built-in styles that can override or conflict with your custom CSS.

You can still get similar field styles, but not exactly the same. You need to create custom CSS codes. I have created custom CSS codes that you can use with the cloned form with the default theme. Let me show you how to do it:

1. First, copy this code:

/* Total field styling */

#id_62 {

    font-size: 22px;

    background-color: #848484;

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    text-align: center;

    padding: 0px 0 !important; /* Reduce padding */

    margin: 0 !important;

    z-index: 9999;

    height: px !important; /* Let content determine height */

    box-sizing: border-box;

}



#id_62 .form-input-wide {

    width: auto !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    padding: 0 !important;

    margin: 0 auto !important;

    height: 40px;

    margin-bottom: 5px!important;

    margin-top: 5px!important;

}



/* Style the donation input */

input#input_62_donation {

    width: 100px !important;

    max-width: 90% !important;

    margin: 0 auto !important;

    display: block !important;

    font-size: 20px;

    padding: 0px 0px !important;

    border-radius: 6px;

    box-sizing: border-box;

    position: relative;

    bottom: 15px;

}

label#label_62 {  

  position: relative;

    top: 35px!important;

    right: 120px;

}

.donation_cont .form-input-wide span.form-sub-label-container .donation_currency {

    top: -50px!important;

    position: relative;

    left: 75px;

    

}

input#input_62_donation {

    text-align: center;

}

/*File upload custom styling*/

#cid_68 .jfUpload-files-container > div {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

}



#cid_68 .qq-upload-button {

  display: inline-block !important;

  width: 50% !important;

  min-width: 150px !important;

  height: 40px !important;

  padding: 0 12px !important;

  background-color: #f5f5f5 !important;

  border: 1px solid #ccc !important;

  border-radius: 6px !important;

  font-size: 16px !important;

  font-weight: 500 !important;

  color: #333 !important;

  text-align: center !important;

  line-height: 40px !important;

  box-sizing: border-box !important;

  cursor: pointer;

}

#cid_68 .qq-upload-drop-area {

  margin-top: 10px !important;

  text-align: left !important;

  width: 50% !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the sample result:

For the logo, you can easily click on Add Logo and upload your logo again. Let me show you how:

1. In Form Builder, on the top of the form field, click on the Add Your Logo button.

2. Click on the Upload File button and upload your log again, or you can just click on the My Images tab to use your existing logo.

Give it a try and let us know if you have any other questions.

So helpful!! Thanks so much Aries. I have just a few follow up questions:

1) Can we get the "$" to show in the Amount Due before the number displayed?

2) In mobile view the logo gets stretched vertically. Is there a way to set it so it doesn't stretch and maintains its relative proportions?

Thanks!!

Hi theblastingroom,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi theblastingroom,

Using the steps provided by my colleague Aries above, you can inject this custom CSS code below:

label#label_62 {

    position: relative;

    top: 24px !important;

    right: 120px;  

}



.donation_currency {

    font-size: 0 !important;  /* hides the text */

}



.donation_currency::before {

    content: "$";

    font-size: 20px;

    margin-left: -224px;

}



/*mobile view*/



img {

    max-width: 100%;

    height: auto;

    width: 100%;

}

Check out my screenshot below to see my results:

Dollar Sign:

Mobile View:

Give it a try and let us know how it goes.

That totally solved the mobile view issue, but strangely that bit of code didn't add the "$" for me. See link below of the form I'm currently working off of / a screenshot of what I'm seeing. Any ideas?

https://form.jotform.com/251481063295154

P.S. You all are TOP NOTCH! Can't rave enough about how helpful you all have been ❤️

Hi theblastingroom,

Upon reviewing your form, I can confirm that the dollar sign is visible. Take a look at the screenshot below:

As a precaution, I've cleared your form caches. Can you go ahead and try it again?

Give it a try and let us know how it goes.

I can only see it when I open the page in Chrome instead of Safari. Strange! Any idea why that would be?

Also, is there anyway we can align the $ with the amount? Right now it's sitting below it, which looks a little wonky.

Thanks!

Hi theblastingroom,

Add the custom CSS codes below to show the $ sign in the Safari browser and to align it properly.

.donation_currency {

  display: inline-block !important;

  position: relative !important;

}

.donation_currency::before {

  content: "$" !important;

  font-size: 22px !important;

  margin-right: 4px !important;

  position: relative !important;

  top: -6px !important;

  display: inline-block !important;

  right:115px;

}

Here's the result:

Give it a try and let us know how it goes.

Boom! I think that's it. Like I said before, you all are stellar! Really appreciate the A+ support here :)