Mobirise-Tutorials.com

Liebe Experten,
ich habe das Forum bereits durchsucht - aber das Suchwort "HTML" ist natürlich zu häufig vertreten....
In aller Kürze: Ich habe mit HubSpot und Brevo experimentiert und in beiden Tools Formulare erstellt, die ich per HTML Code Block eingebunden habe. Aber die Darstellung ist Suboptimal. Unter https://forums.mobirise.com/discussion/comment/112966/ kann man dazu auch einen Beitrag finden. Hier will man mir immer helfen, in dem ich witsec oder andere Formular-Anbieter nutzen soll. Aber die bieten nicht ansatzweise das, was ich brauche. Ich will nicht meine Bedürfnisse an ein Formular dem Tool unterordnen. Es muss doch möglich sein, einen HTML Code so anzupassen, dass ein Formular passend zur Seite dargestellt wird.

Ich habe auf einer Testseite mal ein Beispiel hochgeladen: https://trachtgold.de/test.html
Auf der Startseite sieht man unten auch eins (von Mobi) welches in einem Abschnitt mit farbigem Hintergrund und breiter dargestellt wird. So in der Art möchte ich das von Brevo auch.

Lange Rede kurzer Sinn: Ich bin eine Marketing-Tante, kein Tec-Experte. Ich brauche beim Einbauen einiger Formulare (ich möchte auch gerne noch Anmeldeformular machen) Hilfe in Sachen Optik. Ich möchte NICHT andere Tools nutzen, denen ich mich unterwerfen soll... :-)

Wer kann mich da unterstützen?
Liebe Grüße,
Ela

Hallo Ela,

zunächst mal herzlich willkommen bei uns

Ich habe gerade kaum Zeit und kann mir Deine Fragen im Hersteller-Forum jetzt nicht wirklich durchlesen.

... gerne morgen früh

Also - ganz sicher ist das Formular von Mobirise nicht die optimale Lösung, denn da hast Du wenig Möglichkeiten. Außerdem werden diese Formulare von dem Drittanbieter "Formoid" verarbeitet, was sehr bedenklich bezüglich des EU Datenschutzes ist.

Die Formulare von all den Drittanbietern (wie auch "Witsec") kenne ich nicht, da ich mit Leuten, die ihre Identität nicht preisgeben immer ein Problem habe. Außerdem bin ich der Überzeugung, dass diese Erweiterungen so eine Copyright-Verletzung gegenüber Mobirise darstellen - auch wenn ich mit dieser Meinung ziemlich alleine dastehe.

Grundsätzlich kann man natürlich immer ganz eigene Formulare erstellen und diesen auch ganz eigene Style-Einstellungen geben.

Ich habe das mehrere Dutzend Mal mit dem Formular-Generator von unserem Mitglied "Werner Zenk" getan. Hier geht es zu diesem Generator:

https://werner-zenk.de/tools/formulargenerator.php

... und hier zu meiner Einbau-Anleitung (und auch nochmals diesem Generator):

https://www.mobirise-tutorials.com/Formular-Generator/

Dieser Generator hat eine eigene CSS (Style-Datei) und/oder kann auch den Style von dem in Mobirise verwendeten Framework "Bootstrap" verwenden.

Dann gibt es auch ganz tolle Programme, wie z.B. "Arclab" mit denen man eigentlich so ziemlich alles erreichen kann.

https://www.mobirise-tutorials.com/Form ... rclab.html

Eigentlich würde ich das Board von Dir ganz gerne aus den "Job-Angeboten" in das Thema "Mobirise" verschieben, denn es wird sich bezüglich dieser Formulare wohl hier kaum jemand anbieten und dann sehen es mehr Benutzer vom Forum.

Lieber Tommy,

das eilt jetzt nicht soooooo sehr. Ich bin mit den Formularen ohnehin schon im dunkelgelben DSGVO-Bereich unterwegs..
Aber auch du versuchst, mir ein anderes Formulartool schmackhaft zu machen.

Das kann ich gar nicht einsehen. Wenn ich doch ein CRM (sagen wir HubSpot) verwende, in dem ich alle Daten verwalte, warum soll ich dann einen Umweg über einen weiteren Anbieter nehmen - und sei er auch noch so DSGVO-konform. Ein Kontakt über ein CRM-eigenes Formular fliegt in das System, ich kann da sofort Automationen hinterhängen, Workflows oder Follow-ups einbauen etc. Wenn ich erst noch wieder dafür sorgen muss, dass von Drittanbieter B zu Drittanbieter C Daten geschaufelt werden können, ist das nur wieder eine Sollbruchstelle... Ich meine das nicht abwertend. Ich kann nur nicht glauben, dass ich der einzige Mensch auf der Welt bin, der CRM Formulare in Mobirise einbauen möchte und diese auch ein bißchen "schön" bzw. passend zum Design haben möchte.

Nur kann ich leider das Coden nicht mehr lernen. Ich schaffe das nicht, im CSS sauber rumzuschreiben.

https://www.arclab.com/de/webformular-generator/ < Das ist eine .exe Datei - wo bekomme ich die MAC Version?

Liebe Grüße,
Ela

P.S. Kannst gerne den Fred hinschieben, wo du denkst, dass er richtig ist.

ich weiß jetzt noch nicht genau was Du von Deinem Formular ganz genau erwartest. Das Mobirise-eigene Formular ist auf jeden Fall die schlechteste Lösung, denn das hat mit den DSGVO Richtlinien so gar nichts am Hut.

Die Mobirise-Formulare senden eben die Inhalte zunächst an den Drittanbieter "Formoid" und erst dort werden diese Inhalte Deiner Besucher als E-Mail verarbeitet. Kein Mensch weiß, was bei "Formoid" damit geschieht und das kann man auch in keiner Datenschutzerklärung darlegen.

Bitte schreibe doch mal ganz klar, was Dein Formular können soll und wie es aussehen sollte.

Arclab ist ein eigenständiges Programm, mit dem man seine Formulare am PC erstellt. In Mobirise bindet man dann das Formular lediglich über einen Code ein.

Hier verwende ich ein solches Formular auch:

https://www.mobirise-tutorials.com/Formular/

Kannst das gerne ausgiebig testen. Damit kann man so ziemlich alles machen was möglich ist.

Den "Code Editor" von Mobirise braucht man aber dann auch, sonst kann man nichts einbinden

Das hat Mobirise so eingerichtet, wie eine gute Marketing-Frau es auch machen würde

... dass eben ohne diesen, fast nichts geht. Deswegen ist Mobirise eben auch nicht wirklich kostenlos, sondern am Ende ganz schön teuer, derweil man alle diese Werkzeuge immer nur jährlich über eine Lizenz verwenden kann.

... sorry überlesen - "Arclab" kann kein Mac (nur Windows)

Brevo generiert Dir doch eine Iframe Code.
Den kannst Du dann in Mobirise einbinden und schon hast Du das gewünschte.

Wie man so was macht steht z.B. hier :

https://www.mobirise-tutorials.com/Nach ... misch.html

Hallo Ela,
auch von mir herzlich willkommen hier.
Ich glaube dir fehlt nicht nur die CSS um das Formular optisch so dazustellen wie du es dir vorstellst, sondern auch die Funktionalität dahinter. Du hast erwähnt das du z.B. ein Anmeldeformular für einen Newsletter erstellen möchtest und dafür ja laut DSGVO die Double-Opt-in Regel brauchst. Das must du dann ja auch als Funktion hinter dem Formular haben. Zudem benötigst du dann auch noch einen Speicher wo diese Bestätigung hinterlegt ist und wo sich der User auch selbstständig wieder austragen können muss.
Diese Funktionalität muss ja irgendwo programmiert werden und dafür nutzt man in der Regel die Prgrammiersprachen PHP und JavaScript. Beides ist in Mobirise nicht mit inbegriffen. Deshalb werden dir hier Möglichkeiten von 3 Anbietern vorgeschlagen die solche Tools bereits umgesetzt haben und über einen Generator anbieten wie z.B. der von Werner Zenk.
In Mobirise werden nur der HTML Code und die Optik (CSS) generiert keinerlei Funktionen wie du sie zusätzlich brauchst.

Ergänzung:
Ich habe gerade an deinem Bsp. gesehen, dass du die Funktionalität per JavaScript von Brevo bekommst.
Aber dein Einbau des Codes von Brevo ist nicht ganz Ok. Dazu im nächsten Beitrag mehr.

Hallo Ela,
hier dein Code, wie du Ihn eingebunden hast.
Das ist nicht ganz OK.

Code: Alles auswählen

<div id="custom-html-7y"><!-- Type valid HTML here -->
<!-- Begin Brevo Form -->
<!-- START - We recommend to place the below code in head tag of your website html  -->
<style>
  @font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }
</style>
<link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css">
<!--  END - We recommend to place the above code in head tag of your website html -->

<!-- START - We recommend to place the below code where you want the form in your website html  -->
<div class="sib-form" style="text-align: center;
         background-color: #ffffff;                                 ">
  <div id="sib-form-container" class="sib-form-container">
    <div id="error-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;max-width:540px;">
      <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
        <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon">
          <path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"></path>
        </svg>
        <span class="sib-form-message-panel__inner-text">
                          Deine Anmeldung konnte nicht gespeichert werden. Bitte versuche es erneut.
                      </span>
      </div>
    </div>
    <div></div>
    <div id="success-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#085229; background-color:#e7faf0; border-radius:3px; border-color:#13ce66;max-width:540px;">
      <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
        <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon">
          <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"></path>
        </svg>
        <span class="sib-form-message-panel__inner-text">
                          Deine Anmeldung war erfolgreich.
                      </span>
      </div>
    </div>
    <div></div>
    <div id="sib-container" class="sib-container--large sib-container--vertical" style="text-align:center; background-color:rgba(253,244,227,0.62); max-width:540px; border-radius:3px; border-width:1px; border-color:#C0CCD9; border-style:solid; direction:ltr">
      <form id="sib-form" method="POST" action="https://ecd2b3fa.sibforms.com/serve/MUIFAMyoUVs4E1IhX6Qtl-0RgnsS58pHGOf4SDVDU2oQWt28l_kHgu839qj-9FGkZArtJinrT7_-4u_zbDlGitZJ7sneQI2D4tuQEgkil6YklQot9vkeClf6lcOqq4jwf7D-dUtTmiUxdlcAMGmd2Z6kbVBfnoOyaX04LcfVeiZJ8k2xvm3aMlDOayeDouHJFl1dC_E8IYbVLwDA" data-type="subscription">
        <div style="padding: 8px 0;">
          <div class="sib-form-block" style="font-size:32px; text-align:center; font-weight:700; font-family:&quot;Futura&quot;, sans-serif; color:#f3b624; background-color:transparent; text-align:center">
            <p>Bienen-News abonnieren</p>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-form-block" style="font-size:16px; text-align:center; font-family:&quot;Helvetica&quot;, sans-serif; color:#2b2626; background-color:transparent; text-align:center">
            <div class="sib-text-form-block">
              <p>Erhalte 4-6 Mal pro Jahr News über die TRACHTGOLD Imkerei und die BürgerBienenWerkstatt.</p>
            </div>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-input sib-form-block">
            <div class="form__entry entry_block">
              <div class="form__label-row ">

                <div class="entry__field">
                  <input class="input " type="text" id="EMAIL" name="EMAIL" autocomplete="off" placeholder="EMAIL" data-required="true" required="">
                </div>
              </div>

              <label class="entry__error entry__error--primary" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;">
              </label>
            </div>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-optin sib-form-block">
            <div class="form__entry entry_mcq">
              <div class="form__label-row ">
                <div class="entry__choice" style="">
                  <label>
                    <input type="checkbox" class="input_replaced" value="1" id="OPT_IN" name="OPT_IN">
                    <span class="checkbox checkbox_tick_positive" style="margin-left:"></span><span style="font-size:12px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#3C4858; background-color:transparent;"><p>Ich möchte Ihren Newsletter erhalten und akzeptiere die <a href="https://trachtgold.de/impressum-datenschutz.html#content7-2n" target="_blank">Datenschutzbestimungen</a>.</p></span> </label>
                </div>
              </div>
              <label class="entry__error entry__error--primary" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;">
              </label>
              <label class="entry__specification" style="font-size:12px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#8390A4; text-align:left">
                Der Newsletter kann jederzeit über einen Link in abbestellt werden.
              </label>
            </div>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-form-block" style="text-align: center">
            <button class="sib-form-block__button sib-form-block__button-with-loader" style="font-size:16px; text-align:center; font-weight:700; font-family:&quot;Futura&quot;, sans-serif; color:#FFFFFF; background-color:#f3b624; border-radius:3px; border-width:0px;" form="sib-form" type="submit">
              <svg class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon" viewBox="0 0 512 512">
                <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"></path>
              </svg>
              ABONNIEREN
            </button>
          </div>
        </div>

        <input type="text" name="email_address_check" value="" class="input--hidden">
        <input type="hidden" name="locale" value="de">
      </form>
    </div>
  </div>
</div>
<!-- END - We recommend to place the below code where you want the form in your website html  -->

<!-- START - We recommend to place the below code in footer or bottom of your website html  -->
<script>
  window.REQUIRED_CODE_ERROR_MESSAGE = 'Wählen Sie bitte einen Ländervorwahl aus.';
  window.LOCALE = 'de';
  window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "Die eingegebenen Informationen sind nicht gültig. Bitte überprüfe das Feldformat und versuchen es erneut.";

  window.REQUIRED_ERROR_MESSAGE = "Dieses Feld darf nicht leer sein. ";

  window.GENERIC_INVALID_MESSAGE = "Die eingegebenen Informationen sind nicht gültig. Bitte überprüfe das Feldformat und versuchen es erneut.";




  window.translation = {
    common: {
      selectedList: '{quantity} Liste ausgewählt',
      selectedLists: '{quantity} Listen ausgewählt'
    }
  };

  var AUTOHIDE = Boolean(0);
</script>
<script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>


<!-- END - We recommend to place the above code in footer or bottom of your website html  -->
<!-- End Brevo Form --></div>

Nehmen wir mal deinen eingebundenen Quellcode auseinander.
Du hast zum einen eine Referenzierung auf eine CSS-Datei:

Code: Alles auswählen

<link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css">

Diese gehört in den Headbereich deiner Webseite. In Mobirise trägst du diesen Codeabschnitt hier ein:

Und diesen hier:
Teil2:

Code: Alles auswählen

<style>
  @font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }
</style>

Diese CSS Anweisungen trägst du in den CSS-Editor von Mobirise ein. Allerdings ohne die Style-tags <style></style>.
Also nur das hier:

Code: Alles auswählen

@font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

So kommst du zum HTML und CSS Editor in Mobirise:

Dann hast du noch JavaScript Code:

Code: Alles auswählen

<script>
  window.REQUIRED_CODE_ERROR_MESSAGE = 'Wählen Sie bitte einen Ländervorwahl aus.';
  window.LOCALE = 'de';
  window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "Die eingegebenen Informationen sind nicht gültig. Bitte überprüfe das Feldformat und versuchen es erneut.";

  window.REQUIRED_ERROR_MESSAGE = "Dieses Feld darf nicht leer sein. ";

  window.GENERIC_INVALID_MESSAGE = "Die eingegebenen Informationen sind nicht gültig. Bitte überprüfe das Feldformat und versuchen es erneut.";




  window.translation = {
    common: {
      selectedList: '{quantity} Liste ausgewählt',
      selectedLists: '{quantity} Listen ausgewählt'
    }
  };

  var AUTOHIDE = Boolean(0);
</script>
<script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>

Dieser gehört vor das schließende Body-tag </body>
Das wird in Mobirise hier eingetragen:

Der Rest muss dann in den HTML-Editor

Code: Alles auswählen

<!-- START - We recommend to place the below code where you want the form in your website html  -->
<div class="sib-form" style="text-align: center;
         background-color: #ffffff;                                 ">
  <div id="sib-form-container" class="sib-form-container">
    <div id="error-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;max-width:540px;">
      <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
        <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon">
          <path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"></path>
        </svg>
        <span class="sib-form-message-panel__inner-text">
                          Deine Anmeldung konnte nicht gespeichert werden. Bitte versuche es erneut.
                      </span>
      </div>
    </div>
    <div></div>
    <div id="success-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#085229; background-color:#e7faf0; border-radius:3px; border-color:#13ce66;max-width:540px;">
      <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
        <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon">
          <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"></path>
        </svg>
        <span class="sib-form-message-panel__inner-text">
                          Deine Anmeldung war erfolgreich.
                      </span>
      </div>
    </div>
    <div></div>
    <div id="sib-container" class="sib-container--large sib-container--vertical" style="text-align:center; background-color:rgba(253,244,227,0.62); max-width:540px; border-radius:3px; border-width:1px; border-color:#C0CCD9; border-style:solid; direction:ltr">
      <form id="sib-form" method="POST" action="https://ecd2b3fa.sibforms.com/serve/MUIFAMyoUVs4E1IhX6Qtl-0RgnsS58pHGOf4SDVDU2oQWt28l_kHgu839qj-9FGkZArtJinrT7_-4u_zbDlGitZJ7sneQI2D4tuQEgkil6YklQot9vkeClf6lcOqq4jwf7D-dUtTmiUxdlcAMGmd2Z6kbVBfnoOyaX04LcfVeiZJ8k2xvm3aMlDOayeDouHJFl1dC_E8IYbVLwDA" data-type="subscription">
        <div style="padding: 8px 0;">
          <div class="sib-form-block" style="font-size:32px; text-align:center; font-weight:700; font-family:&quot;Futura&quot;, sans-serif; color:#f3b624; background-color:transparent; text-align:center">
            <p>Bienen-News abonnieren</p>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-form-block" style="font-size:16px; text-align:center; font-family:&quot;Helvetica&quot;, sans-serif; color:#2b2626; background-color:transparent; text-align:center">
            <div class="sib-text-form-block">
              <p>Erhalte 4-6 Mal pro Jahr News über die TRACHTGOLD Imkerei und die BürgerBienenWerkstatt.</p>
            </div>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-input sib-form-block">
            <div class="form__entry entry_block">
              <div class="form__label-row ">

                <div class="entry__field">
                  <input class="input " type="text" id="EMAIL" name="EMAIL" autocomplete="off" placeholder="EMAIL" data-required="true" required="">
                </div>
              </div>

              <label class="entry__error entry__error--primary" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;">
              </label>
            </div>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-optin sib-form-block">
            <div class="form__entry entry_mcq">
              <div class="form__label-row ">
                <div class="entry__choice" style="">
                  <label>
                    <input type="checkbox" class="input_replaced" value="1" id="OPT_IN" name="OPT_IN">
                    <span class="checkbox checkbox_tick_positive" style="margin-left:"></span><span style="font-size:12px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#3C4858; background-color:transparent;"><p>Ich möchte Ihren Newsletter erhalten und akzeptiere die <a href="https://trachtgold.de/impressum-datenschutz.html#content7-2n" target="_blank">Datenschutzbestimungen</a>.</p></span> </label>
                </div>
              </div>
              <label class="entry__error entry__error--primary" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;">
              </label>
              <label class="entry__specification" style="font-size:12px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#8390A4; text-align:left">
                Der Newsletter kann jederzeit über einen Link in abbestellt werden.
              </label>
            </div>
          </div>
        </div>
        <div style="padding: 8px 0;">
          <div class="sib-form-block" style="text-align: center">
            <button class="sib-form-block__button sib-form-block__button-with-loader" style="font-size:16px; text-align:center; font-weight:700; font-family:&quot;Futura&quot;, sans-serif; color:#FFFFFF; background-color:#f3b624; border-radius:3px; border-width:0px;" form="sib-form" type="submit">
              <svg class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon" viewBox="0 0 512 512">
                <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"></path>
              </svg>
              ABONNIEREN
            </button>
          </div>
        </div>

        <input type="text" name="email_address_check" value="" class="input--hidden">
        <input type="hidden" name="locale" value="de">
      </form>
    </div>
  </div>
</div>
<!-- END - We recommend to place the below code where you want the form in your website html  -->

Moin,

also - der Code von dem Newsletter ist natürlich restlos falsch eingebunden - ich dachte aber es geht mal zunächst um die Mobirise-Formulare hier:

https://trachtgold.de/kontakt.html

Es reicht auch bei Formularen grundsätzlich ein Häkchen, zur Bestätigung, dass man den Datenschutzbedingungen zustimmt, so wie es bei der Anmeldung zum "Brevo" Newsletter auch bereits gemacht wurde. Da braucht man keine "Option-in-out" Lösung. Die kann man zur Cookie-Zustimmung verwenden und dafür verwendet Daniela ja schon den Cookie-Consent "CookieBot".

Man muss bei einem Newsletter allerdings auch die Option haben sich ebenso einfach wieder von diesem abmelden zu können und auch in seiner Datenschutzerklärung ganz genau auf die Verwendung der Daten vom Newsletter eingehen.

@Andy - ich glaube Ela versucht ohnehin noch ohne den "Code Editor" klar zu kommen, das wird allerdings nicht klappen.

... und auch ein Iframe sollte immer nur eine Notlösung sein. Es ist nie gut Seiten geframt darzustellen.

Was auch ganz schlimm ist ist dieses falsche META-Tag:

Falsches Meta-Tag hat geschrieben:
<meta name="description" content="Bienen sind Wunderwesen der Natur. Als gesamter Organismus funktionieren sie als Einheit und werden daher auch als "Der Bien" bezeichnet. >> Hier gibts spannende Fakten zur Honigbiene! <<">

Das ist mit das wichtigste META-Tag aber restlos falsch und wird so von den Suchmaschinen ignoriert.

Innerhalb der äußeren "Hochstriche" dürfen keine weiteren Hochstriche sein und auch keinerlei spitze Klammern. Das ist falscher HTML-Syntax. Außerdem sollte das "description" Tag nicht mehr als 155 Zeichen (mit Leerzeichen) enthalten. Du hast 187. Ansonsten wird es von Google nicht verwendet.

Ela, bitte teile uns doch zunächst mal mit, um was es Dir ganz genau geht.

Was soll das Formular ganz genau machen? Normalerweise wird ein Formular lediglich als Ersatz einer einfachen E-Mail verwendet. Zumindest ich habe noch nicht genau verstanden, was Du erreichen willst.

Was meinst Du genau, wenn Du ständig von einem "CRM" (Customer-Relationship-Management) Formular sprichst? Welche Kundenpflege soll denn mit Deinem Formular betrieben werden?

... oder meinst Du, wenn Du von einem "Formular" sprichst, damit jetzt immer nur diese Anmeldung zum Newsletter?

Ela_51503 hat geschrieben: Di 2. Jan 2024, 16:40 Ich habe auf einer Testseite mal ein Beispiel hochgeladen: https://trachtgold.de/test.html

Auf der Startseite sieht man unten auch eins (von Mobi) welches in einem Abschnitt mit farbigem Hintergrund und breiter dargestellt wird. So in der Art möchte ich das von Brevo auch.

Die Blöcke von Mobirise, auf denen Du ja auch diesen Newsletter einbaust, können ja immer in der Breite und in der Farbe und Design angepasst werden. Sage uns wie Du Dir das vorstellst. Man könnte z.B. auch die Breite ändern, die jetzt auf 540px begrenzt ist:

Ich habe diese mal auf 80% der Block-Breite gesetzt, dann sieht es so aus:

... oder auch mit anderer Box-Farbe auf schwarzem Hintergrund - musst nur sagen was Du willst.

... oder auch mit kürzerem Eingabefeld:

Inwieweit man eingebundene Plugins, wie diese Anmeldung zum Newsletter von Drittanbietern, anpassen kann, muss man immer individuell gucken.

Diese CSS-Anweisungen stehen bei diesem Newsletter (fast) alle in der Datei:

sib-styles.css

https://sibforms.com/forms/end-form/bui ... styles.css

Normalerweise würde man die zu ändernden CSS-Klassen nun in die Block-CSS vom "Code Editor" von Mobirise übernehmen und damit überschreiben.

Manche Elemente haben aber auch eine direkte (inline) Style-Anweisung wie diese maximale Breite von 540px der Newsletter-Box bei Dir, die ich im Screenshot oben mit den Browser-Werkzeugen auf 80% abgeändert habe:

<div id="sib-container" class="sib-container--large sib-container--vertical" style="text-align:center; background-color:rgba(253,244,227,0.62); max-width:540px; border-radius:3px; border-width:1px; border-color:#C0CCD9; border-style:solid; direction:ltr">

oder auch in dieser Fehler-Meldung:

<div id="error-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;max-width:540px;">

Liebe alle,

wow, das war eine Menge Stoff - danke erstmal für die tolle Hilfsbereitschaft. Ich denke, hier werden verschiedene Themen durcheinander geworfen und ich versuche mal, zu sortieren.
Grundsätzlich: Ich bin aus DSGVO-Gründen mit den Mobirise Standard Formularen unzufrieden und möchte eine generelle, gute Lösung für das TRACHTGOLD Pilotprojekt (was quasi mein Mobirise Sandkasten ist) aber auch für kommende Projekte. Bitte denkt also jetzt nicht nur auf einem Formular rum. Ich möchte das Kontaktformular ablösen, aber auch ein Newsletter Abo (mit opt-out und allem, was dazu gehört, das bietet eben z.B. Brevo von Hause aus) aber zukünftig auch ein Anmeldeformular für die Termine. Falls ich für Kunden später noch weitere Anforderungen haben werde, geht es mir generell um eine Lösung, einen Formularcode in Mobirise einzubinden.

Das Tool, welches mir das Formular liefern soll, ist im Falle von TRACHTGOLD jetzt mal Brevo. Wenn ihr nicht wisst, was das genau ist oder kann: "Brevo, ehemals Sendinblue, ist eine SaaS-Lösung für Beziehungsmarketing. Die Plattform, die hilft, Kundenbeziehungen über E-Mail, SMS, Chat und mehr aufzubauen. Newsletter, Transaktions-E-Mails, Marketing Automation, SMTP – alles mit Brevo."

Solche Systeme, die alle Kundenbeziehungen in einer Plattform vereinen, kann man auch CRM nennen, da ist Salesforce sicherlich marktführend, und Hubspot ist in Sachen Marketing da sehr mächtig. Ich habe Kunden, die das einsetzen, daher möchte ich wissen, wie ich deren Formulare einbetten kann.
Im Grunde spielt das Tool aber gar nicht so eine große Rolle, denn die ganzen DSGVO-Geschichten sind hier abgedeckt, dafür braucht ihr jetzt nicht mitzudenken. Ich bin kein blutiger Marketinganfänger. Ich hab nur keinen blassen Schimmer von CSS, Java und all dem Zeug.

Der Vorteil ist halt, dass man nicht einfach "nur" ein Formular hat, mit den von Tommy genannten offenen Baustellen ("Zudem benötigst du dann auch noch einen Speicher wo diese Bestätigung hinterlegt ist und wo sich der User auch selbstständig wieder austragen können muss. Diese Funktionalität muss ja irgendwo programmiert werden "). Sondern das System dahinter all das regelt. Brevo stellt zudem natürlich die Möglichkeit von Selektionen zur Verfügung, analysiert die Newsletter was Klickraten und Verhalten angeht usw. Auch Automationen und Workflows sind möglich - das alles regelt aber Brevo!!
Hubspot geht noch weiter und trackt jede Kundenaktion - was aber im B2C nicht mit dem Datenschutz konform ist, daher ist das wie gesagt eher als Fingerübung für Kundenprojekte zu sehen. Bleiben wir also bei Brevo.

Der Beitrag von @Andyneu hat an der Stelle in soweit geholfen dass ich nun weiß, dass ich den Brevo Code nicht einfach in den HTML Block kleben kann. Wie gesagt, da habe ich echt keine Ahnung von. In anderen Baukästen kann man den zur Verfügung gestellten Code einfach copy&pasten und dann passt der sich dem Design der Seite an. Schon Dutzend Male gemacht. Wobei das Newsletter-Abo Formular ja jetzt nicht grundlegend falsch ist, nur die Breite passt halt nicht. Und da kommt @Tommy und zeigt mir in seinem Beitrag, dass es offenbar ja doch mit wenigen Handgriffen geht, die Optik anzupassen. Und das verwirrt mich jetzt: Ist denn nun der Code falsch eingebunden wir Andy sagt - oder nicht?

Generell habe ich die Bezahlversion - sonst könnte ich den HTML-Block ja gar nicht nutzen, oder?

Den Hinweis auf den falschen Meta-Tag nehme ich dankend auf. Ein paar Pixel zu breit bringt Google aber auch nicht um. Das wird dann ja nicht "gar nicht" gezeigt sondern allenfalls abgeschnitten. Im Großen und ganzen halte ich die empfohlene Pixelbreite ein, in dem konkreten Fall schaue ich mir das nochmal an. Das mit den spitzen Klammern wusste ich tatsächlich nicht.

Konkret - um mal beim Newsletter als BEISPIEL zu bleiben, sind für mich jetzt 2 Fragen offen:
Ist die Einbindung wirklich wie Tommy sagt, nicht korrekt "Aber dein Einbau des Codes von Brevo ist nicht ganz Ok. Dazu im nächsten Beitrag mehr."? Was genau bewirkt die unkorrekte Einbindung? Optisch sieht jedenfalls Tommys Lösung mit einer Breite von 80% und einer anderen Block-Hintergrundfarbe gut aus. Da möchte ich nur wissen, wie man das macht. Wenn ich diese beiden Punkte verstanden habe, sollte ich mir bei weiteren Formularen ja gut selbst helfen können.

Ist das jetzt klarer geworden?
Kann das wirklich sein, dass niemand mit Mobirise und Marketing-Automation arbeitet? Gibts doch gar nicht...!

Nochmal DANKE - ich habe noch ein weiteres Thema, dazu mache ich aber einen neuen Fred auf.

Moin,

also grundsätzlich ist es so wie Andy das beschrieben hat korrekt.

Du kannst es aber auch so lassen und alles in den Block rein packen - wenn es Dich nicht stört und Leute wie wir in den Quelltext gucken und meckern

Falsch ist das in dem Sinne nicht - das geht so.

Ich kenne jetzt die Anwendungen von "Brevo" überhaupt nicht, denn ich betreibe ja meine Mobirise-Tutorial-Seiten als reines Hobby und verwende eben möglichst auch alles von Mobirise.

Du müsstest also dann in jedem Fall einzeln fragen, wenn Du Hilfe zum Style (CSS) benötigst.

... so wie mit meinen 80% - die Stelle solltest Du doch in dem verwendeten Code, den Du in den Block kopiert hast, finden und ändern können. Versuche das mal ...

Grundsätzlich stehe ich auch nicht so messerscharf auf solche Anwendungen, wie jene von Brevo. Ich traue diesen ganzen Drittanbietern nicht wirklich und man weiß ja auch, dass da mit den Daten der Benutzer viel Schindluder getrieben wird. Sei da auch ein wenig vorsichtig.

... solche Automatisierungen sollte man möglichst vermeiden, wenn man diese nicht selbst programmiert hat und vor allen Dingen wenn Verbindungen zu den Servern der Anbieter bestehen. Dadurch können immer Daten illegal abgegriffen werden.

Was die DSGVO-Bestimmungen betrifft, solltest Du eigentlich mit der Anwendung "CookieBot" restlos abgedeckt sein und natürlich einer guten Datenschutzerklärung (habe Deine noch nicht gelesen).

Lies auch das mal aufmerksam durch:

https://www.e-recht24.de/dsg/13158-brevo.html

Deine Datenschutzerklärung muss bei Verwendung von "Brevo" meiner Ansicht nach auch von Grund auf anderes geschrieben werden.

... unter anderen steht dort auch:

rech24 hat geschrieben:

Vertrag zur Auftragsverarbeitung abschließen

Geben Unternehmen Kundendaten an Dritte weiter, um diese weisungsgebunden verarbeiten zu lassen, müssen sie mit den Dritten einen Vertrag zur Auftragsverarbeitung (AV-Vertrag) abschließen. Diese Pflicht ergibt sich aus Art. 28 DSGVO. Brevo kann auf alle über die Software erhobenen oder in der Software angelegten Userdaten zugreifen. Auf diese Weise geben Unternehmen Nutzerdaten an einen Dritten weiter. Sie müssen mit Brevo daher einen AV-Vertrag schließen. Das können sie in ihrem Account unter „Rechtsdokumente“ vornehmen.

Dabei sollten sie darauf achten, dass der Vertrag anspricht,

welche Userdaten Brevo speichert,
wie lange Brevo die Daten speichert,
warum und wie Brevo die Daten verarbeitet und
welche Rechte und Pflichten die Verantwortlichen haben.

Hi Tommy,

also ich denke einfach, dass wir da aus "religiösen" Gründen nicht zusammenkommen. Ich habe zwar schon ein Augenmerk auf DGSVO, schließe mich sogar im Zweifel mit einem Datenschützer kurz. Wenn ein Tool aber "anerkannt" vom Datenschutz ist, reicht mir das. Es kann immer alles und überall passieren, mich kann auch der Schlag treffen und ich ertrinke in der Pfütze aber als Marketingtante habe ich gefühlte 700 Fremdanbieter-Tools im Einsatz. Das ist eben so in der Welt der Automationen, wenn man sich schnell und leicht bedienen will und nicht alles selbst coden kann oder will.

Meine Datenschutzerklärung ist natürlich noch nicht angepasst, denn ich experimentiere ja noch freudig. :-) Aber danke für den Hinweis, das muss ich dann machen, das stimmt.

Was die "richtige Stelle" im Brevo-Code angeht, so nehme ich mal an, dass es dieser Bereich ist?

<div id="sib-form-container" class="sib-form-container">
<div id="error-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;max-width:540px;">

und/oder dieser:

<div id="sib-container" class="sib-container--large sib-container--vertical" style="text-align:center; background-color:rgba(253,244,227,0.62); max-width:540px; border-radius:3px; border-width:1px; border-color:#C0CCD9; border-style:solid; direction:ltr">

und/oder dieser:

<div id="success-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#085229; background-color:#e7faf0; border-radius:3px; border-color:#13ce66;max-width:540px;">

Ich weiß nicht, was die drei machen, wie gesagt, gefährliches Halbwissen. :-)

LG, Ela

das ist weder gefährlich noch ist es Halbwissen. Das nennt man "CSS"

Ja genau diese Stellen. Schreibe da anstelle der 540px zum Beispiel 80% hin und gut ist. Gucke dann auch ob es am Handy stimmt.

... ich muss jetzt erst mal Töchterchen vom Airport hier in Berlin abholen. Das ist eine kleine Reise von 2 Stunden

Sie kommt aus Miami zurück ...

Hallo Andy,
ich versuche das grade nachzubauen und hänge hier:

Andyneu hat geschrieben: Mi 3. Jan 2024, 00:24 Nehmen wir mal deinen eingebundenen Quellcode auseinander.
Du hast zum einen eine Referenzierung auf eine CSS-Datei:

Code: Alles auswählen

<link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css">

Diese gehört in den Headbereich deiner Webseite. In Mobirise trägst du diesen Codeabschnitt hier ein:
Head-Einträge_inMobirise.JPG
Und diesen hier:
Teil2:

Code: Alles auswählen

<style>
  @font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }
</style>

Diese CSS Anweisungen trägst du in den CSS-Editor von Mobirise ein. Allerdings ohne die Style-tags <style></style>.
Also nur das hier:

Code: Alles auswählen

@font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

So kommst du zum HTML und CSS Editor in Mobirise:

Mir ist nicht klar, wo ich den Code hin kopieren muss, ins CSS (rechts) aber wohin genau?

Ooh wow. Dann fröhliches Wiedersehen und Danke erstmal. :-)

Tommy Herrmann hat geschrieben: Mi 3. Jan 2024, 09:41
... ich muss jetzt erst mal Töchterchen vom Airport hier in Berlin abholen. Das ist eine kleine Reise von 2 Stunden Sie kommt aus Miami zurück ...

Alles was Andy schreibt, bezieht sich auf die kostenpflichtige Erweiterung "Code Editor" von Mobirise.

https://www.mobirise-tutorials.com/Code-Editor.html

Ja weiß ich. Hab ich. Sagte ich schon mehrfach. Ich weiß dennoch nicht, wo ich dann im CSS rumschreiben soll.

Beispiel:

Du wolltest die class="sib-form-block" ändern:

Code: Alles auswählen

.sib-form-block {
  padding: 0 16px;
  word-wrap: break-word;
  outline: none;
}

.... und noch die Farbe vom Text in der Newsletter-Box in blau ändern. Dann könntest Du noch die Farbe "color" z.B. im "CSS-Editor" vom Mobirise-Block zu der Newsletter-Box hinzufügen:

Code: Alles auswählen

.sib-form-block {
   color: blue !important;
}

Du klickst also auf des Symbol:

</>

vom "Code Editor" und schreibst dann diese CSS-Anweisung hinzu.

... noch zum Verständnis: Dieser Zusatz-Befehl:

!important

heißt wichtig und wird normalerweise nicht gebraucht, es sei denn diese CSS wurde bereits per "default" als wichtig definiert, dann kann sie auch nur mit "wichtig" wieder überschrieben werden.

Der "CSS Editor" ist der rechte Bereich vom "Code Editor". Wie hieß es letzte Woche bei dem Film "Die Zehn Gebote"

so steht es geschrieben so soll es geschehen

... das nur aus "religiösen" Gründen

An welcher Stelle Du da CSS-Anweisungen in den Bereich "CSS Editor" kopierst ist vollkommen egal.

Andyneu hat geschrieben: Di 2. Jan 2024, 23:29 Hallo Ela,
auch von mir herzlich willkommen hier.
Ich glaube dir fehlt nicht nur die CSS um das Formular optisch so dazustellen wie du es dir vorstellst, sondern auch die Funktionalität dahinter. Du hast erwähnt das du z.B. ein Anmeldeformular für einen Newsletter erstellen möchtest und dafür ja laut DSGVO die Double-Opt-in Regel brauchst. Das must du dann ja auch als Funktion hinter dem Formular haben. Zudem benötigst du dann auch noch einen Speicher wo diese Bestätigung hinterlegt ist und wo sich der User auch selbstständig wieder austragen können muss.
Diese Funktionalität muss ja irgendwo programmiert werden und dafür nutzt man in der Regel die Prgrammiersprachen PHP und JavaScript. Beides ist in Mobirise nicht mit inbegriffen. Deshalb werden dir hier Möglichkeiten von 3 Anbietern vorgeschlagen die solche Tools bereits umgesetzt haben und über einen Generator anbieten wie z.B. der von Werner Zenk.
In Mobirise werden nur der HTML Code und die Optik (CSS) generiert keinerlei Funktionen wie du sie zusätzlich brauchst.

Ergänzung:
Ich habe gerade an deinem Bsp. gesehen, dass du die Funktionalität per JavaScript von Brevo bekommst.
Aber dein Einbau des Codes von Brevo ist nicht ganz Ok. Dazu im nächsten Beitrag mehr.

Lieber Andy,
habe alles brav so gemacht: https://www.trachtgold.de/test Aber es läuft leider nicht.
Vielleicht eine Frage: Die Tags, die in Header und Body sollen, muss ich die in die Seite bauen, wo das Formular eingebettet wird, oder in die Startseite? Das war mir jetzt nicht ganz klar. Wärst du so lieb und schaust nochmal, was ich falsch gemacht habe? Danke dir.

Mobirise-Tutorials.com

Anpassung von eingebetteten HTML Formularen

Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen

Re: Anpassung von eingebetteten HTML Formularen