├── LICENSE
├── README.md
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Franz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Stop Form Spam: The Custom Tag Method
  2 | 
  3 | A reliable method to prevent spam bots from completing input, select and textarea fields and from submitting online forms (e.g. contact forms)
  4 | 
  5 | ## How it works
  6 | 
  7 | Use a small bit of Javascript to convert custom tags to valid form tags. 
  8 | 
  9 | ## Usage
 10 | 
 11 | The example below converts \<f-f>\</f-f> tags to input, select and textarea tags after the page loads. This means the page html does not need to contain such tags and spam bots cannot populate them. The JS is very fast, so human page visitors do not notice the conversion. 
 12 | 
 13 | 1. Add an opening and a closing tag (!) with the name f-f
 14 | ```html
 15 | <f-f></f-f>
 16 | ```
 17 | 2. Add an "el" attribute with the element you want to create
 18 | ```html
 19 | <f-f el="input"></f-f>
 20 | <f-f el="textarea"></f-f>
 21 | <f-f el="select"></f-f>
 22 | <f-f el="button"></f-f>
 23 | ```
 24 | 3. Add any attributes you want your element to have
 25 | ```html
 26 | <f-f el="input" type="text" name="name" class="formel"></f-f>
 27 | <f-f el="input" type="checkbox" name="mycheckbox" value="Yes" checked></f-f>
 28 | <f-f el="input" type="radio" name="mycheckbox" value="No" checked></f-f>
 29 | <f-f el="textarea" name="message" style="height:40px;width:200px;"></f-f>
 30 | <f-f el="select" name="mycheckbox2"><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option></f-f>
 31 | <f-f el="button" type="button">Submit</f-f>
 32 | <f-f el="input" type="button" name="submit" value="Cancel"></f-f>
 33 | ```
 34 | 4. Add the script below to the page. When the page loads it creates a new element using the "el" attribute in all f-f elements. It then adds all other attributes and all child elements to the new element before removing the f-f element from the DOM.
 35 | ```html
 36 | <script>
 37 | document.addEventListener("DOMContentLoaded", function () {
 38 |     //register the custom element
 39 |     window.customElements.define('f-f', class extends HTMLElement {});
 40 |     //get an array of f-f elements to convert
 41 |     const els = document.getElementsByTagName("f-f");
 42 |     //loop through the array of elements
 43 |     for (let i=els.length-1;i>=0;i--){
 44 |         //create an object of the attributes
 45 |         let attrs = els[i].getAttributeNames().reduce((acc, name) => {
 46 |             return {...acc, [name]: els[i].getAttribute(name)};
 47 |         }, {});
 48 |         //create a new element using the el attribute
 49 |         let el = document.createElement(attrs["el"]);
 50 |         //loop through the array of attributes
 51 |         for (let key in attrs){
 52 |             //filter out the el attribute
 53 |             if(attrs.hasOwnProperty(key) && key != "el"){
 54 |                 //add all other attributes to the new element
 55 |                 el.setAttribute(`${key}`, `${attrs[key]}`);
 56 |             }
 57 |         }
 58 |         //loop though the child nodes of the f-f
 59 |         while (els[i].childNodes.length > 0) {
 60 |             //append child nodes to the new element
 61 |             el.appendChild(els[i].childNodes[0]);
 62 |         }
 63 |         //insert the new element into the DOM
 64 |         els[i].parentNode.insertBefore(el, els[i]);
 65 |         //remove the f-f element from the DOM
 66 |         els[i].remove();
 67 |     }
 68 | });
 69 | </script>
 70 | ```
 71 | 
 72 | ## Full Example
 73 | ```html
 74 | <form action="" method="POST">
 75 |     <div>
 76 |         <span>Your Name</span>
 77 |         <f-f el="input" type="text" name="firstname" class="formel" placeholder="first name"></f-f>
 78 |         <f-f el="input" type="text" name="lastname" class="formel" placeholder="last name"></f-f>
 79 |     </div>
 80 |     <div>
 81 |         <span>Email</span>
 82 |         <f-f el="input" type="email" onclick="myValidationScript();"></f-f>
 83 |     </div>
 84 |     <div>
 85 |         <span>Message1</span>
 86 |         <f-f el="textarea" name="message1" style="height:40px;width:200px;"></f-f>
 87 |     </div>
 88 |     <div>
 89 |         <span>Message2</span>
 90 |         <f-f el="textarea" name="message2" style="height:40px;width:200px;"></f-f>
 91 |     </div>
 92 |     <div>
 93 |         <span>Select</span>
 94 |         <f-f el="select" name="mycheckbox2"><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option></f-f>
 95 |     </div>
 96 |     <div>
 97 |         <span>Checkboxes</span>
 98 |         <f-f el="input" type="checkbox" name="mycheckbox1" value="Green" checked></f-f>
 99 |         <f-f el="input" type="checkbox" name="mycheckbox2" value="Blue"></f-f>
100 |     </div>
101 |     <div>
102 |         <span>Radio Buttons</span>
103 |         <f-f el="input" type="radio" name="myradio" value="Yes" checked></f-f>
104 |         <f-f el="input" type="radio" name="myradio" value="No"></f-f>
105 |     </div>
106 |     <f-f el="button" type="button">Submit</f-f>&nbsp;<f-f el="input" type="button" name="submit" value="Cancel"></f-f>
107 | </form>
108 | <script>
109 |     document.addEventListener("DOMContentLoaded", function () {
110 |         window.customElements.define('f-f', class extends HTMLElement {});
111 |         const els = document.getElementsByTagName("f-f");
112 |         for (let i=els.length-1;i>=0;i--){
113 |             let attrs = els[i].getAttributeNames().reduce((acc, name) => {
114 |                 return {...acc, [name]: els[i].getAttribute(name)};
115 |             }, {});
116 |             let el = document.createElement(attrs["el"]);
117 |             for (let key in attrs){
118 |                 if(attrs.hasOwnProperty(key) && key != "el"){
119 |                     el.setAttribute(`${key}`, `${attrs[key]}`);
120 |                 }
121 |             }
122 |             while (els[i].childNodes.length > 0) {
123 |                 el.appendChild(els[i].childNodes[0]);
124 |             }
125 |             els[i].parentNode.insertBefore(el, els[i]);
126 |             els[i].remove();
127 |         }
128 |     });
129 | </script>
130 | ```
131 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <title>FormSpam Prevention</title>
 8 |     </head>
 9 |     <body>
10 |         <form action="" method="POST">
11 |             <div>
12 |                 <span>Your Name</span>
13 |                 <f-f el="input" type="text" name="firstname" class="formel" placeholder="first name"></f-f>
14 |                 <f-f el="input" type="text" name="lastname" class="formel" placeholder="last name"></f-f>
15 |             </div>
16 |             <div>
17 |                 <span>Email</span>
18 |                 <f-f el="input" type="email" onclick="myValidationScript();"></f-f>
19 |             </div>
20 |             <div>
21 |                 <span>Message1</span>
22 |                 <f-f el="textarea" name="message1" style="height: 40px; width: 200px"></f-f>
23 |             </div>
24 |             <div>
25 |                 <span>Message2</span>
26 |                 <f-f el="textarea" name="message2" style="height: 40px; width: 200px"></f-f>
27 |             </div>
28 |             <div>
29 |                 <span>Select</span>
30 |                 <f-f el="select" name="mycheckbox2">
31 |                     <option value="Monday">Monday</option>
32 |                     <option value="Tuesday">Tuesday</option>
33 |                 </f-f>
34 |             </div>
35 |             <div>
36 |                 <span>Checkboxes</span>
37 |                 <f-f el="input" type="checkbox" name="mycheckbox1" value="Green" checked></f-f>
38 |                 <f-f el="input" type="checkbox" name="mycheckbox2" value="Blue"></f-f>
39 |             </div>
40 |             <div>
41 |                 <span>Radio Buttons</span>
42 |                 <f-f el="input" type="radio" name="myradio" value="Yes" checked></f-f>
43 |                 <f-f el="input" type="radio" name="myradio" value="No"></f-f>
44 |             </div>
45 |             <f-f el="button" type="button">Submit</f-f>&nbsp;<f-f el="input" type="button" name="submit" value="Cancel"></f-f>
46 |         </form>
47 |         <script>
48 |             document.addEventListener("DOMContentLoaded", function () {
49 |                 window.customElements.define("f-f", class extends HTMLElement {});
50 |                 const els = document.getElementsByTagName("f-f");
51 |                 for (let i = els.length - 1; i >= 0; i--) {
52 |                     let attrs = els[i].getAttributeNames().reduce((acc, name) => {
53 |                         return { ...acc, [name]: els[i].getAttribute(name) };
54 |                     }, {});
55 |                     let el = document.createElement(attrs["el"]);
56 |                     for (let key in attrs) {
57 |                         if (attrs.hasOwnProperty(key) && key != "el") {
58 |                             el.setAttribute(`${key}`, `${attrs[key]}`);
59 |                         }
60 |                     }
61 |                     while (els[i].childNodes.length > 0) {
62 |                         el.appendChild(els[i].childNodes[0]);
63 |                     }
64 |                     els[i].parentNode.insertBefore(el, els[i]);
65 |                     els[i].remove();
66 |                 }
67 |             });
68 |         </script>
69 |     </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------