`action` attribute within forms getting ignored

Support
, ,
#1

Hey,

I’ve a form that looks like this

    <form name="subscribe" method="POST" action="/done.html" data-netlify="true">
        <input type="email" name="email" placeholder="Enter email">
        <button type="submit">
            Subscribe
        </button>
    </form>

But on submit, the browser gets redirected to /thanks instead of /done.html.

Could you please tell me what could be amiss here?

Thanks!

#2

Hiya, sorry you are having trouble getting your forms to work.

This Common Issue is the first port of call to debug any forms issues.

If you are still having problems, please let us know, and we’ll take another look :slight_smile:

#3

Hey Perry, thanks for the response.

After some debugging, I figured out that Netlify seems to be discarding the trailing .html from the value of the action attribute. Now that I know this, I can work around this issue.

But for future users, it’d be great if you could update/document this behaviour.

Thanks! :slight_smile:

#4

glad it’s working now, @v1shnu! I’ll check with our documentation team to make sure this is expected behaviour.

#6

Thanks for your patience - it turns out that is intended, even if not a well known feature. Sorry it tripped you up, and our documentation engineers are working on figuring out the right place to put that info into our docs.

#7

I am also having this issue. The webpage in question is up at https://abing.netlify.app/contact-us

My intended behavior is that when the user submits the form, they redirect to https://abing.netlify.app/contact-us/success, which is just a 200 redirect to https://abing.netlify.app/contact-us. Then, javascript will look at the URL and display a modal (e.g. “your message has been received successfully”).

This was working for me a half-hour ago, but then I decided to change from /contact-form-success to /contact-us/success, which I thought looked better.

My setup is as follows:

/contact-us.html (all post-processing is enabled, so the .html is truncated)

<form method="POST" data-netlify="true" class="needs-validation" id="abington-manor-contact-form" onsubmit="return onFormSubmit(event);" action="/contact-us/success" novalidate>
    ...
    <input type="hidden" name="form-name" value="abington-manor-contact-form"/>
</form>

/netlify.toml

...
[[redirects]]
  from = "/contact"
  to = "/contact-us"
  status = 301
  force = true
[[redirects]]
  from = "/contact-us/success"
  to = "/contact-us"
  status = 200
  force = true
...

Am I doing something wrong? When I submit the form, I get Netlify’s success page instead of being redirected to https://abing.netlify.app/contact-us/success

#8

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues.

If you are still having problems, please let us know!

#9

Hi Perry,

Thank you for your help, but my form is unfortunately still not working.

The oddest thing happens - my URL bar does indeed show that I have been redirected to /contact-us/success upon submission, but Netlify’s default Thank You page is rendered, rather than my website.

As for the link you posted, I believe that I am already doing what it suggests (if I’m not mistaken):

Thank-you page

  • If you want to show your own content after the POST rather than our generic thank-you page, make sure you include an action=/path parameter in your form definition. ( /path should be the page you want to display - might be “/” or “/thank-you/english.html” - must be either ‘thank-you’ to use our automatic thank you page, or a path starting with / - but NOT a complete URL starting with http(s) ). While you wouldn’t seem to need an action for AJAX forms - it’s how we know what to show after submission, so you do need one unless you’d like us to show our thank-you page. If this path doesn’t exist, we will use our own standard thank-you page.

Again, my form HTML opening tag is as follows:

<form method="POST" data-netlify="true" class="needs-validation" id="abington-manor-contact-form" onsubmit="return onFormSubmit(event);" action="/contact-us/success" novalidate>

Thank you so much for your help! It is greatly appreciated.

Best,
Raj

#10

As far as I can tell you have no page at /contact-us/success - so it’s a nonsense path to our system, thus we show our default thank-you page.

I see a /contact-us page, but nothing at /contact-us/success in your most recent deploy.

Could you please try using an existing path within your deploy, to see if it works better?

#11

/contact-us/success

@fool correct however my netlify.toml file specifies the following redirect:

...
[[redirects]]
  from = "/contact-us/success"
  to = "/contact-us"
  status = 200
  force = true
...

Just to reiterate, the reason I need this second URL is because javascript on the contact-us.html page detects that the action URL has the suffix /success and displays a “success” modal accordingly.

/contact-us#success

As I was writing this post, I decided to try the one thing that had worked for me in the past, but at the time of my original post, was broken: redirecting to /contact-us#success. That now works, so I’m happy! /contact-us/success would be ideal, though, if I may be so bold.

So, the question is now: Is redirect functionality supported by Netlify Forms? I.e. even though /contact-us/success is not a “real” page per se, it is also not a 404 error and instead redirects to a real page.

If this functionality is not currently officially supported, might it possibly be in the future?

#14

The requirement for the path in the ‘action’ attribute is that it needs to exist in your deploy. If you add a /contact-us/success path to your site, then that action should work. It can’t be a path that will be redirected. Is there a reason you can’t add the files to your deploy rather than a redirect rule?

#15

In short, no, not particularly.

I would like it to be the same exact page as the form’s, if possible, because the user can dismiss the modal, and JS makes the address bar return to /contact-us (removes /success or #success from the end).

So, in this case that users remain on the same page after submission, it seems kind of inefficient to have two copies of the same file at two different locations. Couldn’t this cause some problems, e.g. with Netlify Forms seeing my site having two forms, now, instead of one? Can Netlify “see” that they are identical and only store one copy of the page to serve as necessary?

Perhaps I can just have the success page be a full-page iFrame w/ a modal, if necessary?

Right now, the best solution to me seems to be using the same page with anchors, I guess.

Thank you for your help!
Raj

#16

Hello, @v1shnu
May I ask what did you do to work around this issue? I’m facing the same issue and the closest thing to a solution I could find was your answer.