Hilfe & Wissen Wie erstelle ich ein Anmeldeformular wo ich zwischen einzelnen Listen wählen kann?

Wie erstelle ich ein Anmeldeformular wo ich zwischen einzelnen Listen wählen kann?

Erstellen sie ein Formular wie in Wie erstelle ich ein Anmeldeformular zur Einbindung in meine Website? beschrieben.

Das Formular sieht dann in etwas so aus:

<html>
  <head>
    <title></title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>    
  </head>
  <body>
    <script src="//nextgen.kajomigenerator.de/static/js/app_kajomi_helper.js?v=3.1"></script>    
    <script>
          var signature = [[raw kjm.json_dumps(kjm.signature('POST', '/signature/users', 'listnum=1&x_kjm_fix=listnum&email=')) ]];
          var webform = new KajomiWebform({"primaryColor":"#D40000","fontSize":"14px","fontFamily":"Roboto","listnum":"1","type":"subscribe"});
          webform.addSignature(signature);
          webform.push({"mapping": "email", "label": "", "placeholder": "E-Mail", "type": "input", "value": "", "required": "required", "checked": "unchecked", "guid": "ge4f3", "validation": [{"regex": "^[^@]+@[^@]+.[^@]+$"}]});
          webform.push({"mapping": "", "label": "", "placeholder": "", "type": "button", "value": "Subscribe", "required": "optional", "checked": "unchecked", "guid": "gd7e6", "validation": [{"regex": "^.{1,}$"}]});
          webform.addValue('email', [[raw kjm.json_dumps(%email%) ]]);
          var translate = webform.trans.translation
          webform.show();      
    </script>
  </body>
</html>

Wollen wir nun ein Select-Feld hinzufügen um zwischen Liste 1 und 2 zu wechseln brauchen wir nun mehrere Signaturen wir fügen folgenden Code unterhalbe von var signature ein

    var signature_2 = [[raw kjm.json_dumps(kjm.signature('POST', '/signature/users', 'listnum=2&x_kjm_fix=listnum&email=')) ]];

Nun fügen wir ein Select Feld hinzu:

    webform.push({"mapping": "", "label": "", "placeholder": "", "type": "select", "value": "-- Bitte Liste auswählen --=;Newsletter-1=1;Newsletter-2=2", "required": "required", "checked": "unchecked", "guid": "ge2b4", "validation": [{"regex": "^.{1,}$"}]})

Nun müssen wir beim Klick auf den Button einfach nur je die Signatur und die Listnum austauschen, je nachdem welche Liste ausgewählt wurde. Der Button hat die guid:gd7e6

    var buttonClick = document.getElementById('gd7e6').onclick;
    document.getElementById('gd7e6').onclick = (event) => {
      // nun die Liste auslesen mittels der guid die oben gesetzt wurde
      var listnum = document.getElementById('ge2b4').querySelector('select').value;
      if (listnum == 1) {
        // just call addSignatur
        webform.addSignature(signature);
      } else if (listnum == 2) {
        webform.addSignature(signature_2);
      }
      return buttonClick(event)
    }

Das ganze sieht nun wie folgt aus:

<html>
  <head>
    <title></title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>    
  </head>
  <body>
    <script src="//nextgen.kajomigenerator.de/static/js/app_kajomi_helper.js?v=3.1"></script>    
    <script>
          var signature = [[raw kjm.json_dumps(kjm.signature('POST', '/signature/users', 'listnum=1&x_kjm_fix=listnum&email=')) ]];
          var signature_2 = [[raw kjm.json_dumps(kjm.signature('POST', '/signature/users', 'listnum=2&x_kjm_fix=listnum&email=')) ]];  
          var webform = new KajomiWebform({"primaryColor":"#D40000","fontSize":"14px","fontFamily":"Roboto","listnum":"1","type":"subscribe"});
          webform.addSignature(signature);
          webform.push({"mapping": "email", "label": "", "placeholder": "E-Mail", "type": "input", "value": "", "required": "required", "checked": "unchecked", "guid": "ge4f3", "validation": [{"regex": "^[^@]+@[^@]+.[^@]+$"}]});
          webform.push({"mapping": "", "label": "", "placeholder": "", "type": "select", "value": "-- Bitte Liste auswählen --=;Newsletter-1=1;Newsletter-2=2", "required": "required", "checked": "unchecked", "guid": "ge2b4", "validation": [{"regex": "^.{1,}$"}]})
          webform.push({"mapping": "", "label": "", "placeholder": "", "type": "button", "value": "Subscribe", "required": "optional", "checked": "unchecked", "guid": "gd7e6", "validation": [{"regex": "^.{1,}$"}]});
          webform.addValue('email', [[raw kjm.json_dumps(%email%) ]]);
          var translate = webform.trans.translation
          webform.show(); 

          var buttonClick = document.getElementById('gd7e6').onclick;
          document.getElementById('gd7e6').onclick = (event) => {
            // nun die Liste auslesen
            var listnum = document.getElementById('ge2b4').querySelector('select').value;
            if (listnum == 1) {
              // just call addSignatur
              webform.addSignature(signature);
            } else if (listnum == 2) {
              webform.addSignature(signature_2);
            }
            return buttonClick(event)
          }
    </script>
  </body>
</html>

Um das ganze einzubinden siehe hier unter Formular in Ihre Website einbinden: Wie erstelle ich ein Anmeldeformular zur Einbindung in meine Website?

Hilfe & Wissen Wie erstelle ich ein Anmeldeformular wo ich zwischen einzelnen Listen wählen kann?

Wie erstelle ich ein Anmeldeformular wo ich zwischen einzelnen Listen wählen kann?

Ähnliche Seiten