Note: My repo name shows an error since I already have a repository named
CharalambosIoannou.github.io. Also, the repository must be set to public.
In my case I have created my portfolio website as can be seen from the image below.
Step 3: Navigate to formspree
1) In formspree click the sign-up button in the top right corner and enter your email address along with a password.
2) Verify your email
3) Press the
+ button and enter a form name. The email input box should be auto filled with the email address used to sign up to fromspree.
4) You can then copy paste the code provided by formspree into your website.
I have altered this code slightly to allow visitors to add a message as well. The code used is:
<div id="contact"> <h2>Get in Touch</h2> <div id="contact-form"> <form action="https://formspree.io/mpzyqdng" method="POST"> <input type="hidden" name="_subject" value="Contact request from personal website" /> <input type="email" name="_replyto" placeholder="Your email" required> <textarea name="message" placeholder="Type your message" required></textarea> <button type="submit">Send</button> </form> </div> </div>
And this code produces the following result:
Step 4: Push your code to GitHub and navigate to your website by typing
https://<username>.github.io/ in the URL.
If you cannot see your website after some time has passed then go to your repository, click on settings, scroll down until you see a section named "GitHub Pages" and click on the None dropdown in the Source subsection and set it to master branch.
You know if your website is published if you see this message in the "GitHub Pages" section:
If you want to test your form, then go to your website and fill out your form.
When clicking the send button we get redirected and have to authenticate that we are not a robot 🤖. When ticking the box, soon enough you will receive an email with all the details the sender has provided.
I hope you find this easy and useful.
P/S: This is my first post ever. Hope you enjoyed it 😄.