Netlify forms in Qwik app not showing submission

Hey guys,

I have recently deployed a Qwik website to Netlify: stellar-mandazi-3b108b

I wanted to use it as a private homepage/portfolio. I added a contact page and wanted to allow people to submit some contact info - a pretty basic form :slight_smile:

I followed all the guides - activated the form for the page, added a static html file with only the form, added the hidden form-name to the SSR form - and my form is now found in the post-processing step, but form submissions do not show up.

Things I checked:

  • does the website contain a form when using curl command? Yes

  • Is the form found in post processing? Yes

  • does the submitted data contain all information? Yes
    image

  • was it caught in spam folder? No

The code for the website can be found here: GitHub - Dominik-Reinert/home
Checkout the public folder for the plain html form needed for SSR forms and the /pages/contact/index.tsx for the proper form

The deployed form can be found here: https://stellar-mandazi-3b108b.netlify.app/

I am really running out of ideas. Any help would be greatly appreciated :pray:

Form submission need to go to a path that isn’t SSRed—it must exist as a file in the deploy. So in your case, you could use the netlify-contact-form file as the submit point for the real form.

Thanks a lot for your suggestion, but I do not understand, what a submit point is.

Do I put it into the fetch call as endpoint? Like fetch("/netlify-contact-form" ... ) ? because that gives me a 404.

What do you mean as submit point? What do you mean with needs to go to a path, what is a path in this context? Can you give me an example please?

In case you mean, that I cannot use server side rendered forms, I am rather sure that this should be possible, as the Qwik is building the pages at build time. If they were javascript based, the curl command would not find the element

Yes, that is what I meant. That file is deployed, but because Qwik uses Netlify Edge Functions, it prevents access to it (or so it seems.)

I meant that it needs to POST to an actual file, one that isn’t served by SSR (or the Qwik edge function.) An example is the robots.txt or the favicon.svg the framework lets through unhindered. You could try using one of these in the fetch call (it might just work.)

No, I’m not saying you cannot use an SSR form—or client-side rendered for that matter as many frameworks do. I’m saying that when submitting the form, the point it is submitted to *(e.g. fetch('/submit-point'...) cannot be served via SSR or CSR (as above.)

Unfortunately the Qwik docs offer no information about using Netlify Forms with the framework. You might need to ask the Qwik community about this topic.

Appears there are numerous undocumented configuration options in many parts of Qwik. One is excludedPath in the Netlify edge-adapter.

In the netlify-edge/vite.config.ts is the option

plugins: [netlifyEdgeAdapter()],

In this you can put the excludedPath option with the netlify-contact-form file e.g.

plugins: [netlifyEdgeAdapter({ excludedPath: "/netlify-contact-form" })],

This would then allow you to submit the form to that path e.g.

fetch('/netlify-contact-form' {
  method: "POST",
  // and the rest
})
1 Like

This made it work! Thanks a lot!

1 Like