修改 Formspree 代码以将联系人响应发送到 email - HTML/CSS/JS

Question

I have the following form:

 /* Contact Form */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #0563bb; color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { opacity: 0.9; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index: 2; display: block; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: 1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top: 0; } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

 <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form: </p> </div> <div class="row"> <div class="column"> <form name="myform" action="https.//formspree.io/f/xdobkgny" method="POST" novalidate> <label for="firstname">First Name</label> <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.:" required> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.." required> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate.:" style="height:170px" required></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>

This form is sending responses to the desired email, however I want to change the redirection page to thankyou.html instead of the Formspree redirection page. How would I modify this following JS code? This JS code also has some other information such as error messages...etc but I already got that covered so can I just remove that part? Essentially, the only thing I want to change is redirection on the submission and dont want any errors or any other info. The only reason I am using the JS code provided by Formspree is to change the redirection and nothing else. How would this be possible? I want to remove text such as Thanks for your submission! and Oops...... which is provided in the following JS code since I already have that covered with my own js code in my file.

JS code:

var form = document.getElementById("my-form");
    
    async function handleSubmit(event) {
      event.preventDefault();
      var status = document.getElementById("my-form-status");
      var data = new FormData(event.target);
      fetch(event.target.action, {
        method: form.method,
        body: data,
        headers: {
            'Accept': 'application/json'
        }
      }).then(response => {
        status.innerHTML = "Thanks for your submission!";
        form.reset()
      }).catch(error => {
        status.innerHTML = "Oops! There was a problem submitting your form"
      });
    }
    form.addEventListener("submit", handleSubmit)

Update (After Pufferfish Answer)

https://watch.screencastify.com/v/BSkuGitl5ACHDWEvGziM

Answer 1

To redirect using JavaScript, you can use window.location = <URL> . If you want this to happen after the fetch has happened, no matter, the outcome, you can pass a function to the .finally() method:

var form = document.getElementById("my-form");

async function handleSubmit(event) {
      event.preventDefault();
      var data = new FormData(event.target);
      fetch(event.target.action, {
        method: form.method,
        body: data,
        headers: {
            'Accept': 'application/json'
        }
      }).finally(() => {
        window.location = "/thankyou.html";
      });
}
form.addEventListener("submit", handleSubmit)