HTML5 Formular abschicken und User per Link weiterleiten?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML
28.05.2022, 17:47

Ja, das ist möglich. Allerdings benötigst du neben HTML noch mindestens eine Programmiersprache, die die Logik für die Weiterleitung vorgibt. Die dazugehörige Anwendung könnte also im einfachsten Fall mit JavaScript (browserseitig) implementiert werden oder etwas sicherer gegen Manipulation als Serveranwendung mit PHP / Ruby / JavaScript / o.ä..

Eine Methode wäre es, der URL einen Parameter anzuhängen, der dir im Anschluss verrät, von welcher Seite der Nutzer wohl kam. Du hättest also Linkziele wie diese:

https://www.formularpage.com?source=facebook
https://www.formularpage.com?source=instagram
etc. ...

Ebenso könnte man stattdessen den Referer aus dem Request Header herauslesen.

Beachte, dass beide Wege von außen manipuliert werden können. Ein Nutzer könnte z.B. die URL einfach ohne Parameter aufrufen oder seinem Browser anweisen, den Referer nie mitzugeben. Man könnte nun beide Methode miteinander kombinieren, doch eine Fallbacklösung sollte es so und so geben.

Vorab solltest du entscheiden, wer die Weiterleitung übernimmt. Es gibt viele verschiedene Wege, wie so etwas ablaufen kann. Zum Beispiel:

  • Formular wird von Serveranwendung verarbeitet, diese leitet im Anschluss auch weiter.
  • JavaScript schickt Formulardaten an Adresse X (DOI-Prozess) und leitet im Anschluss weiter.
  • Vielleicht kann der DOI-Prozess die Weiterleitung übernehmen. Dann müsstest du dich aber im Voraus erst einmal schlau machen, wie genau die Übergabe der Information aussehen muss.

Ich zeige im Folgenden nur zwei einfach gehaltene Lösungswege (mit JavaScript und PHP), um die Daten aus dem Request herauszuholen und wie eine Weiterleitung aussehen kann.

Via JavaScript:

<form id="form" method="post">
  <!-- fields and button ... -->
</form>
<script>
  const form = document.getElementById("form");
  form.addEventListener("submit", evt => {
    evt.preventDefault();

    const formData = new URLSearchParams(new FormData(form));
    fetch("DOI URL ...", { method: "post", body: formData })
      .then(_ => {
        const urlParameters = new URLSearchParams(location.search);
        const source = urlParameters.get("source");
        const referer = document.referrer.toLowerCase();

        if (source === "facebook" || referer.includes("facebook")) {
          location.href = "URL 1 ...";
        }
        else if (source === "instagram" || referer.includes("instagram")) {
          location.href = "URL 2 ...";
        }
        else {
          location.href = "Default URL ...";
        }
      });
  });

Bei Klick auf den Button wird das submit-Event ausgelöst, woraufhin ein Handler aufgerufen wird, den man zuvor registriert. Die Formulardaten werden zunächst gebündelt via Fetch API an den DOI-Prozess geschickt. Danach werden Referer und URL-Parameter aus der URL gelesen und geprüft, wohin geleitet werden soll. Die Weiterleitung selbst wird durch Setzen des href-Properties vom window.location-Objekt getriggert.

Via PHP:

<?php
  $targetUrl = "Fallback URL ... ";

  if (isset($_POST['form'])) {
    $formData = array(
      'fieldname1' => $_POST['fieldname1'],
      'fieldname2' => $_POST['fieldname2'],
      /* further form fields ... */
    );
    $curl = curl_init('DOI URL ...');
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($formData));
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($curl);
    curl_close($curl);

    $source = $_POST['source'];
    $referer = $_POST['referer'];

    if ($source === 'facebook' || stripos($referer, 'facebook') !== false) {
      $targetUrl = "URL 1 ...";
    }
    else if ($source === 'instagram' || stripos($referer, 'instagram') !== false) {
      $targetUrl = "URL 2 ...";
    }

    header('Location: ' . $targetUrl);
    exit;
  }
  else {
    $referer = $_SERVER['HTTP_REFERER'];
    $source = isset($_POST['source']) ? $_POST['source'] : '';
  }
?>
<!-- doctype, etc. -->
<form method="post">
  <!-- fields ... -->
  <input name="source" type="hidden" value="<?= $source ?>">
  <input name="referer" type="hidden" value="<?= $referer ?>">
  <button name="form">Send</button>
</form>

In diesem Fall wird zunächst geschaut, ob das Formular bereits verschickt wurde oder nicht. Wenn nicht, werden Referer und URL-Parameter ermittelt und als Werte in versteckte Felder des Formulars geschrieben.

Nach Klick auf das Formular wird erst der DOI-Prozess via cURL-Request getriggert (im $formData-Array müssen erst alle Formularfelder mit Wert aufgelistet werden), danach das neue Ziel ermittelt. Die Weiterleitung erfolgt durch Setzen des Location-Felds im Request Header.
NackterGerd
28.05.2022, 00:04

Ein Formular einer Website von einer anderen Seite aus ausfüllen, geht normalerweise nicht.

Du könntest nur einen Link auf das Formular machen.

Dem Formular müsstest du dann Parameter mitgeben die dir verraten von wo der Link war.

Allerdings müsste das Formular dann PHP und nicht HTML sein

Den Parameter schickste du dann incl den Eingaben zur Auswertung.

Diese PHP Auswertung kann dann wiederum auf andere Seite weiterleiten.

Wozu du allerdings die eigentlichen Formular Eingaben benötigst ist mit nicht klar
Stepcke 
Fragesteller
 28.05.2022, 00:22

Das Formular führt zu einem Datenschutz konformen Double-Opt-In Prozess für Newsletter und die Weiterleitung zur Verkaufsseite. Ich möchte so meine Eintragungsquote erhöhen.

Ich möchte kein Formular von einer anderen Seite ausfüllen lassen. Ich möchte mit meinem (Angebots-)Link nur den Umweg über das Formular machen. Freiwillige Eintragung und dann Weiterleitung auf die Angebotsseite.

0
CharmanterJunge
27.05.2022, 23:55

das ist nicht so leicht, du brauchst dafür schon mäßige php kentnisse
NackterGerd  28.05.2022, 00:05

Nur einfache PHP Kenntnisse bzgl Formular reichen hier

0