├── .gitignore ├── external └── simple-form-dist.js ├── package.json ├── readme.md ├── webpack.config.js ├── dist └── simple-form.js └── js └── simple-form.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /external/simple-form-dist.js: -------------------------------------------------------------------------------- 1 | import SimpleForm from '../js/simple-form.js'; 2 | window.SimpleForm = SimpleForm; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-form", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "build": "webpack --config webpack.config.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/origamid/simple-form.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/origamid/simple-form/issues" 17 | }, 18 | "homepage": "https://github.com/origamid/simple-form#readme", 19 | "devDependencies": { 20 | "css-loader": "^3.0.0", 21 | "optimize-css-assets-webpack-plugin": "^5.0.3", 22 | "mini-css-extract-plugin": "^0.7.0", 23 | "webpack": "^4.35.3", 24 | "webpack-cli": "^3.3.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## Simple Form 2 | 3 | Envio utilizando fetch de formulário de contato. 4 | 5 | ```js 6 | // 1 - Copie o arquivo simple-slide.js da pasta dist e cole no seu site. 7 | 8 | // 2 - Link o arquivo utilizando a tag script /js/plugins é apenas um exemplo, caso você tenha colocado o arquivo dentro da pasta de plugins 9 | 10 | 11 | // 3 - Inicie a classe do slide: 12 | 13 | new SimpleForm({ 14 | form: ".formphp", // seletor do formulário 15 | button: "#enviar", // seletor do botão 16 | erro: "

Um erro ocorreu, tente para o email contato@bikcraft.com.

", // mensagem de erro 17 | sucesso: "

Formulário enviado com sucesso

Em breve eu entro em contato com você.

", // mensagem de sucesso 18 | }); 19 | ``` -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // Webpack uses this to work with directories 2 | const path = require('path'); 3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 4 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 5 | const TerserJSPlugin = require('terser-webpack-plugin'); 6 | 7 | module.exports = { 8 | mode: 'production', 9 | optimization: { 10 | minimizer: [ 11 | new TerserJSPlugin({}), 12 | new OptimizeCSSAssetsPlugin({}) 13 | ], 14 | }, 15 | entry: { 16 | ['simple-form']: './external/simple-form-dist.js', 17 | }, 18 | output: { 19 | path: path.resolve(__dirname, 'dist'), 20 | filename: '[name].js' 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.css$/, 26 | use: [ 27 | MiniCssExtractPlugin.loader, 28 | "css-loader" 29 | ] 30 | } 31 | ] 32 | }, 33 | plugins: [ 34 | new MiniCssExtractPlugin({ filename: "simple-form.css" }) 35 | ] 36 | }; -------------------------------------------------------------------------------- /dist/simple-form.js: -------------------------------------------------------------------------------- 1 | window.SimpleForm=class{constructor(t){this.config=t,this.form=document.querySelector(t.form),this.form&&"function"==typeof window.fetch&&(this.url=this.form.getAttribute("action"),this.formButton=this.form.querySelector(t.button),this.init())}displayError(){this.form.innerHTML=this.config.erro}displaySuccess(){this.form.innerHTML=this.config.sucesso}getFormValues(){const t=new FormData;return this.form.querySelectorAll("[name]").forEach(e=>{const r=e.getAttribute("name"),n=e.value;t.append(r,n)}),t}validateForm(){const t=this.form.querySelectorAll("[required]");let e=!0;return t.forEach(t=>{e&&(e=!!t.value)}),e}onSendForm(t){t.preventDefault(),t.currentTarget.disabled=!0,t.currentTarget.innerText="Enviando..."}sendForm(t){this.validateForm()&&(this.onSendForm(t),fetch(this.url,{method:"POST",body:this.getFormValues()}).then(t=>{if(!t.ok)throw Error(t.statusText);return t.text()}).then(t=>this.displaySuccess()).catch(t=>{this.displayError()}))}init(){this.sendForm=this.sendForm.bind(this),this.formButton.addEventListener("click",this.sendForm)}} -------------------------------------------------------------------------------- /js/simple-form.js: -------------------------------------------------------------------------------- 1 | export default class SimpleForm { 2 | constructor(config) { 3 | this.config = config; 4 | this.form = document.querySelector(config.form); 5 | if (this.form && (typeof window.fetch === "function")) { 6 | this.url = this.form.getAttribute("action"); 7 | this.formButton = this.form.querySelector(config.button); 8 | this.init(); 9 | } 10 | } 11 | 12 | displayError() { 13 | this.form.innerHTML = this.config.erro; 14 | } 15 | 16 | displaySuccess() { 17 | this.form.innerHTML = this.config.sucesso; 18 | } 19 | 20 | getFormValues() { 21 | const formData = new FormData(); 22 | const fields = this.form.querySelectorAll("[name]"); 23 | fields.forEach(field => { 24 | const fieldName = field.getAttribute("name"); 25 | const fieldValue = field.value; 26 | formData.append(fieldName, fieldValue); 27 | }); 28 | return formData; 29 | } 30 | 31 | validateForm() { 32 | const fields = this.form.querySelectorAll("[required]"); 33 | let valido = true; 34 | fields.forEach(field => { 35 | if (valido) valido = !!field.value; 36 | }); 37 | return valido; 38 | } 39 | 40 | onSendForm(event) { 41 | event.preventDefault(); 42 | event.currentTarget.disabled = true; 43 | event.currentTarget.innerText = "Enviando..."; 44 | } 45 | 46 | sendForm(event) { 47 | if (this.validateForm()) { 48 | this.onSendForm(event); 49 | fetch(this.url, { 50 | method: 'POST', 51 | body: this.getFormValues(), 52 | }) 53 | .then(r => { 54 | if (!r.ok) throw Error(r.statusText); 55 | return r.text() 56 | }) 57 | .then(body => this.displaySuccess()) 58 | .catch(erro => { 59 | this.displayError() 60 | }); 61 | } 62 | } 63 | 64 | init() { 65 | this.sendForm = this.sendForm.bind(this); 66 | this.formButton.addEventListener("click", this.sendForm); 67 | } 68 | } --------------------------------------------------------------------------------