[HELP] I somehow manage to break my contact form!

Support
,
1

I just made a new deploy of my page that somehow break the contact form on my page!

When I submit the form everything looks fine on the frontend!? I get redirected to my confirmation page as intended. However no form submission is registered in my verified/spam submissions?

I can’t seem to find any breaking changes in the code, however I did make some changes to the overall page setup that may have caused this!

I changed the headers on my page! My netlify.toml file was upgraded with this [[headers]] section:

[build]
	command = "gatsby build"
	publish = "public"
	base = "."
  functions = "./functions/autoReply/"
[dev]
	command = "gatsby develop"
[[headers]]
  for = "*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"
    X-Content-Type-Options = "nosniff"

I had some issues with trailing slashes! My page is build to be used without trailing slashes, so Netlify’s default setup of adding a trailing slash was a problem, so I changed the settings for the page to no longer prettify URL’s under settings>Build & Deploy > Asset Optimization.

I have tried previewing one of the old deploys, and my contactform works from here! (my Netlify function also sends an auto reply - so I think the Function is running as intended).

Can you help me debug this issue?

My page is live now at https://larsejaas.com - thanks!

1 Like
2

Hiya, @LarsEjaas

Thanks for reaching out! I am sorry you are having trouble getting your forms to work, but I definitely appreciate the initial context you have shared here.

This Support Guide is the first port of call to debug any forms issues. Please give this a read, as we ask for some key information at the end! There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide the information we request in the Support Guide linked above, such as a link to your live form, the URL of your deployed HTML form, the form name you have set and that shows in our UI, etc! :slight_smile:

3

Hey @LarsEjaas :wave:t2:

I’m not sure your headers immediately signal any issues to me but I’ve done lots of work with Gatsby and forms and trailing slashes and they can all be tricky in their own right. For what it’s worth, I wrote a package specifically for using Netlify forms in React-based SSGs here:

and a guide on trailing slashes, particularly with Gatsby, here:

1 Like
4

Thanks jonsully - this is a great article - I actually stumbled upon this before. But my page has some logic for navigating that I would rather not rewrite to go WITH trailing slashes. The funny part is my form worked before? I have just gone back and reverted to an old js.file that worked sourced from git and deployed that but my form still fails - so something else is definitely up here!

5

Thanks Hiya.

I have just redeployed an old version of the form that worked and made sure the [build] part of my toml file is identical to when the form worked. - but it still fails??

Something is odd though! If I go to functions and select my function “submission-created” in my app.netlify dashboard, the endpoint of the function is listed as:

Endpoint: https://larsejaas.com/.netlify/functions/submission-created

Is this expected I unfortunately never checked when it was working. This is the function that wrote out an autoreply by email until my form stopped working. But the form is still registered… How does Netlify handle when my page is without a trailing slash? e.g. https://larsejaas.com (I have turned off prettifying URLs).

In my netlify.toml file I have this info:

[build]
command = “gatsby build”
publish = “public”
base = “.”
functions = “./functions/autoReply/”

6

No worries! And I didn’t see that you had actually left your site URL in your first post, so I went and checked out your site. Your site’s contact form isn’t based on a statically-rendered page, it exclusively shows up as a runtime (in-browser) construct after clicking the email button. When I pulled your page (just the homepage) from command-line, I didn’t see any <form> attribute in the source at all. Is your form statically rendered on any page of your site?

If the resulting HTML files from gatsby build don’t contain any <form> element, the Netlify Form Bot won’t find any form and won’t correctly configure your deploy to capture form submissions. Forms that are exclusively created from dynamic/run-time actions tend to not be printed to the static HTML files created by gatsby build — their HTML is instead generated in real-time by React once React hydrates in the browser’s memory. That’s an issue for Netlify Forms :sweat_smile:

Is there a page / location on your site where the HTML form is declared statically?

Is your repository open-source? That may help too :slight_smile:

–
Jon

7

Hi again jonsulla. Yes, I include this form: https://larsejaas.com/skrivTilMig.html

The online form is inside a modal. But this part of my page is unchanged, I have now made sure the code is 100% identical to previously, when it worked? I am quite sure that this is related to the URL is now without a trailing slash.

8

Whether or not your trailing slashes changed shouldn’t actually matter for the form stuff. The form handler doesn’t actually care where the form submission came from :slight_smile:

Great job on having the public form on its own html page :+1:t2: can you share the source for that page here? I just want to double check that the source is correctly getting transformed by the Netlify build bot

–
Jon

9

Sorry jonsully - I am not sure what you mean by the “source”? I just put this basic html-file in my gatsby “static-folder” build - and it is generated as the form I linked to here. So the form at https://larsejaas.com/skrivTilMig.html is from my recent build, but I haven’t touched this file at all…

10

Ah sorry, I just mean the source-code for the html file in your repository. Like the raw HTML you have in your editor when you open that file in the /static/ folder.

I’m wanting to make sure that there are slight code differences between that file’s raw source (what you’re looking at in the editor) and what ultimately gets rendered on the web. That will tell me if the Netlify build bot is correctly seeing that file and parsing the form out of it.

–
Jon

11

This deploy from march 10th is working as intended. It also interacts with my active Netlify function and I recieve an email confirmation from the form and the person filling out the form received an email reply as intended.

https://6048a3e9520ae20007a791d5--larsejaas.netlify.app/

I have now tried various deploys without much luck. I have tried with- and without “prettify-url” enabled and even have tried removing the security-headers from my netlify.toml-file but it really makes no difference???

12

hi Jonsully.

Sure!

<form
        name="skrivTilMig"
        method="post"
        action="/en/besked_modtaget"
        data-netlify="true"
        > 
      <input type="hidden" name="form-name" value="skrivTilMig" />
        <p className="mediumLabel">
          <label>
            Navn
            <br />
            <input placeholder="Indtast navn" type="text" name="name" id="modal-focus" required/><span></span>
          </label>
        </p>
        <p className="mediumLabel">
          <label>
            E-mail
            <br />
            <input type="email" placeholder="Indtast e-mailadresse" name="email" required/><span></span>
          </label>
        </p>
        <p className="mediumLabel">
          <label>
            Emne
            <br />
            <input type="text" placeholder="Indtast emne" name="subject" required/><span></span>
          </label>
        </p>
        <p className="mediumLabel">
          <label>
            Besked
            <br />
            <textarea name="message" placeholder="Skriv en besked" required></textarea><span></span>
          </label>
        </p>
        <p className="mediumLabel">
          <label>
            Language
            <br />
            <input type="text" name="language" required/><span></span>
          </label>
        </p>
        <p>
        <button id="sendEmail" title="Send e-mail" type="submit">Send</button>
        </p>
      </form>
13

Thanks!

Before I go any further on checking out that form source-code and what’s on the web etc., can you just double check and make sure you didn’t disable Form Detection? It’s a few boxes down from “Asset Optimization” and you’ll need to hit “Edit Settings” just to make sure it’s still checked.

image
image2672×2570 447 KB

14

I just submitted a form entry via command-line to your site’s form handler. It appears it went through fine — could you check your site’s form submissions in the Admin UI and let me know if you got it?

15

Form detection is turned on - the “form” is active under “forms” and if I write from this previous deployed page from march 10th: I can use the form just fine:
https://6048a3e9520ae20007a791d5--larsejaas.netlify.app/

And YEP! I got your submission from the static form. Maybe you even received an auto-reply?

16

Negative on the auto-reply on my end but I’m glad the submission did go through. If you didn’t change a thing about your submission-created function, I’m a little surprised it didn’t fire… but let’s focus on getting the form working before digging into the functions side :sweat_smile:

17

My submission getting through from CLI tells me that your form ‘listener’ is working fine on the Netlify side, so something’s just going on with the way the form is getting submitted by React or something else with the front-end code on your site.

Ahhhh I think I may have found something. Can you tell me about your service worker usage? :slight_smile:

18

I can see the Netlify function fired, but failed because I changed an image-filename in the email template. YES! I have a serviceworker, my page is running as a PWA. It should cache all files when page is visited. I use Gatsby-plugin-offline and Gatsby gatsby-plugin-manifest for this.

These are the settings I use:

{

      resolve: `gatsby-plugin-manifest`,

      options: {

        name: `Lars Ejaas`,

        short_name: `LarsEjaas.com`,

        start_url: `/`,

        background_color: `#171c1c`,

        theme_color: `#00879d`,

        display: `standalone`,

        orientation: `portrait`,

        include_favicon: false,

        icons: [

          {

            src: `icons/icon-48x48.png`,

            sizes: `48x48`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-72x72.png`,

            sizes: `72x72`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-96x96.png`,

            sizes: `96x96`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-144x144.png`,

            sizes: `144x144`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-192x192.png`,

            sizes: `192x192`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-256x256.png`,

            sizes: `256x256`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-384x384.png`,

            sizes: `384x384`,

            type: `image/png`,

            purpose: `maskable any`

          },

          {

            src: `icons/icon-512x512.png`,

            sizes: `512x512`,

            type: `image/png`,

            purpose: `maskable any`

          },

        ],

        cache_busting_mode: 'none'

      },

    },

    {

      resolve: 'gatsby-plugin-offline',

      options: {

         precachePages: [`**/*`,`*`,`**/en/*`,`*/artikler/*`,`*/en/artikler/*`],

         workboxConfig: {

            globPatterns: ["**/*{.html,.js,.json,.webp,.webmanifest,.woff,.woff2,.ttf,.eot,.css,.mjs,.svg,.mp3,icons/icon*,.ico}"]  

         }

      }
19

Well good; that sounds like something you can fix with the function so that’s great :+1:t2:

Service workers are almost always the problem. Not saying they’re not useful or valuable, but they can cause headaches and are very complex. This is one of those cases. My submission from your actual site front-end never got through to Netlify because the service worker intercepted it. :confused:

I’m not sure the best direction to give you here other than that you need to figure out a means of configuring the service worker to ignore form POSTs and transparently passing them through to Netlify’s servers. I don’t know off-hand the simplest way to do that in Gatsby’s service worker setup.

My general recommendation for folks, especially when using a framework like Gatsby that’s already configured for excellent site performance and UX, is to not worry about service workers and avoid using them unless you really need offline support (which most static / portfolio / blog sites really don’t). If that’s a road you want to walk down, more power to you :stuck_out_tongue: it may just be sort of hard.

I hope that helps!

–
Jon

20

Thanks a lot jonsully. I really need the serviceworker - I actually thought I knew a lot about service workers already, but I simply never stumbled upon the for interception part. But know I know where to start! Thats a HUGE improvement.

Thanks for the help, this is highly appreciated you are the best!!

1 Like