{"id":1641,"date":"2021-04-25T20:25:12","date_gmt":"2021-04-25T18:25:12","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1641"},"modified":"2022-07-24T09:46:24","modified_gmt":"2022-07-24T07:46:24","slug":"html-formular-formularfelder-mittels-url-personalisieren","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1641\/html-formular-formularfelder-mittels-url-personalisieren\/","title":{"rendered":"HTML-Formular: Formularfelder mittels URL personalisieren"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/1641\/html-formular-formularfelder-mittels-url-personalisieren\/#PHP_und_GET-Parameter\" >PHP und GET-Parameter<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/1641\/html-formular-formularfelder-mittels-url-personalisieren\/#Formular_vorbereiten\" >Formular vorbereiten<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/1641\/html-formular-formularfelder-mittels-url-personalisieren\/#URL_kuerzen\" >URL k\u00fcrzen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/1641\/html-formular-formularfelder-mittels-url-personalisieren\/#Links_erstellen_mit_Excel\" >Links erstellen mit Excel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/1641\/html-formular-formularfelder-mittels-url-personalisieren\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<p>Formularfelder mit einem Link vorbelegen. So funktioniert es.<\/p>\n<p><!--more--><\/p>\n<p>In diesem Artikel wollen wir uns anschauen, wie wir Formularfelder eines Formulars vorbelegen k\u00f6nnen. Unser Ziel ist es, dass wir einen Link verschicken k\u00f6nnen, mit welchem wir bestimmte Felder dynamisch vorbelegen k\u00f6nnen. Wir erledigen das im Beispiel mit der Software <a href=\"https:\/\/da-software.net\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener\">DA-FormMaker<\/a>, es funktioniert nat\u00fcrlich auch direkt im HTML-Quelltext.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"PHP_und_GET-Parameter\"><\/span>PHP und GET-Parameter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr die Funktion ben\u00f6tigen wir Webspace der PHP unterst\u00fctzt. F\u00fcr die \u00dcbergabe der Parameter in das Formular verwenden wir die URL. Ein Beispiel:<\/p>\n<p>Wir \u00fcbergeben hier zwei Parameter, den Namen und die E-Mail-Adresse.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1642\" src=\"\/wp-content\/uploads\/2021\/04\/form_1.jpg\" alt=\"\" width=\"799\" height=\"405\" srcset=\"\/wp-content\/uploads\/2021\/04\/form_1.jpg 799w, \/wp-content\/uploads\/2021\/04\/form_1-300x152.jpg 300w, \/wp-content\/uploads\/2021\/04\/form_1-768x389.jpg 768w\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" \/><\/p>\n<p>Kopieren wir den Link aus der Adresszeile, sieht er etwas anders aus:<\/p>\n<pre>https:\/\/da-software.net\/autofill\/form.php?email=andy.dunkel@ekiwi.de&amp;name=%C3%84ndy%20Dunkel\r\n<\/pre>\n<p>Dies ist dann auch der Link den wir verwenden. Sonder- und Leerzeichen werden hier kodiert.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Formular_vorbereiten\"><\/span>Formular vorbereiten<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Damit haben wir zwar einen Link, aber die \u00dcbernahme des Werte passiert derzeit noch nicht, diese Funktion m\u00fcssen wir noch hinzuf\u00fcgen. Im DA-FormMaker k\u00f6nnen wir hier einfach den Vorgabewert verwenden. Dort tragen wir z.B. f\u00fcr den Namen folgenden Wert ein:<\/p>\n<pre>&lt;?php if (isset($_GET[\"name\"])) echo $_GET[\"name\"]; ?&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1643\" src=\"\/wp-content\/uploads\/2021\/04\/form_2.jpg\" alt=\"\" width=\"800\" height=\"603\" srcset=\"\/wp-content\/uploads\/2021\/04\/form_2.jpg 800w, \/wp-content\/uploads\/2021\/04\/form_2-300x226.jpg 300w, \/wp-content\/uploads\/2021\/04\/form_2-768x579.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Den Standardwert beim Bearbeiten l\u00f6schen deaktivieren wir. Schauen wir uns den Quelltext genauer an, sehen wir dort den Namen des Parameters &#8222;name&#8220;. Diesen finden wir auch in der URL:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1644\" src=\"\/wp-content\/uploads\/2021\/04\/form_3.jpg\" alt=\"\" width=\"298\" height=\"55\" \/><\/p>\n<p>Das Gleiche wiederholen wir f\u00fcr die anderen Felder. In der URL werden die Parameter mit &#8222;?&#8220; von der Formularadresse getrennt, die einzelnen Parameter untereinander mit &#8222;&amp;&#8220;.<\/p>\n<p>Exportieren wir das Formular sieht unser Quelltext so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1645\" src=\"\/wp-content\/uploads\/2021\/04\/form_4.jpg\" alt=\"\" width=\"600\" height=\"99\" srcset=\"\/wp-content\/uploads\/2021\/04\/form_4.jpg 600w, \/wp-content\/uploads\/2021\/04\/form_4-300x50.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Wer seine Formulare anderweitig erstellt, gibt den Code in das &#8222;value&#8220;-Feld ein. Die Datei muss nun noch von .html nach .php umbenannt werden. Dann wird der Code auch ausgef\u00fchrt.<\/p>\n<p>Fertig! Rufen wir jetzt das Formular mit den Parametern auf, werden diese vorausgef\u00fcllt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"URL_kuerzen\"><\/span>URL k\u00fcrzen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je nach L\u00e4nge der URL ist es sinnvoll diese zu k\u00fcrzen. Hier bieten sich Short-URL-Dienste wie &#8222;<a href=\"https:\/\/bitly.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/bitly.com\/<\/a>&#8220; an. Diese k\u00fcrzen nicht nur die URL sondern verbergen auch erstmal die Parameter. Somit geht beim anklicken oder kopieren des Links auch weniger schief.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Links_erstellen_mit_Excel\"><\/span>Links erstellen mit Excel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Linkerstellung ist manuell nat\u00fcrlich etwas umst\u00e4ndlich. Gerade wenn man viele Links in der Geschichte herumschicken will, kann die Erstellung der Links recht umst\u00e4ndlich sein. Eine m\u00f6gliche L\u00f6sung lautet <a title=\"Excel-Formel einfach per VBA\/Makro in Zelle einf\u00fcgen!\" href=\"https:\/\/ekiwi-blog.de\/24856\/vba-excel-formel-in-zelle-einfuegen\/\" target=\"_blank\" rel=\"noopener\">Excel<\/a>.<\/p>\n<p>Hier ein Beispiel:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1654\" src=\"\/wp-content\/uploads\/2021\/04\/excel_1.png\" alt=\"\" width=\"1036\" height=\"204\" srcset=\"\/wp-content\/uploads\/2021\/04\/excel_1.png 1036w, \/wp-content\/uploads\/2021\/04\/excel_1-300x59.png 300w, \/wp-content\/uploads\/2021\/04\/excel_1-1024x202.png 1024w, \/wp-content\/uploads\/2021\/04\/excel_1-768x151.png 768w\" sizes=\"auto, (max-width: 1036px) 100vw, 1036px\" \/><\/p>\n<p>Wir verwenden die &#8222;Verketten&#8220;-Funktion zum Erstellen der Links und verketten die Basis-URL mit den Feldern und den Werten:<\/p>\n<pre>=VERKETTEN($B$1;$A$3;\"=\";A4;\"&amp;\";$B$3;\"=\";B4)\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1655\" src=\"\/wp-content\/uploads\/2021\/04\/excel_2.png\" alt=\"\" width=\"807\" height=\"206\" srcset=\"\/wp-content\/uploads\/2021\/04\/excel_2.png 807w, \/wp-content\/uploads\/2021\/04\/excel_2-300x77.png 300w, \/wp-content\/uploads\/2021\/04\/excel_2-768x196.png 768w\" sizes=\"auto, (max-width: 807px) 100vw, 807px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr einfache Textfelder ist dies eine schnelle L\u00f6sung. An die Grenzen kommt der Ansatz bei anderen Feldern: Checkbox, Auswahlfeld oder Radio-Buttons. Diese Sachen werden wir in einem anderen Tutorial bearbeiten.<\/p>","protected":false},"excerpt":{"rendered":"<p>Formularfelder mit einem Link vorbelegen. So funktioniert es.<\/p>\n","protected":false},"author":1,"featured_media":57,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[14],"tags":[18,4,31],"class_list":["post-1641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-formular","tag-html","tag-php"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=1641"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1641\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/57"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}