Alt Text

Welcome to part-8 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

In this part we will start with our page transition, which will occur when we navigate to a different page.

For this we will be again using an awesome gatsby plugin and it is gatsby-plugin-transition-link. The doc link can be found here.

Now, as per the docs we need to npm install the plugin first. So, head over to your terminal and close gatsby develop if it is running. After that install the plugin through the terminal.

npm installnpm install

Then open gatsby-config.js and add the plugin.

Gatsby ConfigGatsby Config

We also need to install one more package to start using Transition link. This package will be used for Anilink, which is a part of Transition link.

AnilinkAnilink

Then start the development server by gatsby develop. After that we will start replacing our Link with AniLink. So, head over to Navbar.js and update it. Notice, that we are using a prop paintDrip and a hex code. These are used to customize the transition. We can use other props also as per their docs.

NavbarNavbar

Next, hear over to Footer.js and update all Links to AniLink.

FooterFooter

There is a Link in index.js also. So, let’s update it.

index.jsindex.js

Let’s also update the Link in 404.js file.

404.js404.js

Now, if you move to any page by clicking on the link, you will get the below transition animation.

Transition animationTransition animation

Next, we will add Contact form to our project. So, head over to your code editor and add a file contact.module.css inside the css folder. The content for the same can be found from github link for the project.

contact.module.csscontact.module.css

Next, create a folder Contact inside components folder and file Contact.js inside it. It is a simple form with three fields for name, email and message.

import React from "react"
import Title from "../Title"
import styles from "../../css/contact.module.css"
const Contact = () => {
  return (
    <section className={styles.contact}>
      <Title title="contact" subtitle="us" />
      <div className={styles.center}>
        <form className={styles.form}>
          <div>
            <label htmlFor="name">name</label>
            <input
              type="text"
              name="name"
              id="name"
              className={styles.formControl}
              placeholder="john smith"
            />
          </div>
          <div>
            <label htmlFor="email">email</label>
            <input
              type="email"
              name="email"
              id="email"
              className={styles.formControl}
              placeholder="[email@email.com](mailto:email@email.com)"
            />
          </div>
          <div>
            <label htmlFor="message">message</label>
            <textarea
              name="message"
              id="message"
              rows="10"
              className={styles.formControl}
              placeholder="hello there"
            />
          </div>
          <div>
            <input
              type="submit"
              value="submit here"
              className={styles.submit}
            />
          </div>
        </form>
      </div>
    </section>
  )
}

export default Contact

Next, we will add this Contact component to the contact.js page.

contact.jscontact.js

This will show our form on the Contact page.

Contact UsContact Us

We will be using an service call formspree to get user data from this form. Once you register and verify your email, you will get this screen.

Create FormCreate Form

Once you click on CREATE FORM button above, an pop-up will ask to provide a name for your form. Add the name and click on CREATE FORM.

Pop-upPop-up

The next page will show the setup instructions.

Setup instructionsSetup instructions

As shown above we need to add action and method to our form. So, head over to Contact.js and add the same.

Form in ContactForm in Contact

Now, it’s time to test our form. We can do the same on localhost also. So, head over to the browser and give add some values in all fields, and hit SUBMIT HERE.

Submit hereSubmit here

Next, you will be taken to the famous I’m not a robot checkbox.

Not a robotNot a robot

After the verification, it will open this page. From here we can move back to our site.

ThanksThanks

Now, once i login to my gmail i can see the form submitted mail.

Form submittedForm submitted

We are done with this part, so i had pushed the code to github. It will also start my automatic deployment to netlify. So, it is time to check the form capabilities on the internet also.

Once it is deployed, we can head over to https://amazinghampi.netlify.com/contact and submit a form.

It will take us through the same above process and i get the mail in my gmail.

From internetFrom internet

This completes part-8 of the series. You can find the code for the same in this link.

This post is also available on DEV.