Form Submissions not working

Hey! I just deployed this site for a client of mine and am having some issues with the form (vidahealing.net).

When testing on the live site some forms were submitted initially and then stopped working all together, with no success msg and not populating in the form submissions dashboard (have check both verified and spam folders). See pic attached for the code. Also having a bug with the form CSS not carrying over from production to deployment, but shouldn’t be a netlify issue.

I have also already checked out ([Support Guide] Form problems, form debugging, 404 when submitting) and #Netlify-support:support-guides // netlify form docs…but no joy

Hiya @shawnmarcotte :wave:t2:

In short, I believe you have a service worker problem :slight_smile: I see that you’re using Gatsby, which makes me guess that you’re probably using gatsby-plugin-offline?

My formal recommendation for this particular site and use case is to not use that plugin. Service Workers can cause a lot of headaches and adding the difference between Gatsby build-time HTML vs. post Netlify-processed HTML to the mix is a doozy. You could get around it but it would take a lot of very careful analysis and preparation to make sure your static code doesn’t co-mingle with your dynamic Gatsby page-data.json's


Jon

1 Like

hey Jon, thank you for your response! Correct I am using gatsby-plugin-offline, ok tho let me remove the plugin and see if that improves things

1 Like

hey @jonsully!

so form is working now, i removed gatsby-plugin-offline and also created a new form from scratch and submission are working :raised_hands:t2:

so mentioned it earlier but last issue im trying to sort out is some CSS styling bugs, for some reason the page background color (#a3c7cd) is over riding the form input block font color (should be #437fab). Again i do not believe this is a netlify issues but any help would be greatly appreciated! see pic for how it looks now with the bug

It’s not overriding any color you set on your inputs - your inputs are see-through. :slight_smile:

The opacity property accepts a value as an alpha value - a decimal between 0.0 and 1.0, not a percentage like 100% as currently written in your stylesheet

The sass compiler chose to interpret that as “actually 1%”, which is essentially see-through. I didn’t pull it up in Chome, but you get the picture :grin:

Hope that helps. Netlify Community forums probably aren’t the place for that level of implementation-specific and detailed dev question to which I dug into your very specific code, but hopefully that helps you moving forward. I would also recommend giving @ajlkn/HTML5UP some credit or a nod for his efforts in designing your template. :slight_smile:

Cheers!


Jon

Hi, @shawnmarcotte and @jonsully. I am humbled as I’m just following along behind the accurate answers @jonsully has given.

I also want to point out this particular statement:

Netlify Community forums probably aren’t the place for that level of implementation-specific and detailed dev question to which I dug into your very specific code, but hopefully that helps you moving forward.

Our support team also won’t troubleshoot custom code (only Netlify specific issues and questions). You are free to ask questions here about topics like this one (topics which are not specific to Netlify), but our support team won’t be able to answer those types of questions.

While other community members might answer here (like @jonsully did), you may find answers to these questions more quickly by asking in a more specific community for the topic (like this one).

To summarize, your questions are welcome here but asking a GatsbyJS specific question on a GatsbyJS forum might receive faster answers.

1 Like

Hi there – love this feature! It worked once or twice for me then stopped. Cannot for the life of me figure out what it is –

https://tech4goodguide.org/form.html

I’ve isolated a form on this page and still – nothing. Shows up in Netlify UI as a recognized form, but submissions never make it in. Help! : )

Heya @gabrielkrieshok! There is no more “form.html” on your site, and the form on the index page seemed to me to work well when I submitted (hi from test@arenticreative.com!):

https://app.netlify.com/sites/tech4goodguide/forms/5ef657865512e2000701260d

Let me know if you figured things out or just gave up and the “missing” form would need to be re-added for us to take a look!

Hi @fool – thanks so much for the speediness!

Alas – fixed it! Turns out the HTML was fine, it was my AJAX request that was secretly failing. The Netlify docs on submitting forms via AJAX helped give me the template that I needed to put on my end.

Thanks!

2 Likes

Awesome, thanks for the follow-up! We really appreciate customers who take the time to share their solution so that future folks running into the same issue have a hope of self-serving on an answer too :slight_smile: