- The URL for your live form as you want visitors to use it: Sand Hill Property Company | Contact
- The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”): Same as above.
- The form name that you’ve set and that shows in our UI: contact-form
- Any errors or logs from the Netlify build logs, dashboard or browser developer console: Zero errors.
- Description of anything you have tried that did or didn’t help or make things better/worse: Read through this response - and this thread. Nothing has resolved the issue thus far.
Entire relevant component:
import { useRef, useEffect } from 'react';
import styles from '../styles/contact.module.css';
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
export default function Contact(props) {
useEffect(() => {
document
.querySelector("form")
.addEventListener("submit", handleSubmit);
var tl = gsap.timeline()
tl.fromTo('main', {opacity:0}, { opacity:1, delay: 0.5, duration: 1});
var sections = gsap.utils.toArray('.fade');
sections.forEach((section) => {
gsap.to(section, { autoAlpha: 1, scrollTrigger: {
trigger: section,
start: "+=0 80%",
scrub: false,
markers: false,
toggleActions: "play reverse play reverse"
}
});
})
}, [])
const handleSubmit = (e) => {
e.preventDefault();
let myForm = document.getElementById("contact-form");
let formData = new FormData(myForm);
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
})
.then(() => console.log('success'))
.then(() => window.location = '/thank-you/')
.catch((error) => alert(error));
};
return (
<>
<section className={styles.contact}>
<div className="container">
<h1 className="title green">Contact Us</h1>
</div>
<div className="container">
<div className={styles.contactContainer}>
<div className={styles.left}>
<p className="sans-serif-regular body-copy green">
Sand Hill Property Company<br/>
2600 El Camino Real Suite 410<br/>
Palo Alto, CA 94306
</p>
<p>
<a href="tel:16503441500" className="sans-serif-light"><span className="orange">T:</span> <span className="green">650 344 1500</span></a><br/>
<a href="fax:1650344065" className="sans-serif-light"><span className="orange">F:</span> <span className="green">650 344 065</span></a>
</p>
<p>
<a className="sans-serif-light green body-copy">info@shpco.com</a>
</p>
</div>
<div className={styles['form-container']}>
<form name="contact-form" id="contact-form" method="POST" data-netlify="true">
<p>
<label><input className={styles.input} placeholder="First Name *" required type="text" name="first-name" /></label>
</p>
<p>
<label><input className={styles.input} placeholder="Last Name *" required type="text" name="last-name" /></label>
</p>
<p>
<label><input className={styles.input} placeholder="Email *" required type="email" name="email" /></label>
</p>
<p>
<label><textarea className={ styles.textarea} placeholder="Message *" required name="message"></textarea></label>
</p>
<p>
<button className={styles.submitBtn} type="submit">Submit</button>
</p>
</form>
</div>
</div>
</div>
</section>
</>
)
}
