{"id":2348,"date":"2025-06-12T15:51:40","date_gmt":"2025-06-12T13:51:40","guid":{"rendered":"https:\/\/upendo.com\/?post_type=macros_pt&#038;p=2348"},"modified":"2025-06-12T16:09:42","modified_gmt":"2025-06-12T14:09:42","slug":"referrer-informatie","status":"publish","type":"macros_pt","link":"https:\/\/upendo.com\/nl\/macros\/referrer-informatie","title":{"rendered":"Waarde formulierveld"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Deze aangepaste JavaScript-variabele haalt de waarde van een specifiek formulierveld op. Dit kan handig zijn als je interacties van gebruikers met een formulier wilt bijhouden of inzichten wilt verzamelen over de informatie die gebruikers verzenden. <\/p>\n\n<h2 class=\"wp-block-heading\">Usecase<\/h2>\n\n<p class=\"wp-block-paragraph\">Er zijn talloze gebruikssituaties voor het bijhouden van de waarden van formuliervelden. Je wilt bijvoorbeeld bijhouden welke opties een gebruiker selecteert in een dropdown veld op je formulier, of hoe gebruikers omgaan met een formulier met meerdere stappen op je website. Je kunt deze informatie ook gebruiken voor personalisatie, bijvoorbeeld door een aangepast bericht of aanbod weer te geven op basis van de formulierinvoer van een gebruiker.  <\/p>\n\n<h2 class=\"wp-block-heading\">Instructies<\/h2>\n\n<p class=\"wp-block-paragraph\">Dit is een eenvoudig voorbeeld van een aangepaste GTM JavaScript-variabele waarmee de waarde van een invoerveld met een specifieke ID wordt opgehaald.<\/p>\n\n<p class=\"wp-block-paragraph\">Vervang \u201cinput_field_id\u201d door de werkelijke ID van het invoerveld dat je wilt volgen.<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(201, 218, 248, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>functie() {\n var inputField = document.getElementById(\u201cinput_field_id\u201d);\n if (inputField) {\n return inputField.value;\n } else {\n return null;\n }\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">inputField<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">input_field_id<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">inputField<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">inputField<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">null;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">Deze JavaScript-functie haalt het HTML-element met de opgegeven ID op met <code>document.getElementById()<\/code> en geeft vervolgens de waarde van het invoerveld terug. Als er geen element met de opgegeven ID wordt gevonden, retourneert de functie <code>null<\/code>. <\/p>\n\n<p class=\"wp-block-paragraph\">Houd er rekening mee dat deze variabele de waarde van het formulierveld ophaalt op het moment dat de variabele wordt uitgevoerd. Daarom moet je ervoor zorgen dat de variabele wordt uitgevoerd nadat de waarde van het formulierveld is ingesteld. Je kunt de variabele bijvoorbeeld laten starten als het formulier is verzonden.  <\/p>\n\n<p class=\"wp-block-paragraph\">Houd er ook rekening mee dat de ID van elk element op een pagina uniek moet zijn. Als er meerdere elementen zijn met dezelfde ID, zal <code>document.getElementById()<\/code> alleen de eerste teruggeven. <\/p>\n\n<p class=\"wp-block-paragraph\"><em>Is dit niet de macro die je zocht? Bekijk hieronder verwante macro&#8217;s of <a href=\"https:\/\/upendo.com\/contact\">vraag er een aan<\/a>. <\/em><\/p>\n","protected":false},"author":2,"featured_media":0,"template":"","type_macros_pt":[47],"tag_macros_pt":[46],"level_macros_pt":[45],"class_list":["post-2348","macros_pt","type-macros_pt","status-publish","hentry","type_macros_pt-gegevensmanipulatie","tag_macros_pt-array-nl","level_macros_pt-intermediair"],"acf":[],"_links":{"self":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/macros_pt\/2348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/macros_pt"}],"about":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/types\/macros_pt"}],"author":[{"embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/users\/2"}],"wp:attachment":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/media?parent=2348"}],"wp:term":[{"taxonomy":"type_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/type_macros_pt?post=2348"},{"taxonomy":"tag_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/tag_macros_pt?post=2348"},{"taxonomy":"level_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/level_macros_pt?post=2348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}