Formular Workshop
Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
URL Parameter in Formularfelder übergeben
<script>
Vor einiger Zeit hatte ein Onlex Nutzer gefragt, ob man mit JavaScript eine Funktion schreiben kann, dass man per Link Formularfelder im Voraus ausfüllen kann.
Sprich: Übergabe von Parametern aus der Adresszeile (URL Parameter) in die Formularfelder.
Hier ein Beispiel eines Formulars mit solch einer Funktion inkl. einem Link zur Demonstration:
URL Parameter in Formularfelder übergeben (Link zur Demonstration)
Quelltext-Auszug (
head-Bereich):
<script language="JavaScript">
<!--
function getUrlParameter(par) {
var value='';
var UrlParameter = window.location.search;
if(UrlParameter != "") {
var i = UrlParameter.indexOf(par+"=");
if(i >= 0) {
i = i+par.length+1;
var k = UrlParameter.indexOf("&", i);
if(k < 0) {
k = UrlParameter.length;
}
value = UrlParameter.substring(i, k);
for(i=0; i<value.length; i++) {
if(value.charAt(i) == '+') {
value=value.substring(0, i)+" "+value.substring(i+1,value.length);
}
}
value=unescape(value);
}
}
return value;
}
function init() {
var name = getUrlParameter("name");
document.Kontakt.name.value = name;
var user = getUrlParameter("user");
document.Kontakt.user.value = user;
var email = getUrlParameter("email");
document.Kontakt.eMail.value = email;
var url = getUrlParameter("website");
document.Kontakt.URL.value = url;
}
//-->
</script>
Quelltext-Auszug (
body-Tag):
<body onload="init()">
Quelltext-Auszug (
body-Bereich):(Beachte bitte, dass bei einer Kopie des Quelltextes der Benutzername (hier rot und kursiv dargestellt) geändert werden muss.)
<form action="https://www.onlex.de/_formmailer.php4?username=formws" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" name="Kontakt" onsubmit="window.open('about:blank','bestaetigung', 'width=350,height=250,left=250,top=250');" target="bestaetigung">
<input type="hidden" name="Formular" value="JavaScript-Ecke">
Eingabefeld:<br>
<input type="text" name="eingabefeld" size="30"<br>
Passwort- / Spamschutz: Bitte gib <i>trowssap</i> ein<br>
<input type="password" name="onlex_password" size="30" maxlength="15"><br>
<input type="submit" name="Senden" value="Daten absenden">
</form>
Im obigen Beispiel wird nach den Parametern "name", "user", "email" und "website" in der Adresszeile gesucht.
Dabei kann die Adresse wie folgt aussehen:
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein eigener Name&user=Dein Onlex Benutzername&email=Deine Mail-Adresse mit @&website=http://www.formws.onlex.deNach der eigentlichen Adresse (
url-parameter-in-formularfelder-uebergeben.html) folgt ein ?. Hiernach folgen die Parameter, die jeweils mit einem & voneinandern getrennt sind.Wenn du eigene Anpassungen vornehmen möchtest, dann brauchst du lediglich Änderungen in der Funktion
init() vornehmen.Wichtig ist, dass du auf Gross- und Kleinschreibung achtest, insbesondere wenn die Formularfelder benannt werden sollen, wo der Parameter eingetragen werden soll. Sonst funktioniert das Ganze leider nicht.
Beispiel:
var url = getUrlParameter("website");
document.Kontakt.URL.value = url;
Die Variable
url wird eine Zeile weiter eingesetzt um den Wert, der im Parameter website erscheint, in das Formularfeld name="URL" einzusetzen.Wichtiger Hinweis bei Nutzung von URL Parameter in Links in eMails:
Werden URLs / Internet Adressen in eMails geschrieben, dann werden diese i.d.R. korrekt vom eMail-Programm in funktionierende klickbare Links umgewandelt.
Wenn man dann z.B. den Link
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein eigener Name in einer eMail geschrieben hat, wird diese Adresse nicht komplett als funktionierenden klickbaren Link umgewandelt:http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein eigener NameDies wird vom eMail-Programm korrekt gemacht, da ein Leerzeichen nach
Dein erscheint. Die folgenden Zeichen werden ignoriert bzw. nicht zum Link hinzugefügt.Wenn man diese Problematik vermeiden möchte, dann muss man die URL codieren / Zeichen maskieren. So wird die Zeichenkette nicht unterbrochen.
Zeichen müssen dann in eine zweistellige Hexadezimalzahl mit einem voran geschriebenen
% umgewandelt werden. Für ein Leerzeichen z.B. muss %20 geschrieben werden. Ebenfalls müssen Sonderzeichen wie Buchstaben mit Umlaute umgewandelt werden, da diese auch von Browsern nicht korrekt interpretiert werden.Einen leicht zu nutzenden URL Encoder / Decoder gibt es auf www.url-encoder.de.
Weitere Informationen zur Zeichenkodierung kann man in der SelfHTML im gleichnamigen Kapitel finden. Eine ASCII Tabelle ist ebenfalls verfügbar, wo man manuell Zeichen codieren kann.
Der codierte Link könnte dann so aussehen:
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein%20eigener%20NameWann kann so etwas passieren?
Bei einem Versand von Newslettern! Viele Newsletter Programme bieten mittlerweile die Möglichkeit personalisierte eMails zu schreiben. Hierzu werden Variablen aus einer Tabelle genommen, wie z.B. Vorname, Nachname, eMail-Adresse usw. (Die Liste der Variablen kann beliebig lang sein, je nach Bedrüfnis des Absenders)
In jedem Newsletter muss ein Link zum Abmelden eines Newsletters stehen. Dieser Link kann dann mit Variablen personalisiert sein, so dass der Link in etwa so aussehen könnte:
http://www.deine-website.de/newsletter-abmelden.html?name={Vorname} {NAME}&eMail={eMail}Wenn dieser Link dann als Klartext geschrieben wird, dann wird sich der Empfänger nicht per Klick abmelden können, da er nur folgendes zu lesen bekommt:
http://www.deine-website.de/newsletter-abmelden.html?name={Vorname} {NAME}&eMail={eMail}Hier wäre ein Hinweis nötig, dass bei fehlerhaften Link die komplette Adresse kopiert werden und in die Adresszeile des Browser eingefügt werden muss.
Alternativ kann die Adresse auch in ein Link eingebunden werden, wenn der Newsletter als HTML Newsletter verschickt wird:
<a href="http://www.deine-website.de/newsletter-abmelden.html?name={Vorname} {NAME}&eMail={eMail}">Newsletter abmelden</a>So können u.U. auch Sonderzeichen genutzt werden ohne etwas kodieren zu müssen:
url-parameter-in-formularfelder-uebergeben.html?name=Déin éigénér Nämé&user=Déin Önléx Bénützérnämé&email=mail@provider.tld&website=http://www.münchen.de↑ zum Seitenanfang ↑