Skip to content

Commit

Permalink
Merge pull request #46 from oorjitchowdhary/contact
Browse files Browse the repository at this point in the history
Contact form
  • Loading branch information
iamHrithikRaj authored Jul 27, 2021
2 parents 3f58916 + 148fe35 commit a5aa7a9
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 2 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ _site
.jekyll-cache
.jekyll-metadata
vendor
.bundle
.bundle
node_modules
.vscode
32 changes: 32 additions & 0 deletions _includes/contact.html
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions _includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion _includes/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
1 change: 1 addition & 0 deletions _sass/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import "footer";
@import "experience";
@import "project";
@import "contact";

.card-container {
display: grid;
Expand Down
40 changes: 40 additions & 0 deletions _sass/contact.scss
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down

0 comments on commit a5aa7a9

Please sign in to comment.