Form redirecting to Netlify's default page

Support
,
1

Site name: shiny-treacle-0b1a79.netlify.app

When testing website locally, the form redirects you to the correct html page I have set, however when live, the form redirects to Netlify’s default page. I have tried changing the action to “/sent” “/sent.html” “sent.html” “sent” “/sent/” and “/sent/html/”. None of the variations fixed the issue.

My directory looks like this:
index.html
contact.html
sent.html

Here is my contact.html code

<main>
  <div class ="contact">
    <div class="info">
      <h2>Get in Touch</h2>
      <p>Interested in receiving a personalized quote? Don't hesitate to reach out via phone call, text, or email to kickstart the journey toward your new website. We prioritize prompt responses and strive to get back to you swiftly, typically within the same day or by the following business day. We look forward to connecting with you and discussing your project in detail.</p>
      <div class="contact-info">
        <h5>EMAIL</h5>
        <p>...</p>
        <h5>PHONE</h5>
        <p>...</p>
        <h5>LINKED IN</h5>
        <p>...</a></p>
        <h5>FACEBOOK</h5>
        <p><a href="#">lumina design co.</a></p>
      </div>
    </div>
    <div class="form">
      <!-- <form action="https://formsubmit.co/giannagoodpaster@email.com" method="POST"> -->
        <!-- <input type="hidden" name="_subject" value="New Message from Lumina"> -->
      <form name="contact" method="POST" data-netlify="true" onSubmit="submit"
            data-netlify-honeypot="bot-field" action="/sent.html"
      > 
      <input name="bot-field" type="hidden">
        <input type="email" name="email" placeholder="Email Address" required>
        <input type="text" name="name" placeholder="Name" required>
        <textarea name="message" placeholder="Write your message here." required></textarea>
        <button type="submit">SEND</button>
    </form>
        </div>
</main>

My sent.html page is almost identical to the contact.html page, but I changed out the button text and input placeholder text, and removed the action from the form.

2

Hi @giannagoodpaster, welcome and thanks for the post.
Remove the onSubmit handler on the form to see if it works and set the action to /sent
Example:
action="/sent"

If the above does not work kindly read the Netlify documentation page below if you have not done so already in order to learn how to set a custom success page.

Thanks.

3

I had already gone through the documentation. I tried what you have suggested and it still is being sent to netlifys default message, however the URL ends in /sent. The sent page html looks almost identical to the contact page so I’m not sure what’s happening here.

form name=“contact” method=“POST” data-netlify=“true” data-netlify-honeypot=“bot-field” action=“/sent”

Screenshot 2023-07-06 085704
Screenshot 2023-07-06 0857042505×1362 58.1 KB

4

Hi @giannagoodpaster, thanks for the feedback.
Kindly make sure you have a sent.html file in your project root folder.
If you have verified your project root folder contains the sent.html file also make sure your current deploy is updated with the changes you made.

If the above does not work, kindly share a link to your repository is possible for me to help with the debugging.

Thanks.

5

I do have that file in my root folder. Here is my github repository: GitHub - gianna-goodpaster/luminawebco.github.io

6

Hi @giannagoodpaster, thanks for sharing.
For some strange reason the regular custom success page does not work with your site when you use the action attribute in the HTML.

However when you use the JavaScript method below it works.

First of all add an id to your form. In my example I used contact-form

 <form  
        id="contact-form"
        name="contact" 
        method="POST" 
        data-netlify="true" 
        data-netlify-honeypot="bot-field"
>

Secondly in your script.js file, target the contact form and then add an event listener with a submit handler function.

const contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", (e) => {
  e.preventDefault();
  let formData = new FormData(contactForm);
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => location.assign("/sent"))
    .catch((error) => alert(error));
});

Note that location.assign in the .then function navigates the page to the URL you specify.

Let me know the outcome after you make the changes and redeploy.

Thanks.

7

@giannagoodpaster, you’ve a duplicate version of the form on the sent.html page. You cannot have 2 forms with the same name. If you either change the name of the form on that page OR add the action attribute to the form on sent.html too, it would work.