Einbetten in HTML Datei setzt background-color immer auf "#ecedf3"

Guten Tag,

ich habe ein Formular erstellt welches einen schwarzen Hintergrund enthält.

Sobald ich das Formular per Code einbette, wird der Hintergrund außerhalb des Formulars auf Weiß gesetzt.

Genau genommen auf den Farbcode #ecedf3 der aber nirgendwo im Code aufzufinden ist.

Ich benötige hier Unterstützung.

Hallo,

Wir Bitten die Unannehmlichkeiten zu entschuldigen.

Können Sie uns die URL der Webseite nennen, auf der Sie das Formular einbetten wollen? Dann könnten wir besser nachschauen, wo das Problem liegt.

Bitte teilen Sie uns auch mit, mit welchem Code Sie die Einbettung vornehmen.

Wir warten auf Ihre Antwort.

Hallo Dagmar_B,

hier die URL der Website: http://tintetodundteufel.de/test.html

hier das Formular was ich nutze: https://form.jotform.com/212361107327042

Eingebettet habe ich das Formular über:

Veröffentlichen -> Einbetten -> Quellcode

Den Quellcode habe ich dann einfach in den body gepackt.

Hallo,

Vielen Dank für Ihre Antwort.

Ich konnte das Problem selbst nachvollziehen, kann Ihnen aber eine Lösung anbieten.

Sie müssten folgendes CSS einfügen. Sie können dies auf zwei Arten tun:

1. Im Quellcode, der schon auf der Webseite ist
2. Im Formular-Builder, und dann den Quellcode neu einfügen.

Zuerst der CSS-Code:

.form-all {
margin: 0 auto !important;
}

body {
background: #000000 !important;
}

Version 1:

Im Quellcode auf Ihrer Seite suchen Sie nach dem Text: /* Injected CSS Code */ (z.B. mithilfe der Tastenkombination Strg+F) Es gibt diesen Text zweimal.

Direkt hinter dem ersten Text können Sie den Code einfügen.

Die Seite sollte dann komplett Schwarz werden.

Version 2:

Sie fügen den CSS-Code in den Formular-Designer unter STILE bei eigenes CSS ein.

Anleitung: Wie-man-benutzerdefinierte-css-codes-einfugt

Danach müssten Sie allerdings den HTML-Code erneut kopieren und wieder auf Ihrer Webseite einfügen, da er bei der HTML Einbettung NICHT wie bei den anderen Arten automatisch aktualisiert wird.

Ich hoffe, ich konnte Ihnen helfen. Bei weiteren Fragen melden Sie sich gerne wieder hier.

Hallo Dagmar_B

das hat soweit gut funktioniert!

Allerdings tritt nun ein weiteres Problem auf.

Ich habe 2 Widgets in dem Formular drin, die seitdem eher so bedingt laden.

In der ursprünglichen test.html die ich Ihnen bereitgestellt hatte, wo nichts außer das Formular implementiert ist funktioniert es ohne Probleme.

Wenn ich es allerdings in mein laufendes Projekt implementiere stoße ich auf eine Fehlermeldung die ich mir nicht erklären kann, welche von JotForms geworfen wird.

Ich habe dies wieder unter folgendem Link bereitgestellt: http://tintetodundteufel.de/test.html

Hi,

I have checked your site: http://tintetodundteufel.de/test.html

But I am not getting the error message in your screenshot.

This is the error message I am getting:

Could you explain the steps to recreate the following error message please?

We will need to forward this to the author of this script.

Our German speaking colleague will be available on Monday through Friday 0:00-4:00 am EST.

Hey Yau_C,

The error message "Uncaught TypeError".... in your screenshot is actually exactly the same.

The difference with me was that I debugged this error via VSCode and followed it until I found the actual cause of the error message. This is then the following I had attached as a screenshot, but in principle we are talking about the same error.

Hi,

Usually what you, the end user, are seeing in your browser is not the original source code, but the result of code bundler, such as Webpack.

We should check the original source if want to debug this.

You mentioned:

"...However, when I implement it in my current project I come across an error message that I cannot explain to myself, which is thrown by JotForms."

Could you describe how does this error impact your site/form in terms of UI/UX please?

Thank you.

The only difference is that the two widgets I have in my form both stop loading. They still exist and take up space (although not as much as usual) but nothing is displayed. Accordingly, these two widgets are of course also not usable.

Apart from this UI aspect of the widgets, everything else works exactly as before.

If desired I can upload my source code somewhere and link it here.

Hi,

Does the error go away if you remove the CSS code that was provided by my colleague?

How are you inserting the CSS code?

Looking forward to your reply.

No the CSS code actually does not change the error.

However, the error disappears as soon as I implement the form via the "Embed" function.

Hi,

My direct recommendation would be to use the embed option or the Iframe code to embed the form as the source code is not needed unless you are changing the source code itself.

If that is not possible, you may check if Jotform's CDN, cdn.jotfor.ms. is being blocked when requests are made.

Please let us know if the issue still persists.

Hi,

embed or Iframe is not a option for me because i need to make some source code changes :(

Any tips how I can check if cd.jotfor.ms is blocked?

Update:

I just tested again and found out that it doesn't matter if there is a widget in the form or not. The error actually comes on this page ALWAYS.

Of course I never noticed it before because Textboxe and co. are still usable.

Problem is solved.

jQuery.noConflict() was the solution to the problem.

Thanks anyway.