https://walksfelde.de/assets/formoid/formoid.min.js

1var Formoid = (function () {
2
3    var API_URL = 'https://formoid.net/api/push';
4
5    function $ajax(url, settings) {
6        return new Promise(function (resolve, reject) {
7            var xhr = new XMLHttpRequest();
8            xhr.open(settings.type, url);
9            xhr.onload = function () {
10                if (xhr.status !== 200) {
11                    return reject(new Error('Incorrect server response.'));
12                }
13                resolve(xhr.responseText);
14            };
15            xhr.onerror = function () {
16                var message = 'Failed to query the server. ';
17                if ('onLine' in navigator && !navigator.onLine) {
18                    message += 'No connection to the Internet.';
19                } else {
20                    message += 'Check the connection and try again.';
21                }
22                reject(new Error(message));
23            };
24            xhr.send(settings.data);
25        })
26    };
27
28    var prop = function (name, args) {
29        name = '__' + name + '__';
30        if (args.length) {
31            this[name] = args[0];
32            return this;
33        }
34        return this[name];
35    };
36
37    var Form = function (settings) {
38        settings = settings || {};
39        this.__email__ = settings.email || '';
40        this.__title__ = settings.title || '';
41        this.__data__ = settings.data || [];
42    };
43
44    Form.prototype.email = function (value) {
45        return prop.call(this, 'email', arguments);
46    };
47
48    Form.prototype.title = function (value) {
49        return prop.call(this, 'title', arguments);
50    };
51
52    Form.prototype.data = function (value) {
53        return prop.call(this, 'data', arguments);
54    };
55
56    Form.prototype.send = function (data) {
57        return $ajax(API_URL, {
58            type: 'POST',
59            data: JSON.stringify({
60                email: this.__email__,
61                form: {
62                    title: this.__title__,
63                    data: (arguments.length ? data : this.__data__)
64                }
65            })
66        })
67        .then(function(responseText) {
68            var data;
69            try {
70                data = JSON.parse(responseText);
71            } catch (e) {
72                throw new Error('Incorrect server response.');
73            }
74            if (data.error) {
75                throw new Error(data.error);
76            }
77            return data.response;
78        });
79    };
80
81    return {
82        Form: function (settings) {
83            return new Form(settings);
84        }
85    }
86
87})();
88
89const formModalDOM = document.createElement('div');
90let formModal;
91
92formModalDOM.classList.add('modal');
93formModalDOM.setAttribute('tabindex', -1);
94formModalDOM.style.overflow = 'hidden';
95
96if (typeof bootstrap !== 'undefined') {
97    if (bootstrap.Tooltip.VERSION.startsWith(5)) {
98        //bs5
99        formModalDOM.innerHTML = `
100            <div class="modal-dialog d-flex align-items-center" style="">
101                <div class="modal-content" style="height:auto;border-radius:0;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);">
102                    <div class="modal-body d-flex justify-content-end flex-column align-items-end">
103                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
104                        <p class="display-7" style="text-align:center;width:100%;">Modal body text goes here.</p>
105                    </div>
106                </div>
107            </div>`
108    } else {
109        // bs4
110        formModalDOM.innerHTML = `
111            <div class="modal-dialog d-flex align-items-center" style="">
112                <div class="modal-content" style="height:auto;border-radius:0;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);">
113                    <div class="modal-body d-flex justify-content-end flex-column align-items-end">
114                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
115                        <p class="display-7" style="text-align:center;width:100%;">Modal body text goes here.</p>
116                    </div>
117                </div>
118            </div>`
119    }
120} else if ($.fn.Tooltip) {
121    // bs3
122    formModalDOM.innerHTML = `
123        <div class="modal-dialog d-flex align-items-center" style="">
124            <div class="modal-content" style="height:auto;border-radius:0;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);">
125                <div class="modal-body d-flex justify-content-end flex-column align-items-end">
126                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
127                    <p class="display-7" style="text-align:center;width:100%;">Modal body text goes here.</p>
128                </div>
129            </div>
130        </div>`
131}
132
133if (bootstrap) {
134    formModal = new bootstrap.Modal(formModalDOM);
135}
136
137var isValidEmail = function (input) {
138    return input.value ? /^([^@]+?)@(([a-z0-9]-*)*[a-z0-9]+\.)+([a-z0-9]+)$/i.test(input.value) : true;
139};
140
141var formComponents = document.querySelectorAll('[data-form-type="formoid"]');
142

143formComponents.forEach(function (component) {
144    var formData,
145        form = component.tagName === 'FORM' ? component : component.querySelector('form'),
146        alert = component.querySelector('[data-form-alert]'),
147        title = component.getAttribute('data-form-title') ? component : component.querySelector('[data-form-title]'),
148        submit = component.querySelector('[type="submit"]'),
149        inputArr = component.querySelectorAll('[data-form-field]'),
150        alertSuccess = alert.innerHTML;
151
152    form.addEventListener('change', function (event) {
153        if (event.target.type === 'file') {
154            if (event.target.files[0].size > 1000000) {
155                formModal._element.querySelector('.modal-body p').innerText = 'File size must be less than 1mb';
156                formModal._element.querySelector('.modal-content').classList.add('alert-danger');
157                formModal._element.querySelector('.modal-content').style.backgroundColor = '#ff9966';
158                formModal.show();
159                submit.classList.add('btn-loading');
160                submit.setAttribute('disabled', true);
161            }
162        }
163    });
164
165    form.addEventListener('submit', function (event) {
166        event.stopPropagation();
167        event.preventDefault();
168
169        if (submit.classList.contains('btn-loading')) return;
170
171        var inputs = inputArr;
172
173        form.classList.add('form-active');
174        submit.classList.add('btn-loading');
175        submit.setAttribute('disabled', true);
176        alert.innerHTML = '';
177
178        formData = formData || Formoid.Form({
179            email: component.querySelector('[data-form-email]').value,
180            title: title.getAttribute('data-form-title') || title.innerText
181        });
182
183        function parseInput(input) {
184            return new Promise(function (resolve, reject) {
185                // valide email
186                if (input.getAttribute('name') === 'email' && !isValidEmail(input)) {
187                    return reject(new Error('Form is not valid'));
188                }
189                var name = input.getAttribute('data-form-field') || input.getAttribute('name');
190                switch (input.getAttribute('type')) {
191                    case 'file':
192                        var file = input.files[0];
193                        if (!file) return resolve();
194                        var reader = new FileReader()
195                        reader.onloadend = function () {
196                            resolve([name, reader.result]);
197                        };
198                        reader.onerror = function () {
199                            reject(reader.error);
200                        };
201                        reader.readAsDataURL(file);
202                        break;
203                    case 'checkbox':
204                        resolve([name, input.checked ? input.value : 'No']);
205                        break;
206                    case 'radio':
207                        resolve(input.checked && [name, input.value]);
208                        break;
209                    default:
210                        resolve([name, input.value]);
211                }
212            });
213        }
214
215        Promise
216            .all(Array.prototype.map.call(inputs, function (input) { return parseInput(input); }))
217            .then(function (data) { return formData.send(data.filter(function (v) { return v; })); })
218            .then(function (message) {
219                form.reset();
220                form.classList.remove('form-active');
221                formModal._element.querySelector('.modal-body p').innerText = alertSuccess || message;
222                formModal._element.querySelector('.modal-content').classList.add('alert-success');
223                formModal._element.querySelector('.modal-content').style.backgroundColor = '#70c770'
224                formModal.show();
225            }, function (err) {
226                formModal._element.querySelector('.modal-body p').innerText = err.message;
227                formModal._element.querySelector('.modal-content').classList.add('alert-danger');
228                formModal._element.querySelector('.modal-content').style.backgroundColor = '#ff9966'
229            })
230            .then(function () {
231                submit.classList.remove('btn-loading');
232                submit.removeAttribute('disabled');
233            });
234    });
235
236    inputArr.forEach(function (elem) {
237        elem.addEventListener('focus', function () {
238            submit.classList.remove('btn-loading')
239            submit.removeAttribute('disabled');
240        });
241    });
242})