Khan: Newsletter in Webseite einbinden

Hi Leute,

ich möchte einen Newsletter bauen, dazu sammel ich Email Adressen von Besuchern die die Webseite betreten und ihre Email Adresse dort eingeben. Mir würde es reichen, ein angepasstes Kontaktformular zu haben, halt ohne Name und Nachricht, sondern das einzige Feld ist das um die Email Adresse einzugeben, gleichzeitig mit Funktion zur Verifizierung der richtigen Eingabe der Email-Adresse. Die Email kommt über den PHP mailer bei mir an und ich bearbeite sie weiter.

Das Problem ist folgendes, alle mailer PHP Files die ich gefunden habe, funktionieren gleich. Nach dem drücken des SENDEN Buttons, wird auf eine danke.php Seite weitergeleitet. Ich möchte aber keine Weiterleitung, sondern in dem gleichen Bereich des Eingabefeldes, einfach anstatt des Feldes ein Danke-Hinweiss, damit die Page bestehen bleibt. Meine Webseite (gekauftes Template) hat ein Kontaktformular eingebunden, welches so funktioniert wie ich es möchte, also ohne Weiterleitung. Allerdings kann ich dieses Formular kein zweites mal einsetzen, da das Template aus nur einer index.html besteht und scheinbar die zugehörigen Dateien von Kontakt alle auf dieses eine Formular getrimmt sind.

Hat jemand eine Idee wie ich meine Sache verwirklichen kann?

MfG Khan

  1. Aloha ;)

    Hat jemand eine Idee wie ich meine Sache verwirklichen kann?

    Ja - mit JavaScript/AJAX. Dabei wird das Formular bei Klick auf den Absende-Button (der dann nur noch button/button und nicht button/submit sein sollte) per JavaScript ausgelesen und z.B. mittels eines XMLHttpRequest versandt.

    Da im Wiki-Artikel nicht so recht erläutert wird, wie man konkret Daten versenden kann: Die Daten werden der send-Funktion als String übergeben, der String muss natürlich einem bestimmten Format folgen. Eine einfache Möglichkeit wäre beispielsweise die Wahl von

    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    

    Mit diesem content-type kannst du Variablen und Wert mittels = verknüpfen und weitere Variablen mit & anhängen, wie man das aus dem Query-String in der URL kennt, also dann etwa so:

    ajax.send("name=Mein%20Name&mail=Meine%20E-Mail");
    

    wobei du darauf achten solltest, dass sowohl Variablenbezeichner als auch Werte beim Zusammensetzen zu einem String zunächst durch encodeURIComponent() wandern sollten/müssen.

    Gesendet wird das dann ein Dokument ganz analog (oder sogar identisch) zum erwähnten danke.php; mittels onreadystatechange kannst du dann auch deine Danke-Botschaft (oder ggf. eine Fehlermeldung) einblenden.

    Bei Fragen (natürlich zunächst die verlinkten Artikel lesen und dann) einfach nachfragen, ich kenne deinen Kenntnisstand nicht. JavaScript solltest du aber wenigstens einigermaßen können (d.h. ungefähr wissen, was man da wie damit tut), ansonsten empfehle ich dir die entsprechende Sektion des hiesigen Wiki zur Grundlagenlektüre; ohne JavaScript steht dir afaik kein Weg offen, ein Formular im Hintergrund zu versenden.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
    1. @@Camping_RIDER

      Ja - mit JavaScript/AJAX. … Absende-Button (der dann nur noch button/button und nicht button/submit sein sollte)

      Doch! Wenn man „keine Weiterleitung“ als progressive enhancement ansieht:

      Die Funktionnalität ist auch ohne JavaScript/AJAX gegeben – eben mit neuer Seite danke.php. Für Clients, die JavaScript ausführen, kann die UX verbessert werden, indem man das Absenden des Formulars unterbindet und stattdessen den AJAX-Call macht.

      Um die Grundfunktionnalität dabei nicht kaputtzumachen, muss der Absende-Button weiterhin ein solcher sein, also type="submit". Die Unterbindung des Absendens erfolgt im JavaScript: per preventDefault().

      LLAP 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. Das Template ist sowieso schon voll mit JS. Jetzt nochmal JS hinzuzufügen, naja ich weiss ja nicht. Erfahrungsgemäß zeigt sich, daß zuviel JS sich nicht verträgt.

        1. @@K H A N

          Das Template ist sowieso schon voll mit JS. Jetzt nochmal JS hinzuzufügen, naja ich weiss ja nicht. Erfahrungsgemäß zeigt sich, daß zuviel JS sich nicht verträgt.

          Es gibt gute Gründe gegen zu viel JavaScript. „Sich nicht verträgt“ ist kein solcher, sondern ein Zeichen dafür, dass man was falsch macht.

          LLAP 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)
        2. Hallo Kahn,

          Das Template ist sowieso schon voll mit JS. Jetzt nochmal JS hinzuzufügen, naja ich weiss ja nicht. Erfahrungsgemäß zeigt sich, daß zuviel JS sich nicht verträgt.

          Ähem.

          • Twitter.com: 333,8 kb JS, minified und gziped, nur beim Aufruf der Index-Seite.
          • Google.com: 231,2 kb JS, minified und gziped, nur beim Aufruf der Such-Seite.
          • Trello.com: 634,1 kb JS, minified und gziped, nur beim Aufruf der Hauptseite.

          Ich sage nicht, dass man soviel JS braucht. Aber „zuviel JS verträgt sich nicht” ist heutzutage Unsinn. Das galt damals, beim NN4, aber danach nicht mehr. Nutze soviel JS wie nötig und so wenig wie möglich.

          LG,
          CK

        3. Aloha ;)

          Das Template ist sowieso schon voll mit JS. Jetzt nochmal JS hinzuzufügen, naja ich weiss ja nicht.

          Naja, du hast nach einer Möglichkeit gefragt und ich habe dir die einzige genannt, was hast du erwartet? ;)

          Schon wenn du dir über die Problemstellung Gedanken machst (du möchtest, dass sich am Markup der Seite dynamisch etwas verändert - nämlich mindestens, dass das Formular verschwindet und eine Meldung abhängig vom Status der Verarbeitung der Daten angezeigt wird) hätte dir klar sein müssen, dass du dafür nicht ohne JavaScript auskommst.

          Wobei @Gunnar Bittersmann selbstverständlich Recht hat, was den progressive enhancement-Ansatz angeht; ich habe den Aspekt in meinem Posting unerwähnt gelassen (man könnte statt preventDefault - das hatte ich nicht auf dem Schirm, obwohl es sinnvoll ist - auch einfach den type des submit-Button erst per JavaScript ändern) weil ich mich auf die Details der JavaScript-Umsetzung konzentrieren wollte. Die Lösung lässt sich tatsächlich gut als progressive enhancement umsetzen, da man sogar die gleiche danke.php verwenden kann.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
          1. Ok alles klar, was ich zwischenzeitlich gemacht habe ist, ein PHP Kontaktformular erstellt und per iframe in meine bestehende Seite eingefügt. Das iframe läuft zwar, aber das Kontaktformular wird nicht angezeigt. Schein an dieser Seite zu liegen da eine leere HTML Seite mit dem iframe und dem Kontaktformular normal angezeigt wird.

            Hätte jemand eine Idee warum das Kontakt.php in der Seite, welche voll mit JS ist, nicht angezeit wird?

            <iframe src ="kontakt.php" frameborder="1" width="500" height="600"></iframe>

            1. Aloha ;)

              Hätte jemand eine Idee warum das Kontakt.php in der Seite, welche voll mit JS ist, nicht angezeit wird?

              Nicht ohne mehr Informationen (d.h. Onlinebeispiel oder zumindest vollständiger HTML-Quellcode)...

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
              1. Ich glaub ich hab den Fehler, es fehlte eine Datei des Kontaktformulares welche ich nicht hochgeladen habe

                1. Ich glaub ich hab den Fehler, es fehlte eine Datei des Kontaktformulares welche ich nicht hochgeladen habe

                  ES FUNKTIONIERT! SOGAR MIT WEITERLEITUNG ABER INNERHALB DES IFRAMES. Danke an alle, JS wäre mir für jetzt etwas zu hoch!

                  Frohes Neues!

                2. Aloha ;)

                  Ich glaub ich hab den Fehler, es fehlte eine Datei des Kontaktformulares welche ich nicht hochgeladen habe

                  Ja, ich habe gesehen, dass du den Fehler gefixt hast ;) Ich war grad am Drüberschauen und auf einmal gings :P

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                  1. So die Seite steht, noch mal eine Nach drüber schlafen und die letzte Kontrolle machen, danach gehts ab zur Mobilen Seite :)

                    Haut rein Kollegas!

            2. Hallo Khan,

              <iframe src ="kontakt.php" frameborder="1" width="500" height="600"></iframe>

              • Wird die Seite ‚kontakt.php‘ angezeigt, wenn du sie direkt aufrufst?
              • Stimmt der Pfad zur Seite? Im vorliegenden Fall müssten die kontakt- und die aufrufende Seite im selben Verzeichnis liegen

              Bis demnächst
              Matthias

              --
              Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
              1. Die Dateien liegen alle im selben Verzeichnis, siehe selbst:

                Alternativ-Text