├── README.md ├── index.html ├── main.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Firebase Contact Form 2 | 3 | Mobile first, responsive contact from that sends data to a firebase database -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Acme Web Design 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Acme Web Design

15 |
16 |
17 |

Acme Web Design

18 |
    19 |
  • 44 Something st
    • 20 |
  • (555) 555-5555
    • 21 |
  • test@acme.test
    • 22 |
23 |
24 |
25 |

Email Us

26 |
Your message has been sent
27 |
28 |

29 | 30 | 31 |

32 |

33 | 34 | 35 |

36 |

37 | 38 | 39 |

40 |

41 | 42 | 43 |

44 |

45 | 46 | 47 |

48 |

49 | 50 |

51 |
52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // Initialize Firebase (ADD YOUR OWN DATA) 2 | var config = { 3 | apiKey: "xxxxx", 4 | authDomain: "xxxxx", 5 | databaseURL: "xxxxx", 6 | projectId: "xxxxx", 7 | storageBucket: "xxxxx", 8 | messagingSenderId: "xxxxx" 9 | }; 10 | firebase.initializeApp(config); 11 | 12 | // Reference messages collection 13 | var messagesRef = firebase.database().ref('messages'); 14 | 15 | // Listen for form submit 16 | document.getElementById('contactForm').addEventListener('submit', submitForm); 17 | 18 | // Submit form 19 | function submitForm(e){ 20 | e.preventDefault(); 21 | 22 | // Get values 23 | var name = getInputVal('name'); 24 | var company = getInputVal('company'); 25 | var email = getInputVal('email'); 26 | var phone = getInputVal('phone'); 27 | var message = getInputVal('message'); 28 | 29 | // Save message 30 | saveMessage(name, company, email, phone, message); 31 | 32 | // Show alert 33 | document.querySelector('.alert').style.display = 'block'; 34 | 35 | // Hide alert after 3 seconds 36 | setTimeout(function(){ 37 | document.querySelector('.alert').style.display = 'none'; 38 | },3000); 39 | 40 | // Clear form 41 | document.getElementById('contactForm').reset(); 42 | } 43 | 44 | // Function to get get form values 45 | function getInputVal(id){ 46 | return document.getElementById(id).value; 47 | } 48 | 49 | // Save message to firebase 50 | function saveMessage(name, company, email, phone, message){ 51 | var newMessageRef = messagesRef.push(); 52 | newMessageRef.set({ 53 | name: name, 54 | company:company, 55 | email:email, 56 | phone:phone, 57 | message:message 58 | }); 59 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background:#92bde7; 7 | color:#485e74; 8 | line-height:1.6; 9 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 10 | padding:1em; 11 | } 12 | 13 | .container{ 14 | max-width:1170px; 15 | margin-left:auto; 16 | margin-right:auto; 17 | padding:1em; 18 | } 19 | 20 | ul{ 21 | list-style: none; 22 | padding:0; 23 | } 24 | 25 | .brand{ 26 | text-align: center; 27 | } 28 | 29 | .brand span{ 30 | color:#fff; 31 | } 32 | 33 | .wrapper{ 34 | box-shadow: 0 0 20px 0 rgba(72,94,116,0.7); 35 | } 36 | 37 | .wrapper > *{ 38 | padding: 1em; 39 | } 40 | 41 | .company-info{ 42 | background:#c9e6ff; 43 | } 44 | 45 | .company-info h3, .company-info ul{ 46 | text-align: center; 47 | margin:0 0 1rem 0; 48 | } 49 | 50 | .contact{ 51 | background:#f9feff; 52 | } 53 | 54 | /* FORM STYLES */ 55 | .contact form{ 56 | display: grid; 57 | grid-template-columns: 1fr 1fr; 58 | grid-gap:20px; 59 | } 60 | 61 | .contact form label{ 62 | display:block; 63 | } 64 | 65 | .contact form p{ 66 | margin:0; 67 | } 68 | 69 | .contact form .full{ 70 | grid-column: 1 / 3; 71 | } 72 | 73 | .contact form button, .contact form input, .contact form textarea{ 74 | width:100%; 75 | padding:1em; 76 | border:1px solid #c9e6ff; 77 | } 78 | 79 | .contact form button{ 80 | background:#c9e6ff; 81 | border:0; 82 | text-transform: uppercase; 83 | } 84 | 85 | .contact form button:hover,.contact form button:focus{ 86 | background:#92bde7; 87 | color:#fff; 88 | outline:0; 89 | transition: background-color 2s ease-out; 90 | } 91 | 92 | .alert{ 93 | text-align: center; 94 | padding:10px; 95 | background:#79c879; 96 | color:#fff; 97 | margin-bottom:10px; 98 | display:none; 99 | } 100 | 101 | /* LARGE SCREENS */ 102 | @media(min-width:700px){ 103 | .wrapper{ 104 | display: grid; 105 | grid-template-columns: 1fr 2fr; 106 | } 107 | 108 | .wrapper > *{ 109 | padding:2em; 110 | } 111 | 112 | .company-info h3, .company-info ul, .brand{ 113 | text-align: left; 114 | } 115 | } --------------------------------------------------------------------------------