Merge pull request #46 from oorjitchowdhary/contact

Contact form
iamHrithikRaj · Jul 27, 2021 · a5aa7a9 · a5aa7a9
2 parents 3f58916 + 148fe35
commit a5aa7a9
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
-.bundle
+.bundle
+node_modules
+.vscode
diff --git a/_includes/contact.html b/_includes/contact.html
@@ -0,0 +1,32 @@
+<h2 id="contact" class="section-heading">Contact</h2>
+<div class="container">
+  <form
+    id="contactform"
+    action="https://formspree.io/f/YOUR_FORM_ID"
+    method="POST"
+    onsubmit="showToast()"
+  >
+    <div class="form-group">
+      <input type="text" placeholder="Your name" name="name" required />
+      <input type="email" placeholder="Your email" name="_replyto" required />
+    </div>
+    <div class="form-group">
+      <textarea name="message" placeholder="Your message" required></textarea>
+    </div>
+    <div class="button-group">
+      <button type="submit" class="btn btn-warning">Submit</button>
+    </div>
+  </form>
+</div>
+
+<script>
+  const notyf = new Notyf({ position: { x: "right", y: "top" } });
+  const contactForm = document.getElementById("contactform");
+
+  const showToast = () => {
+    notyf.success("Message sent successfully!");
+    contactform.reset();
+  };
+
+  contactForm.addEventListener("submit", (e) => e.preventDefault());
+</script>
diff --git a/_includes/header.html b/_includes/header.html
@@ -26,6 +26,9 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
         integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
+
     <link lang='sass' rel="stylesheet" href="/assets/css/main.css">
     <link rel='icon' href='/assets/img/favicon.ico' type='image/x-icon' />
     <title>{{ site.title }}</title>

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -20,9 +20,13 @@
               <a href="#experience" class="nav-link">Work Experience</a>
           </li>
 
-          <li class="nav-item">
+          <li class="nav-item mr-3">
               <a href="#education" class="nav-link">Education</a>
           </li>
+
+          <li class="nav-item">
+            <a href="#contact" class="nav-link">Contact</a>
+          </li>
       </ul>
     </div>
 

diff --git a/_sass/all.scss b/_sass/all.scss
@@ -7,6 +7,7 @@
 @import "footer";
 @import "experience";
 @import "project";
+@import "contact";
 
 .card-container {
   display: grid;

diff --git a/_sass/contact.scss b/_sass/contact.scss
@@ -0,0 +1,40 @@
+.container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    text-align: center;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin: 0 16%;
+}
+
+.form-group input {
+    width: 48%;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 6px 10px;
+    margin: 0 auto;
+}
+
+textarea {
+    width: 100%;
+    height: 20vh;
+    margin: 1vh;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 6px 10px;
+    resize: none;
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: left;
+    margin: 0 16%;
+    padding: 6px 10px;
+}
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   <body>
     {% include navbar.html %} {% include profile.html %} {% include
     projects.html %} {% include experience.html %} {% include education.html %}
+    {% include contact.html %}
 
     <div class="switch">
       <input type="checkbox" id="switch-input" name="toggle" />