Thank You page: HTML code is showing up

Hi,

My form is suddenly showing strange code at the top of the Thank You page and I can't figure out why, or where the code is located to fix it. The code shows up on a phone and computer. Thank you for your help in advance!

Form: https://form.jotform.com/220335665442150

Hi Andrea,

Thanks for reaching out to Jotform Support! I'm sorry that you're having issues with your form. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Andrea,

Thank you for patiently waiting, we appreciate it. When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. It's really easy to fix. Let me show you how:

• Clone your form first.
• Go to your Form Designer, then to the Themes Tab.
• Change to your preferred Themes.
• You can check the screencast below for the reference.

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

That is not a viable solution due to the spreadsheet that this form integrates with importing information to multiple other spreadsheets. Whenever I’ve cloned and started a new spreadsheet, it changes the columns and all of my Google Sheets malfunction.
...

Hello,

I no longer see the code in the form and on a cloned version. Please confirm if the issue has been fixed or if you still need help.

We look forward to hearing from you.

Please disregard my previous message. I just saw the issue again. I'll reach out again as soon as I have an update. We appreciate your patience and understanding.

I have created a ticket and escalated this to our Developer team. Although we don't know exactly when the issue will be fixed, we’ll circle back to this thread when we have an update.

Thanks for your patience and understanding, we appreciate it.

Hello,

This issue is the result of a small syntax error in your in your "Inject Custom CSS" section, currently, your injectCSS ends like this:

@media screen and (min-width: 768px)

<style>

.jotform-form {

    padding: 0px;

}

.appointmentSlot {

  border: 1px solid #000099;

  color: #000099;}

Converting it to this:

@media screen and (min-width: 768px) {

.jotform-form {

    padding: 0px;

}

.appointmentSlot {

  border: 1px solid #000099;

  color: #000099;}

}

Will resolve your issue. This is due to the fact that, when using media queries in CSS, their block needs to be scoped using curly braces, and the <style> tag should be removed.

Thank you!

Am I replacing code? I don't see a line item like this one. Can you tell me which line it is in the CSS?

Hello 1mpact,

Please try replacing these lines of CSS codes with the one provided by my colleague. See the image attached:

Here is the CSS code replacement:

@media screen and (min-width: 768px) {

.jotform-form {

   padding: 0px;

}

.appointmentSlot {

  border: 1px solid #000099;

  color: #000099;}

}

Give it a try and reach out again if you have any other questions.