API tools faq
paste
Advertisement
Dennis-Hermes

Beschikbaarheids formulier. | versie 2.3

Dennis-Hermes
Jun 30th, 2018
232
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.32 KB | None | 0 0
raw download clone embed print report
  1. <DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  9.  
  10. <style>
  11. .container {
  12.     display: block;
  13.     position: relative;
  14.     padding-left: 35px;
  15.     margin-bottom: 12px;
  16.     cursor: pointer;
  17.     font-size: 15px;
  18.     -webkit-user-select: none;
  19.     -moz-user-select: none;
  20.     -ms-user-select: none;
  21.     user-select: none;
  22. }
  23. .container input {
  24.     position: absolute;
  25.     opacity: 0;
  26.     cursor: pointer;
  27. }
  28.  
  29. .checkmark {
  30.     position: absolute;
  31.     top: 0;
  32.     left: 0;
  33.     height: 15px;
  34.     width: 15px;
  35.     background-color: #619bf9;
  36.     border-radius: 50%;
  37. }
  38. .container:hover input ~ .checkmark {
  39.     background-color: #4286f4;
  40. }
  41. .container input:checked ~ .checkmark {
  42.     background-color: #4286f4;
  43. }
  44.  
  45. .checkmark:after {
  46.     content: "";
  47.     position: absolute;
  48.     display: none;
  49. }
  50.  
  51. .container input:checked ~ .checkmark:after {
  52.     display: block;
  53. }
  54.  
  55. .container .checkmark:after {
  56.     top: 3.5px;
  57.     left: 3.5px;
  58.     width: 7px;
  59.     height: 7px;
  60.     border-radius: 50%;
  61.     background: white;
  62. }
  63. </style>
  64. <style>
  65.  
  66. input[font=date1], select {
  67.     width: 100%;
  68.     padding: 12px 20px;
  69.     margin: 8px 0;
  70.     display: inline-block;
  71.     border: 1px solid #ccc;
  72.     border-radius: 4px;
  73.     box-sizing: border-box;
  74. }
  75.  
  76. input[font=date2], select {
  77.     width: 40%;
  78.     padding: 12px 20px;
  79.     margin: 8px 0;
  80.     display: inline-block;
  81.     border: 1px solid #ccc;
  82.     border-radius: 4px;
  83.     box-sizing: border-box;
  84. }
  85.  
  86. input[type=text2], select {
  87.     width: 30%;
  88.     padding: 12px 20px;
  89.     margin: 8px 0;
  90.     display: inline-block;
  91.     border: 1px solid #ccc;
  92.     border-radius: 4px;
  93.     box-sizing: border-box;
  94. }
  95.  
  96. input[type=tel], select {
  97.     width: 100%;
  98.     padding: 12px 20px;
  99.     margin: 8px 0;
  100.     display: inline-block;
  101.     border: 1px solid #ccc;
  102.     border-radius: 4px;
  103.     box-sizing: border-box;
  104. }
  105.  
  106. input[type=email], select {
  107.     width: 100%;
  108.     padding: 12px 20px;
  109.     margin: 8px 0;
  110.     display: inline-block;
  111.     border: 1px solid #ccc;
  112.     border-radius: 4px;
  113.     box-sizing: border-box;
  114. }
  115.  
  116. input[type=text], select {
  117.     width: 100%;
  118.     padding: 12px 20px;
  119.     margin: 8px 0;
  120.     display: inline-block;
  121.     border: 1px solid #ccc;
  122.     border-radius: 4px;
  123.     box-sizing: border-box;
  124. }
  125.  
  126. input[type=submit] {
  127.     width: 100%;
  128.     background-color: #619bf9;
  129.     color: white;
  130.     padding: 14px 20px;
  131.     margin: 8px 0;
  132.     border: none;
  133.     border-radius: 4px;
  134.     cursor: pointer;
  135. }
  136.  
  137. input[type=submit]:hover {
  138.     background-color: #4286f4;
  139. }
  140.  
  141. div {
  142.     border-radius: 5px;
  143.     background-color: #f2f2f2;
  144.     padding: 20px;
  145. }
  146. </style>
  147.  
  148. </head>
  149.  
  150. <body>
  151.  
  152.  <div id="id01" class="w3-modal">
  153.     <div class="w3-modal-content">
  154.       <div class="w3-container">
  155.         <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
  156. <p> Let op: Controleer uw gegevens in het formulier op volledigheid, als na het klikken op "Verzenden" niet gelijk automatisch een e-mail gegenereerd wordt.</p>
  157.  
  158. <p>Dank u wel voor uw aanvraag!</p>
  159.        
  160. <p>Wij reageren zo spoedig mogelijk terug</p>
  161.       </div>
  162.     </div>
  163.   </div>
  164.  
  165. <div>
  166. <p>
  167.   <form action="mailto:info.spanishgarden@gmail.com" action="dhtesten.co.nf" method="post" enctype="text/plain">
  168.     <label for="voornaam">Voornaam:</label>
  169.     <input type="text" id="voornaam" name="Voornaam" placeholder="Uw voornaam" required>
  170.  
  171.     <label for="achternaam">Achternaam:</label>
  172.     <input type="text" id="Uw achternaam" name="Achternaam" placeholder="Uw achternaam" required>
  173.    
  174.     <label for="geboortedatum">Geboortedatum:</label>
  175.     <input type="date" font="date1" id="geboortedatum" name="Geboortedatum" placeholder="Uw geboortedatum" required>
  176.    
  177.     <label for="email">E-mail:</label>
  178.     <input type="email" id="email" name="E-mail" placeholder="Uw e-mail" required>
  179.     <label for="telefoonnummer">Telefoonnummer:</label>
  180.     <input type="tel" id="telefoonnummer" name="Telefoonnummer" placeholder="Uw telefoonnummer" required>
  181.  
  182.     <label for="aankomstdatum">Aankomstdatum:</label>
  183.     <input type="date" font="date1" id="aankomstdatum" name="Aankomstdatum" placeholder="Aankomstdatum" required>
  184.     <label for="vertrekdatum">Vertrekdatum:</label>
  185.     <input type="date" id="vertrekdatum" font="date1" name="Vertrekdatum" placeholder="Vertrekdatum" required>
  186.    
  187.     <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  188.    
  189.     <font color="#f2f2f2">space-|-spce</font>
  190.    
  191.     <h4><input id="myCheck" type="checkbox" name="1e medereiziger" onclick="myFunction()" value="Ja"><font color="white">_</font><b>1e Medereiziger:</b></h4>
  192.     <p id="text" style="display:none">
  193.     <label for="voornaam 1e medereiziger">Voornaam Medereiziger:</label>
  194.     <input type="text2" id="voornaam 1e medereiziger" name="Voornaam 1e medereiziger" placeholder="Voornaam">
  195.     <font color="#f2f2f2">space-|-spce</font>
  196.     <label for="achternaam 1e medereiziger">Achternaam Medereiziger:</label>
  197.     <input type="text2" id="achternaam 1e medereiziger" name="Achternaam 1e medereiziger" placeholder="Achternaam">
  198.     </p><p id="1text" style="display:none">
  199.     <label for="geboortedatum 1e medereiziger">Geboortedatum Medereiziger:<font color="#f2f2f2">spacds|e</font></label>
  200.     <input type="date" font="date2" id="geboortedatum 1e medereiziger" name="Geboortedatum 1e medereiziger" placeholder="Geboortedatum medereiziger">
  201.  
  202.     <script>
  203.     function myFunction() {
  204.     var checkBox = document.getElementById("myCheck");
  205.     var text = document.getElementById("text");
  206.     if (checkBox.checked == true){
  207.         text.style.display = "block";
  208.     } else {
  209.        text.style.display = "none";
  210.     }
  211.     var text = document.getElementById("1text");
  212.     if (checkBox.checked == true){
  213.         text.style.display = "block";
  214.     } else {
  215.        text.style.display = "none";
  216.     }
  217.     var text = document.getElementById("2text");
  218.     if (checkBox.checked == true){
  219.         text.style.display = "block";
  220.     } else {
  221.        text.style.display = "none";
  222.     }
  223.     }
  224.     </script>
  225.     </p>
  226.    
  227.     <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  228.    
  229.     <h4><input id="myCheck1" type="checkbox" name="2e Medereiziger" onclick="myFunction1()" value="Ja"><font color="white">_</font><b>2e Medereiziger:</b></h4>
  230.     <p id="text1" style="display:none">
  231.     <label for="voornaam 2e medereiziger">Voornaam Medereiziger:</label>
  232.     <input type="text2" id="voornaam 2e medereiziger" name="Voornaam 2e medereiziger" placeholder="Voornaam">
  233.     <font color="#f2f2f2">space-|-spce</font>
  234.     <label for="achternaam 2e medereiziger">Achternaam Medereiziger:</label>
  235.     <input type="text2" id="achternaam 2e medereiziger" name="Achternaam 2e medereiziger" placeholder="Achternaam">
  236.     </p><p id="1text1" style="display:none">
  237.     <label for="geboortedatum 2e medereiziger">Geboortedatum Medereiziger:<font color="#f2f2f2">spacds|e</font></label>
  238.     <input type="date" font="date2" id="geboortedatum 2e medereiziger" name="Geboortedatum 2e medereiziger" placeholder="Geboortedatum medereiziger">
  239.     <script>
  240.     function myFunction1() {
  241.     var checkBox = document.getElementById("myCheck1");
  242.     var text = document.getElementById("text1");
  243.     if (checkBox.checked == true){
  244.         text.style.display = "block";
  245.     } else {
  246.        text.style.display = "none";
  247.     }
  248.     var text = document.getElementById("1text1");
  249.     if (checkBox.checked == true){
  250.         text.style.display = "block";
  251.     } else {
  252.        text.style.display = "none";
  253.     }
  254.     var text = document.getElementById("2text1");
  255.     if (checkBox.checked == true){
  256.         text.style.display = "block";
  257.     } else {
  258.        text.style.display = "none";
  259.     }
  260.     }
  261.     </script>
  262.     </p>
  263.    
  264.     <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  265.    
  266.     <h4><input id="myCheck2" type="checkbox" name="3e Medereiziger" onclick="myFunction2()" value="Ja"><font color="white">_</font><b>3e Medereiziger:</b></h4>
  267.     <p id="text2" style="display:none">
  268.     <label for="voornaam 3e medereiziger">Voornaam Medereiziger:</label>
  269.     <input type="text2" id="voornaam 3e medereiziger" name="Voornaam 3e medereiziger" placeholder="Voornaam">
  270.     <font color="#f2f2f2">space-|-spce</font>
  271.     <label for="achternaam 3e medereiziger">Achternaam Medereiziger:</label>
  272.     <input type="text2" id="achternaam 3e medereiziger" name="Achternaam 3e medereiziger" placeholder="Achternaam">
  273.     </p><p id="1text2" style="display:none">
  274.     <label for="geboortedatum 3e medereiziger">Geboortedatum Medereiziger:<font color="#f2f2f2">spacds|e</font></label>
  275.     <input type="date" font="date2" id="geboortedatum 3e medereiziger" name="Geboortedatum 3e medereiziger" placeholder="Geboortedatum medereiziger">
  276.     <script>
  277.     function myFunction2() {
  278.     var checkBox = document.getElementById("myCheck2");
  279.     var text = document.getElementById("text2");
  280.     if (checkBox.checked == true){
  281.         text.style.display = "block";
  282.     } else {
  283.        text.style.display = "none";
  284.     }
  285.     var text = document.getElementById("1text2");
  286.     if (checkBox.checked == true){
  287.         text.style.display = "block";
  288.     } else {
  289.        text.style.display = "none";
  290.     }
  291.     var text = document.getElementById("2text2");
  292.     if (checkBox.checked == true){
  293.         text.style.display = "block";
  294.     } else {
  295.        text.style.display = "none";
  296.     }
  297.     }
  298.     </script>
  299.     </p>
  300.    
  301.     <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  302.    
  303.     <h4><input id="myCheck3" type="checkbox" name="4e Medereiziger" onclick="myFunction3()" value="Ja"><font color="white">_</font><b>4e Medereiziger:</b></h4>
  304.     <p id="text3" style="display:none">
  305.     <label for="voornaam 4e medereiziger">Voornaam Medereiziger:</label>
  306.     <input type="text2" id="voornaam 4e medereiziger" name="Voornaam 4e medereiziger" placeholder="Voornaam">
  307.     <font color="#f2f2f2">space-|-spce</font>
  308.     <label for="achternaam 4e medereiziger">Achternaam Medereiziger:</label>
  309.     <input type="text2" id="achternaam 4e medereiziger" name="Achternaam 4e medereiziger" placeholder="Achternaam">
  310.     </p><p id="1text3" style="display:none">
  311.     <label for="geboortedatum 4e medereiziger">Geboortedatum Medereiziger:<font color="#f2f2f2">spacds|e</font></label>
  312.     <input type="date" font="date2" id="geboortedatum 4e medereiziger" name="Geboortedatum 4e medereiziger" placeholder="Geboortedatum medereiziger">
  313.     <script>
  314.     function myFunction3() {
  315.     var checkBox = document.getElementById("myCheck3");
  316.     var text = document.getElementById("text3");
  317.     if (checkBox.checked == true){
  318.         text.style.display = "block";
  319.     } else {
  320.        text.style.display = "none";
  321.     }
  322.     var text = document.getElementById("1text3");
  323.     if (checkBox.checked == true){
  324.         text.style.display = "block";
  325.     } else {
  326.        text.style.display = "none";
  327.     }
  328.     var text = document.getElementById("2text3");
  329.     if (checkBox.checked == true){
  330.         text.style.display = "block";
  331.     } else {
  332.        text.style.display = "none";
  333.     }
  334.     }
  335.     </script>
  336.     </p>
  337.    
  338.     <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  339.    
  340.     <h4><input id="myCheck4" type="checkbox" name="5e Medereiziger" onclick="myFunction4()" value="Ja"><font color="white">_</font><b>5e Medereiziger:</b></h4>
  341.     <p id="text4" style="display:none">
  342.     <label for="Voornaam 5e medereiziger">Voornaam medereiziger:</label>
  343.     <input type="text2" id="Voornaam 5e medereiziger" name="Voornaam 5e medereiziger" placeholder="Voornaam">
  344.     <font color="#f2f2f2">space-|-spce</font>
  345.     <label for="Achternaam 5e medereiziger">Achternaam Medereiziger:</label>
  346.     <input type="text2" id="Achternaam 5e medereiziger" name="Achternaam 5e medereiziger" placeholder="Achternaam">
  347.     </p><p id="1text4" style="display:none">
  348.     <label for="geboortedatum 5e medereiziger">Geboortedatum Medereiziger:<font color="#f2f2f2">spacds|e</font></label>
  349.     <input type="date" font="date2" id="Geboortedatum 5e medereiziger" name="Geboortedatum 5e medereiziger" placeholder="Geboortedatum medereiziger">
  350.     <script>
  351.     function myFunction4() {
  352.     var checkBox = document.getElementById("myCheck4");
  353.     var text = document.getElementById("text4");
  354.     if (checkBox.checked == true){
  355.         text.style.display = "block";
  356.     } else {
  357.        text.style.display = "none";
  358.     }
  359.     var text = document.getElementById("1text4");
  360.     if (checkBox.checked == true){
  361.         text.style.display = "block";
  362.     } else {
  363.        text.style.display = "none";
  364.     }
  365.     var text = document.getElementById("2text4");
  366.     if (checkBox.checked == true){
  367.         text.style.display = "block";
  368.     } else {
  369.        text.style.display = "none";
  370.     }
  371.     }
  372.     </script>
  373.     </p>
  374.    
  375.     <input onclick="document.getElementById('id01').style.display='block'" type="submit" value="Verzenden">
  376.     </form>
  377.    
  378. </div>
  379. </body>
  380.  
  381. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!