Thanks page not showing when submitting contact form

Hello, I recently started using Netlify to host my VueJS web app. I’m using netlify forms to manage my contact form. I have read the documentation and done exactly as specified in the docs, yet, the thanks page doesn’t show, and it doesn’t show either the custom thanks page I created, though it shows up on the Preview in the browser’s Network tab, also, I am receiving the e-mails perfectly fine. Any help would be much appreciated! You can check out my site here: www.abelpaz.com

Thanks in advance

:wave:t2: Howdy!

Cool site :slightly_smiling_face: love the code front-panel. :nerd_face:

I looked at the source then GET’d your site from CLI and I think I may have an idea of what’s going on here. I’ve never used Vue.js in particular but getting your site via curl reveals some things. For starters, it looks like you did indeed add a hidden form that Netlify can see and will register at build time - I see that from my direct curl as:

<form id='form' name='contact-form' class='contact__form wow rubberBand' action='/done/' method='post' hidden>

and from what I can tell, there’s actually no other HTML loaded statically outside of the content of that form - so your static index page is just

<body>
  <noscript>
    <strong>
      I'm sorry but this site doesn't work properly without JavaScript enabled :( Please enable it to
      continue.
    </strong>
  </noscript>
  <form id='form' name='contact-form' class='contact__form wow rubberBand' action='/done/' method='post' hidden>
    <!-- Tons of omitted form fields here -->
  </form>
  <div id=app></div>
  <script src=/js/chunk-vendors.e3ed9feb.js></script>
  <script src=/js/app.a83160b2.js></script>
</body>

Which makes sense given what Vue.js is.
Anyway, point being that Netlify did register your form and transform the data elements on <form> and you can see that they’re gone in the curl’d markup.

Now, contrast that with what’s in the DOM once your page is loaded (there’s a ton but here’s the form under your Contact page):

<form id="contact-form" name="contact-form" action="/done/" method="post" data-netlify="true"
  data-netlify-honeypot="bot-field" netlify="" class="contact__form wow rubberBand"
  style="visibility: visible; animation-name: rubberBand;"><input type="hidden" name="bot-field" value="contact-form">
  <h3>I'm a busy bee, yet I'll try to reply within 24h!</h3>
  <!-- etc.. omitted -->
</form>

and you should notice that this form doesn’t have any of the Netlify content omitted. It’s also worth noting that your original (‘static’) form is still in the DOM; it’s hidden and not nested within your app div but it’s there.

So all that said, I believe that your Vue code is probably rendering a new form dynamically and you’re trying to add the Netlify data tags to that form when you render it in Vue. Since that form is being rendered after the build step of your site (like, WAY after – rendering client-side on load), it’s too late for Netlify to hook into your code and add the required scripting to ‘wire up’ Netlify forms.

Just for doc references before I add my 2c advice:

Netlify main docs @ working with JS rendered forms: https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms
Vue-specific form rendering guide (I have not read this and it does seem a tad old, so YMMV): https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/?_ga=2.94074398.223128681.1587939174-987416321.1587793657

My 2c

I think you understand that you have to have a form visible at build-time so that Netlify can hook in with the correct watchers and data-bindings. Where I think you’re having an issue is that you’re building a new form dynamically on the front end and have expectations around it that don’t necessarily fit. Here’s what I’d recommend trying. Two options:

a)

Because you have a static form that Netlify saw and hooked into, you should actually be able to dynamically make another form (your ‘real’ contact form) and not add any of the Netlify-specific data components; just make sure that the action is the exact same, and that the name is the exact same.
E.g. because you already have

<form id='form' name='contact-form' class='contact__form wow rubberBand' action='/done/' method='post' hidden>

(which you don’t need classs for since it’s hidden btw :100:) - you can dynamically create a new / other form anywhere in your page via Vue that, as long as it also has action="/done/" and name="contact-form" and it should be able to send data up to your form submission box with any of the fields it contains. This is why you’re actually still receiving emails just fine. Because your extra Netlify tags on the dynamically-rendered form don’t actually matter - the important part was that you had a valid <form> tag at build-time, which had a name and action that exactly match a form you make dynamically at runtime. That’s it :smiley: (it can get a little trickier with CAPTCHA’s but the docs talk through that) — SO tl;dr: just remove your Netlify data-attributes from your dynamically generated form and add any fields you want there and you’ll be good to go.

b)

Alternatively, you could also (again, I haven’t actually used Vue before but vanilla js can do this so I presume it can) just use JS to move your root form element that Netlify configured but is hidden into the form spot you want in your markup. I did this myself in the DOM and the content isn’t far off. Guessing here, but you’ll probably need to bind a couple of the form components into Vue so that you don’t get the weird text happening, but I can’t much help with that. I’m basically recommending that you absorb a static element into Vue’s tree.

Honestly I think this would work but there’s just no need. Do option a :laughing:

Hope that helps!


Jon

Thanks for your message! I have tried what you said, leaving only the static form with netlify attributes and removing them from my dynamic form, same output. I have also tried to remove the static form from the index.html and leave only the dynamic form with the netlify attributes, same output! (and that’s why I don’t really understand why the need of a static form, dynamic one seems to hook fine with netlify all the time :thinking:) I still receive a 200 response and the emails on my gmail account… after removing the static one! I think its a problem with the routing rather than with what I’m doing with the form… I honestly don’t know why is not redirecting to thanks page, been all day here playing around with this… and no banana!

Here’s a screenshot as a proof that netlify is hooking fine my dynamic form:

I’m clearly missing something here… :roll_eyes:

1 Like

Hm. Well the part where it’s still submitting and sending emails is good!

I think the first time you do a site build with a static form, Netlify generates a POST handler on that action target, and even if you remove the static form in the future, that POST handler persists (although @fool might have to check me on that one) - which is why your dynamic form still sends emails even when you remove the static one (my guess)…

But as for the redirecting and such, I’m going to venture to say this is a Vue.js concern - Netlify is sending back the correct response and content so without being a Vue guru (Vue-ru?) I’m not sure I can help much. You could always inject a function in the form submit handler and post the form via fetch then manually change the pages after that but that’s a little heavy handed… my suggestion would be to really dig into how Vue.js handles form submission responses and/or page location changes?

You are very right my friend! I think I found the issue, I haven’t set the router after the ok response at submission! Here is a code snippet for those who could have the same issue in the future:

export default {
name: 'ContactComponent',
data: () => ({
  form: {
    name: '',
    email: '',
    subject: '',
    message: ''
  }
}),
methods: {
  encode(data: any) {
    return Object.keys(data).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&')
  },
  handleSubmit() {
    fetch('/', {
      method: 'post',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: this.encode({
        'form-name': 'contact-form',
        ...this.form
      })
    }).then(() => this.$router.push({ name: 'thanks.html'}))
    .catch(e => console.error(e))
  }
}

}

What a lovelly day I just had hitting this wall! :joy: Thanks for your messages, I’ve learn’t a buch of new stuff today! Will keep the static form just in case! No harm keeping it. Just a little one more… Recaptcha isn’t showing… I’m gonna have a look to Netlify docs!

1 Like

Nice! Glad that worked out :sunglasses: although I’d be curious if there’s a way you could use the location in the response from your fetch to drive which page to push into the router rather than hard-coding it to thanks.html – that way if you change your action in your form in the future, it actually does change where the form submit goes! :grin:

reCAPTCHAs are fun. If you’re doing a dynamic form you may have to setup the custom reCAPTCHA keys in your site ENV vars then render one yourself in your dynamic form using the custom public key you got. Also be wary that forms submitted without the reCAPTCHA being filled out will still redirect to your thanks page and act like all is well, but nothing will ever hit your forms panel in your web UI - not even the “spam” tab. They get fully discarded… so if you’re going to do it, make sure you’re client-side validating that the CAPTCHA is completed before processing your form submission.

All in all, Netlify’s forms protocols leverage Akismet’s spam protection really well and are flexible. I would genuinely recommend just trying your form out for a month or two without CAPTCHA and see how it goes. I doubt you’ll get any spam. Add a honeypot field if you’re really wary :stuck_out_tongue: CAPTCHA has impacts on load speed / performance too so keep an eye out.

Good luck!!!


Jon

1 Like

look at you both digging in to this problem and helping each other. We love to see that! Can we send (after covid) you both some stickers for this awesome collaboration on assisting each other?

2 Likes

Sure!! :clap: Send twice the amount of stickers to @jonsully he’s a netlify guru!

1 Like

Haha sure! I love stickers. Thanks @perry :grin:

1 Like