{"id":2,"date":"2021-07-14T09:55:43","date_gmt":"2021-07-14T09:55:43","guid":{"rendered":"https:\/\/wpdemo.webmyday.app\/?page_id=2"},"modified":"2021-07-14T10:01:27","modified_gmt":"2021-07-14T10:01:27","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/wpdemo.webmyday.app\/","title":{"rendered":"Demo"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull my-full-width-container\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div id=\"leadcatcher-appointment-container\">\n\t<div id=\"leadcatcher-appointment-header\">\n\t\t<h1>Afspraak maken<\/h1>\n\t\t<p>\n\t\t\tWilt u meer weten over uw mogelijkheden?\n\t\t\tPlan dan zelf een vrijblijvende afspraak.\n\t\t<\/p>\n\t<\/div>\n\n\t<hr \/>\n\n\t<form method=\"POST\" id=\"appointment-form\">\n\n\t\t\t<div id=\"leadcatcher-appointment-branch\">\n\t\t\t\t<h2>1. Kies vestiging<\/h2>\n\t\t\t\t<p>Kies een vestiging waar u graag een afspraak wilt maken.<\/p>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<input type=\"hidden\" id=\"selectedBranch\" name=\"branch\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<button id=\"geolocationButton\" style=\"margin-bottom: 2rem;\">Zoek bij u in de buurt<\/button> <img decoding=\"async\" id=\"geoInProgress\" style=\"display: none; height: 48px\" src=\"https:\/\/wpdemo.webmyday.app\/wp-content\/plugins\/wmd-leadcatcher\/public\/img\/loading.svg\" \/>\n\t\t\t\t<div id=\"leadcatcher-map\"><\/div>\n\t\t\t<\/div>\n\n\t\t\t<hr \/>\n\n\t\t\t<div id=\"appointment\">\n\t\t\t\t<h2>2. Plan een afspraak<\/h2>\n\t\t\t\t<p>Selecteer uw voorkeursdatum en -tijdstip <span id=\"selectedBranchDisplay\"><\/span>. Staat deze er niet bij, neem dan contact met ons op. Alle tijden zijn in de Nederlandse tijdzone.<\/p>\n\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t\t<div id=\"date-field\"><\/div>\n\t\t\t\t\t\t<input type=\"hidden\" name=\"date\" id=\"date-content-field\" \/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"form-group time-picker\">\n\t\t\t\t\t<div class=\"input-group mb-2\">\n\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t<span class=\"input-group-text\"><i class=\"ni ni-time-alarm\"><\/i><\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<select id=\"select\" title=\"select\" class=\"custom-select\" name=\"time\" disabled>\n\t\t\t\t\t\t\t<option value=\"\" disabled selected hidden>Selecteer een tijd<\/option>\n\t\t\t\t\t\t<\/select>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t\t<hr \/>\n\n\t\t\t<div id=\"reason\">\n\t\t\t\t<h2>3. Reden afspraak<\/h2>\n\t\t\t\t<p>\n\t\t\t\t\tSelecteer wat de reden is voor uw afspraak. U kunt ook een opmerking plaatsen voor aanvullende informatie.\n\t\t\t\t<\/p>\n\t\t\t\t<div class=\"form-group mb-2\">\n\t\t\t\t\t<div class=\"input-group mb-2\">\n\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t<span class=\"input-group-text\"><i class=\"ni ni-tag\"><\/i><\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<select id=\"select2\" title=\"select\" class=\"custom-select\" name=\"reason\">\n\t\t\t\t\t\t\t<option value=\"\" disabled selected hidden>Selecteer een reden<\/option>\n\t\t\t\t\t\t\t<option value=\"advies\">Advies<\/option>\n\t\t\t\t\t\t\t<option value=\"3dtekening\">Gratis 3D Tekening<\/option>\n\t\t\t\t\t\t\t<option value=\"showroom\">Showroom bezichtiging<\/option>\n\t\t\t\t\t\t<\/select>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<textarea id=\"textarea\" class=\"form-control\" rows=\"5\" placeholder=\"Opmerking(en)\" name=\"notes\" disabled><\/textarea>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<hr \/>\n\n\t\t\t<div id=\"info\">\n\t\t\t\t<h2>4. Uw gegevens<\/h2>\n\t\t\t\t<p>Vul hier uw gegevens in.<\/p>\n\n\t\t\t\t<div class=\"form-row\">\n\t\t\t\t\t<div class=\"form-group col-12 col-md-6\">\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"firstName\" placeholder=\"Voornaam\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-12 col-md-6\">\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"lastName\" placeholder=\"Achternaam\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-12\">\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"street\" placeholder=\"Straatnaam\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-8\">\n\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" name=\"number\" placeholder=\"Huisnummer\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-4\">\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"addition\" placeholder=\"Toev.\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-12 col-md-6\">\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"zipcode\" placeholder=\"Postcode\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-12 col-md-6\">\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"city\" placeholder=\"Plaatsnaam\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-12 col-md-6\">\n\t\t\t\t\t\t<input type=\"tel\" class=\"form-control\" name=\"phoneLocal\" id=\"phone-field\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"form-group col-12 col-md-6\">\n\t\t\t\t\t\t<input type=\"email\" class=\"form-control\" name=\"email\" placeholder=\"Email\" required>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<input type=\"hidden\" id=\"phone\" name=\"phone\" \/>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<hr \/>\n\n\t\t\t<input type=\"submit\" class=\"btn btn-primary\" value=\"Maak afspraak\" \/>\n\t\t<\/form>\n<\/div>\n<style>\n\tinput::placeholder {\n\t\tfont-size: 16px;\n\t}\n\n\ttextarea::placeholder {\n\t\tfont-size: 16px;\n\t}\n\n\tinput:valid {\n\t\tfont-size: 16px;\n\t}\n\n\t.form-group {\n\t\tmargin-bottom: 1rem;\n\t}\n\n\t.iti { width: 100%; }\n\n\t#leadcatcher-map {\n\t\theight: 600px;\n\t}\n\n\t.time-picker {\n\t\twidth: 300px;\n\t\tmax-width: 100%;\n\t}\n\n\t#date-field {\n\t\tmax-width: 100%;\n\t}\n<\/style>\n<link rel=\"stylesheet\" href=\"https:\/\/wpdemo.webmyday.app\/wp-content\/plugins\/wmd-leadcatcher\/public\/css\/flatpickr.min.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/wpdemo.webmyday.app\/wp-content\/plugins\/wmd-leadcatcher\/public\/css\/intlTelInput.min.css\">\n<script src=\"https:\/\/wpdemo.webmyday.app\/wp-content\/plugins\/wmd-leadcatcher\/public\/js\/intlTelInput.min.js\"><\/script>\n<script src=\"https:\/\/wpdemo.webmyday.app\/wp-content\/plugins\/wmd-leadcatcher\/public\/js\/flatpickr.min.js\"><\/script>\n<script>\n\t\/**\n\t * IMPORTANT NOTE\n\t * ==============\n\t * Since we want to support IE on this page, we can't use these features yet:\n\t * - JavaScript Fetch API (jQuery is a decent enough option for the time being)\n\t * - Template literals\n\t * - for ... of\n\t *\/\n\tconst phoneInput = document.querySelector(\"#phone-field\");\n\tconst dateField = document.getElementById('date-field');\n\tconst mapDefaultZoomLevel = 7;\n\tconst mapGeolocationZoomLevel = 10;\n\tconst leadcatcherUrl = 'https:\/\/demo.webmyday.app\/api';\n\tlet branches = [];\n\tlet map;\n\tlet infoWindow;\n\tlet currentLocationMarker;\n\n\twindow.intlTelInput(phoneInput, {\n\t\tinitialCountry: 'nl',\n\t\tutilsScript: 'https:\/\/wpdemo.webmyday.app\/wp-content\/plugins\/wmd-leadcatcher\/public\/js\/intlTelInput-utils.js'\n\t});\n\n\tflatpickr(dateField, {\n\t\tinline: true\n\t});\n\n\tconst form = document.getElementById('appointment-form');\n\tform.addEventListener('submit', function (e) {\n\t\tconst iti = window.intlTelInputGlobals.getInstance(phoneInput);\n\t\tconst phoneFinalInput = document.getElementById('phone');\n\n\t\tif (!iti.isValidNumber()) {\n\t\t\talert('Het door u ingevulde telefoonnummer is ongeldig. Probeer het opnieuw.');\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tphoneFinalInput.value = iti.getNumber();\n\t});\n\n\tdocument.addEventListener('DOMContentLoaded', function load() {\n\t\tif (!window.jQuery) return setTimeout(load, 50);\n\t\tinitLeadCatcherScheduler();\n\t}, false);\n\n\tfunction initLeadCatcherScheduler() {\n\t\tconst select = document.getElementById(\"select\");\n\t\tconst select2 = document.getElementById(\"select2\");\n\t\tconst textarea = document.getElementById(\"textarea\");\n\n\t\tdateField.addEventListener('change', function(e) {\n\t\t\tconst date = e.target.value;\n\t\t\tconst selectedBranch = document.getElementById('selectedBranch').value;\n\t\t\tdocument.getElementById('date-content-field').value = date;\n\n\t\t\tif (!selectedBranch) {\n\t\t\t\talert('Er is geen vestiging geselecteerd. Probeer het opnieuw.');\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tjQuery.ajax(leadcatcherUrl + '\/timeslots?branchId=' + selectedBranch + '&date=' + date)\n\t\t\t.done(function(data) {\n\t\t\t\tselect.disabled = true;\n\t\t\t\tselect.innerHTML = '';\n\t\t\t\tlet message = 'Er zijn geen tijdstippen beschikbaar voor deze datum';\n\n\t\t\t\tconst timeslots = data.message;\n\n\t\t\t\tif (timeslots.length > 0) {\n\t\t\t\t\tselect.disabled = false;\n\t\t\t\t\tmessage = 'Selecteer een tijd';\n\t\t\t\t}\n\n\t\t\t\tconst option = document.createElement(\"option\");\n\t\t\t\toption.text = message;\n\t\t\t\toption.disabled = true;\n\t\t\t\toption.selected = true;\n\t\t\t\toption.hidden = true;\n\t\t\t\tselect.appendChild(option);\n\n\t\t\t\ttimeslots.forEach(function(timeslot) {\n\t\t\t\t\tconst option = document.createElement(\"option\");\n\t\t\t\t\toption.value = timeslot.id;\n\t\t\t\t\toption.text = timeslot.timeslot;\n\t\t\t\t\tselect.appendChild(option);\n\t\t\t\t});\n\t\t\t})\n\t\t\t.fail(function() {\n\t\t\t\talert( 'Er is een fout opgetreden bij het ophalen van de beschikbare tijdsloten. Probeer het opnieuw.' );\n\t\t\t});\n\t\t});\n\n\t\tselect2.addEventListener('change', function(event) {\n\t\t\ttextarea.disabled = false;\n\t\t});\n\t};\n<\/script>\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"templates\/template-full-width.php","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":3,"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/wpdemo.webmyday.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}