updating form to redirect to thank you page when complete

src/pages/adoption/adoption-application.en.js

@@ -3,6 +3,7 @@ import Header from '../../components/header';
 import '../../sass/styles.scss';
 import Footer from '../../components/footer';
 import Volunteer from '../../components/volunteer';
+import { navigate } from 'gatsby';
 
 
 const AdoptionApplication = () => {
@@ -40,9 +41,7 @@ const AdoptionApplication = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            document.querySelector('.success').innerText =
-                "Thank you for reaching out to us, we'd get back to you shortly.";
-                document.getElementById('success').scrollIntoView();
+            navigate("/en/thank-you/");
             // Clear form fields
             setName('');
             setEmail('');

src/pages/adoption/adoption-application.fr.js

@@ -3,6 +3,7 @@ import Header from '../../components/fr/header';
 import '../../sass/styles.scss';
 import Footer from '../../components/fr/footer';
 import Volunteer from '../../components/volunteer';
+import { navigate } from 'gatsby';
 
 
 const AdoptionApplication = () => {
@@ -40,9 +41,7 @@ const AdoptionApplication = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            document.querySelector('.success').innerText =
-                "Thank you for reaching out to us, we'd get back to you shortly.";
-                document.getElementById('success').scrollIntoView();
+            navigate("/fr/thank-you/");
             // Clear form fields
             setName('');
             setEmail('');

src/pages/contact.en.js

@@ -3,6 +3,7 @@ import Header from '../components/header';
 import '../sass/styles.scss';
 import Footer from "../components/footer";
 import Adopt from "../components/adopt";
+import { navigate } from 'gatsby';
 
 
 const Contact = () => {
@@ -19,9 +20,10 @@ const Contact = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            document.querySelector('.success').innerText =
-                "Thank you for reaching out to us, we will get back to you shortly.";
-                document.getElementById('success').scrollIntoView();
+            // document.querySelector('.success').innerText =
+            //     "Thank you for reaching out to us, we will get back to you shortly.";
+            //     document.getElementById('success').scrollIntoView();
+                navigate("/en/thank-you/");
             // Clear form fields
             setName('');
             setEmail('');

src/pages/contact.fr.js

@@ -3,6 +3,7 @@ import Header from '../components/fr/header';
 import '../sass/styles.scss';
 import Footer from '../components/fr/footer';
 import Adopt from '../components/fr/adopt';
+import { navigate } from 'gatsby';
 
 
 const Contact = () => {
@@ -19,9 +20,7 @@ const Contact = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            document.querySelector('.success').innerText =
-                "Merci de nous avoir contactés, nous vous répondrons sous peu.";
-                document.getElementById('success').scrollIntoView();
+            navigate("/fr/thank-you/");
             // Clear form fields
             setName('');
             setEmail('');

src/pages/fosters/foster-application.en.js

@@ -3,6 +3,7 @@ import Header from '../../components/header';
 import '../../sass/styles.scss';
 import Footer from '../../components/footer';
 import Volunteer from '../../components/volunteer';
+import { navigate } from 'gatsby';
 
 
 const FosterApplication = () => {
@@ -51,9 +52,7 @@ const FosterApplication = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            document.querySelector('.success').innerText =
-                "Thank you for reaching out to us, we'd get back to you shortly.";
-                document.getElementById('success').scrollIntoView();
+            navigate("/en/thank-you/");
             // Clear form fields
             setName('');
             setEmail('');

src/pages/fosters/foster-application.fr.js

@@ -3,6 +3,7 @@ import Header from '../../components/fr/header';
 import '../../sass/styles.scss';
 import Footer from '../../components/fr/footer';
 import Volunteer from '../../components/fr/volunteer';
+import { navigate } from 'gatsby';
 
 
 const FosterApplication = () => {
@@ -39,8 +40,6 @@ const FosterApplication = () => {
   const [acknowledge, setAcknowledge] = useState("");
   const [transport, setTranport] = useState("");
 
-
-
   const handleSubmit = e => {
     e.preventDefault()
     const myForm = e.target;
@@ -51,9 +50,7 @@ const FosterApplication = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            document.querySelector('.success').innerText =
-                "Merci de nous avoir contactés, nous vous répondrons sous peu.";
-                document.getElementById('success').scrollIntoView();
+            navigate("/fr/thank-you/");
             // Clear form fields
             setName('');
             setEmail('');

src/pages/index.fr.js

@@ -114,4 +114,4 @@ const IndexPage = () => {
 export default IndexPage
 
 
-export const Head = () => <title>Home Page</title>
+export const Head = () => <title>Page d'accueil</title>

src/pages/thank-you.en.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import Header from "../components/header";
+import Footer from "../components/footer";
+import Volunteer from "../components/volunteer";
+
+
+const Thankyou = () => {
+  return (
+    <main>
+        <Header />
+        <div className="container thank-you">
+            <h1>Thank You for reaching out to us</h1>
+            <p>We will get back to you shortly.</p>
+        </div>
+        <section className="volunteers">
+            <Volunteer />
+        </section>
+        <Footer />
+
+    </main>
+  )
+}
+
+export default Thankyou
+
+export const Head = () => <title>Thank You</title>

src/pages/thank-you.fr.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import Header from "../components/fr/header";
+import Footer from "../components/fr/footer";
+import Volunteer from "../components/fr/volunteer";
+
+
+const Thankyou = () => {
+  return (
+    <main>
+        <Header />
+        <div className="container thank-you">
+            <h1>Merci de nous avoir contactés</h1>
+            <p>Nous vous répondrons sous peu.</p>
+        </div>
+        <section className="volunteers">
+            <Volunteer />
+        </section>
+        <Footer />
+
+    </main>
+  )
+}
+
+export default Thankyou
+
+export const Head = () => <title>Merci</title>

src/sass/pages/forms.scss

@@ -111,4 +111,7 @@
     button {
         margin-left: 0 !important;
     }
+}
+.thank-you {
+ padding-bottom: 40px;
 }