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

  • Profile Image
    opitzyannick
    Asked on August 25, 2021 at 10:39 AM

    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.

    Screenshot
  • Profile Image
    Dagmar_B
    Answered on August 26, 2021 at 01:04 AM

    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.

  • Profile Image
    opitzyannick
    Answered on August 26, 2021 at 08:38 AM

    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.

  • Profile Image
    Dagmar_B
    Answered on August 27, 2021 at 12:49 AM

    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.

  • Profile Image
    opitzyannick
    Answered on August 27, 2021 at 05:17 AM

    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

    1630055832_6128ad9889ed1_

  • Profile Image
    Yau_C
    Answered on August 27, 2021 at 08:18 AM

    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:

    1630066330_6128d69a26b0b_

    1630065985_6128d54168a82_

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

    1630066196_6128d6148b0a6_

    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.

  • Profile Image
    opitzyannick
    Answered on August 27, 2021 at 09:15 AM

    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.

  • Profile Image
    Yau_C
    Answered on August 27, 2021 at 10:30 AM

    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.

  • Profile Image
    opitzyannick
    Answered on August 27, 2021 at 12:02 PM

    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.

  • Profile Image
    Basil_A
    Answered on August 27, 2021 at 04:31 PM

    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.

  • Profile Image
    opitzyannick
    Answered on August 30, 2021 at 09:24 AM

    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.

  • Profile Image
    Basil_A
    Answered on August 30, 2021 at 10:43 AM

    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.

  • Profile Image
    opitzyannick
    Answered on August 31, 2021 at 08:31 AM

    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?

  • Profile Image
    opitzyannick
    Answered on August 31, 2021 at 08:56 AM

    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.

  • Profile Image
    opitzyannick
    Answered on August 31, 2021 at 09:27 AM

    Problem is solved.


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


    Thanks anyway.