Forms are not showing up in the UI

Support
1

Ok, I give up. I need some help here… I have used this set up for about two years to my Gatsby / Netlify forms with no issues, but for this project the forms simply aren’t generating in the UI.

The site is at: khol.netlify.app
Github at: https://github.com/EricPhifer/khol-gatsby

Here’s the process I’ve gone through… aside from online, Netlify docs and in this forum searches, I’ve implemented the suggestions here: How to Integrate Netlify’s Form Handling in a React App

Initially I had this as a single page website, but saw that multiple forms on one page requires some extra coding magic that I don’t want to get into so I moved the forms to separate pages.

I have included data-netlify="true" on each with a unique name=" " attribute as the docs say. I tried to change them all to the shorter netlify within the instead and neither worked.

I have included the

<input type="hidden" name="form-name" value="contact" />

I’ve never needed it in the past, but I did also implement the html file the article recommends to help the post-processing with no change.

I thought maybe I just need to clear the cache before it builds to trigger it seeing the <form netlify> attribute, but no change. I’m including the build notes below, please let me know what I can do to get forms to show up in the UI for this project. Thank you.

 Netlify Build                                                 
12:46:41 PM: ────────────────────────────────────────────────────────────────
12:46:41 PM: ​
12:46:41 PM: ❯ Version
12:46:41 PM:   @netlify/build 29.12.1
12:46:41 PM: ​
12:46:41 PM: ❯ Flags
12:46:41 PM:   baseRelDir: true
12:46:41 PM:   buildId: 6495e84461232a0008ce6f9e
12:46:41 PM:   config: /opt/build/repo/netlify.toml
12:46:41 PM:   deployId: 6495e84461232a0008ce6fa0
12:46:41 PM:   tracing:
12:46:41 PM:     enabled: 'false'
12:46:41 PM:     host: 10.65.29.16
12:46:41 PM:     parentSpanId: 047c81e39d918bf4
12:46:41 PM:     traceFlags: '00'
12:46:41 PM:     traceId: 4db5e66d7691cbf6eeec5c8cd11f847b
12:46:41 PM: ​
12:46:41 PM: ❯ Current directory
12:46:41 PM:   /opt/build/repo
12:46:41 PM: ​
12:46:41 PM: ❯ Config file
12:46:41 PM:   /opt/build/repo/netlify.toml
12:46:41 PM: ​
12:46:41 PM: ❯ Context
12:46:41 PM:   production
12:46:41 PM: ​
12:46:41 PM: ❯ Loading plugins
12:46:41 PM:    - @netlify/plugin-gatsby@3.6.2 from Netlify app
12:46:41 PM:    - @netlify/plugin-lighthouse@4.1.1 from Netlify app
12:46:42 PM: ​
12:46:42 PM: @netlify/plugin-gatsby (onPreBuild event)                     
12:46:42 PM: ────────────────────────────────────────────────────────────────
12:46:42 PM: ​
12:46:43 PM: Found a Gatsby cache. We’re about to go FAST. ⚡️
12:46:43 PM: ​
12:46:43 PM: (@netlify/plugin-gatsby onPreBuild completed in 240ms)
12:46:43 PM: ​
12:46:43 PM: Build command from Netlify app                                
12:46:43 PM: ────────────────────────────────────────────────────────────────
12:46:43 PM: ​
12:46:43 PM: $ npm run build
12:46:43 PM: > kinnas-house-of-love@1.0.0 build
12:46:43 PM: > gatsby build
12:46:45 PM: success compile gatsby files - 1.169s
12:46:45 PM: success load gatsby config - 0.030s
12:46:46 PM: success load plugins - 0.782s
12:46:46 PM: success onPreInit - 0.006s
12:46:46 PM: success delete worker cache from previous builds - 0.001s
12:46:46 PM: info [sanity] Fetching remote GraphQL schema
12:46:52 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:46:52 PM: info [sanity] Stitching GraphQL schemas from SDL
12:46:52 PM: success initialize cache - 5.485s
12:46:52 PM: success copy gatsby files - 0.099s
12:46:52 PM: success Compiling Gatsby Functions - 0.158s
12:46:52 PM: success onPreBootstrap - 0.169s
12:46:52 PM: success createSchemaCustomization - 0.009s
12:46:54 PM: info [sanity] 0 documents updated.
12:46:56 PM: success Clean up stale nodes - 0.006s - 8/0 0.00/s
12:46:56 PM: success Checking for changed pages - 0.000s
12:46:56 PM: success source and transform nodes - 3.400s
12:46:57 PM: info Writing GraphQL type definitions to /opt/build/repo/.cache/schema.gql
12:46:58 PM: success building schema - 2.387s
12:46:58 PM: success createPages - 0.004s
12:46:59 PM: success createPagesStatefully - 0.398s
12:46:59 PM: info Total nodes: 103, SitePage nodes: 7 (use --verbose for breakdown)
12:46:59 PM: success Checking for changed pages - 0.000s
12:46:59 PM: success Cleaning up stale page-data - 0.001s
12:46:59 PM: success onPreExtractQueries - 0.088s
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: success extract queries from components - 6.400s
12:47:05 PM: info [sanity] Fetching remote GraphQL schema
12:47:05 PM: success write out redirect data - 0.001s
12:47:05 PM: success onPostBootstrap - 0.000s
12:47:05 PM: info bootstrap finished - 22.310s
12:47:05 PM: success write out requires - 0.003s
12:47:06 PM: success Building production JavaScript and CSS bundles - 0.498s
12:47:06 PM: success Building HTML renderer - 0.415s
12:47:06 PM: success Execute page configs - 0.038s
12:47:06 PM: success Caching Webpack compilations - 0.000s
12:47:10 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:10 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:10 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:10 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:10 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:10 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:11 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:11 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:12 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:12 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:12 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:12 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:12 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:12 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Transforming to Gatsby-compatible GraphQL SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:13 PM: info [sanity] Stitching GraphQL schemas from SDL
12:47:14 PM: success run queries in workers - 7.882s - 0/0 0.00/s
12:47:14 PM: success Merge worker state - 0.033s
12:47:16 PM: info There are no new or changed html files to build.
12:47:16 PM: info There are no new or changed slice html files to build.
12:47:16 PM: success stiching slices - 0.000s
12:47:16 PM: info [gatsby-plugin-netlify] Creating SSR/DSG redirects...
12:47:16 PM: info [gatsby-plugin-netlify] Created 0 SSR/DSG redirects...
12:47:16 PM: success onPostBuild - 0.194s
12:47:17 PM: 
12:47:17 PM: Pages
12:47:17 PM: ┌ src/pages/404.js
12:47:17 PM: │ ├   /404/
12:47:17 PM: │ └   /404.html
12:47:17 PM: ├ src/pages/connect.js
12:47:17 PM: │ └   /connect/
12:47:17 PM: ├ src/pages/index.js
12:47:17 PM: │ └   /
12:47:17 PM: ├ src/pages/privacypolicy.js
12:47:17 PM: │ └   /privacypolicy/
12:47:17 PM: ├ src/pages/termsconditions.js
12:47:17 PM: │ └   /termsconditions/
12:47:17 PM: └ src/pages/volunteer.js
12:47:17 PM:   └   /volunteer/
12:47:17 PM:   ╭────────────────────────────────────────────────────────────────────╮
12:47:17 PM:   │                                                                    │
12:47:17 PM:   │     (SSG) Generated at build time                                  │
12:47:17 PM:   │   D (DSG) Deferred static generation - page generated at runtime   │
12:47:17 PM:   │   ∞ (SSR) Server-side renders at runtime (uses getServerData)      │
12:47:17 PM:   │   λ (Function) Gatsby function                                     │
12:47:17 PM:   │                                                                    │
12:47:17 PM:   ╰────────────────────────────────────────────────────────────────────╯
12:47:17 PM: info Done building in 34.329608686 sec
12:47:18 PM: ​
12:47:18 PM: (build.command completed in 35.3s)
12:47:18 PM: ​
12:47:18 PM: @netlify/plugin-gatsby (onBuild event)                        
12:47:18 PM: ────────────────────────────────────────────────────────────────
12:47:18 PM: ​
12:47:18 PM: Skipping Gatsby Functions and SSR/DSG support
12:47:18 PM: ​
12:47:18 PM: (@netlify/plugin-gatsby onBuild completed in 5ms)
12:47:18 PM: ​
12:47:18 PM: @netlify/plugin-gatsby (onPostBuild event)                    
12:47:18 PM: ────────────────────────────────────────────────────────────────
12:47:18 PM: ​
12:47:18 PM: Skipping Gatsby Functions and SSR/DSG support
12:47:18 PM: ​
12:47:18 PM: (@netlify/plugin-gatsby onPostBuild completed in 273ms)
12:47:18 PM: ​
12:47:18 PM: @netlify/plugin-lighthouse (onPostBuild event)                
12:47:18 PM: ────────────────────────────────────────────────────────────────
12:47:18 PM: ​
12:47:18 PM: Generating Lighthouse report. This may take a minute…
12:47:18 PM: Running Lighthouse on public/
12:47:18 PM: Serving and scanning site from directory public
12:47:32 PM: Lighthouse scores for public/
12:47:32 PM: - Performance: 83
12:47:32 PM: - Accessibility: 80
12:47:32 PM: - Best Practices: 100
12:47:32 PM: - SEO: 85
12:47:32 PM: - PWA: 30
12:47:32 PM: ​
12:47:32 PM: (@netlify/plugin-lighthouse onPostBuild completed in 13.3s)
12:47:32 PM: ​
12:47:34 PM: (Netlify Build completed in 53s)
12:47:34 PM: Section completed: building
12:47:41 PM: Finished processing build request in 2m0.668s
2

Your connect page is rendered purely using JavaScript:

view-source:https://6495e84461232a0008ce6fa0--khol.netlify.app/connect/

There’s no raw HTML form in there.

I saw your commit messae that mentions: add html form... but I’m not sure where exactly you’ve added that.

3

Thanks for your reply, @hrishikesh. The raw HTML is /src/pages/index.html and only has the testimonial currently in it to test, not the connect or volunteer, but as mentioned I’ve used this build without the raw HTML and no problems on my other sites for years - it’s not clear why this is different even if the connect page is pure JS, my question is why is this different and how do I fix it?

4

Hi, @EricPhifer. This is not correct:

I’ve used this build without the raw HTML and no problems on my other sites for years

If the Netlify forms feature was workin for the other sites, then they did have HTML versions of their forms at some point.

This is true because the only way the form detection will succeed is if the pure HTML version of the form is found in the publish directory during the deploy. This has always been the requirement for the forms feature. So, if it worked for other sites, they must - by definition - have had the pure HTML version of the form at some point. Netlify has never detected forms generated via javascript at browse time - ever. This has never been supported.

Also, if you download the deploy, you will see there is absolutely no file named /src/pages/index.html.

There is an /index.html file but it contains no <form> tags.

Note, the form definition can be in any HTML file. It doesn’t have to be on the page where you want to submit the form. You can even block access to the file with the form with a 404 redirect rule. However, the HTML file with the <form> and <input> tags to define the form and its inputs must exist.

To summarize, the only solution here is to include the HTML-only version of form in a file that does get published. Do you have questions about how to do that?

5

Thank you for your response, @luke. I’ve been using Netlify long enough that I know your responses are always helpful and thorough, so thank you for taking the time.

I believe you about how Netlify works under the hood and the requirements for form usage. At the same time, I want to define what I mean: I have not had to include an index.html file for any of my other sites in order for them to work. How this works in the backend, I don’t know. That’s just the facts. I learned this set up from Wes Bos, here is an example of it. Perhaps you can help me understand what is going on behind the scenes.

/src/pages/contact.js
import ContactForm from '../components/ContactForm.js'

export default function Contact() {
  return (
    <>
        <ContactForm />
    </>
  )
}

/src/components/ContactForm.js
import styled from 'styled-components'
import useForm from '../utils/useForm'
import useContact from '../utils/useContact'

const Form = styled.form``

export default function ContactForm() {
  const { values, updateValue } = useForm({
    name: '',
  });
  const { contact, error, loading, errMessage, submitContact } = useContact({
    values,
  });
  console.log(contact, error, loading, submitContact);
  if (errMessage) {
    return <p>{errMessage}</p>;
  }
  return (
    <>
      <Form
        method='post'
        netlify-honeypot='bot-field'
        data-netlify='true'
        name='standard-contact'
      >
        <input type="hidden" name="bot-field" />
        <input type="hidden" name="form-name" value="contact" />
        <legend>Contact Me</legend>
        <label htmlFor="name">Name</label>
          <input 
            type="text"
            name="name"
            id="name"
            value={values.name}
            onChange={updateValue}
            placeholder="Name"
            className="required"
          />
          <button type="submit" value="Submit">
            Submit
          </button>
      </Form>

src/utils/useContact.js
import { useState } from 'react';

export default function useContact({ values }) {
  // 1. Create state to hold message
  const [error, setError] = useState();
  const [loading, setLoading] = useState(false);
  const [errMessage, setErrMessage] = useState('');
  async function submitContact(e) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    // Gather data to send
    const body = {
      name: values.name,
      email: values.email,
      message: values.message,
      mapleSyrup: values.mapleSyrup,
    };
    // Send data to serverless function when they check out
    const res = await fetch(
      `${process.env.GATSBY_SERVERLESS_BASE}/contactMember`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'applications/json',
        },
        body: JSON.stringify(body),
      }
    );
    const checkText = JSON.parse(await res.text());
    // check if everything worked
    if (res.status >= 400 && res.status < 600) {
      setLoading(false); // turn off loading
      setError(checkText.errMessage);
    } else {
      // it worked!
      setLoading(false);
      setErrMessage('Success! Your message has been sent.');
    }
  }
  return {
    error,
    loading,
    errMessage,
    submitContact,
  };
}

src/utils/useForm.js
import { useState } from 'react';

export default function useForm(defaults) {
  const [values, setValues] = useState(defaults);

  function updateValue(e) {
    let { value } = e.target;
    if (e.target.type === 'number') {
      value = parseInt(value);
    }
    setValues({
      // copy existing value into it
      ...values,
      // update the new value that changed
      [e.target.name]: value,
    });
  }
  return { values, updateValue };
}

The utils are directly from Wes Bos’ Master Gatsby course - I haven’t come back to them yet to understand exactly what he’s set up (like I should) - I just know it works. I believe the “special sauce” is in this line: body: JSON.stringify(body), in the useContact.js but I could be wrong.

However, this is the same set up I’ve used for my portfolio website (as well as several others) and the website I’ve referred to here - it works on my portfolio, but not on this website. That’s what I don’t get.

Either way, I appreciate your insights. I’m here to learn.

6

That would be true if your site generates an index.html with the form in it. If not, you’d have to add the file. You can build the site locally and check if one of your HTML files has the form tag in it or not.

React by default doesn’t render static HTML and does everything using JavaScript. Frameworks like Gatsby and Next.js attempt to make the React output into static HTML, however the modern versions of these frameworks defer the rendering to server-side. In this case, they still don’t generate static HTML files, which is required by forms to work. In some cases like conditional rendering, it could happen that the form is still not added to the generated HTML.

If you simply add the HTML versions of your form (or make sure your framework renders the form as raw HTML), it would work.

7

Thanks for your response @hrishikesh. I believe the useContact.js in my utils folder - as referenced in my response to @Luke - is what is doing that HTML file rendering. I’m still learning quite a lot about how all of it works, but from what I understand that’s what I see.

Do you have any idea of what I could try to get this to work or why this site would be different?

I’m going to try resetting the GitHub connection this week and see if that changes anything. I just don’t understand why Netlify doesn’t recognize the HTML render on this one…

8

Did you run a build locally and see if the form exists in the HTML? As we’ve indicated above, that doesn’t seem to be the case.

9

Can you explain what you mean by “if the form exists” and “in the HTML”?

If you mean in localhost, the forms render to the page as expected - the submission is the only problem, which never works in localhost; however, the build to netlify.app was successful and shows no errors but the Forms section in my Netlify UI does not recognize any forms and submission from the netlify.app version gives a black page.

While reading over the article I initially linked again I see where I’ve erred in my understanding of the HTML file. I apologize for the confusion in this. Let me try again from the basics.

I’m using Gatsby - a static site generator. The article says:

Step 1 is the html file, so I don’t need that. That’s my bad, I shouldn’t have tried it or brought it up.

Step 2 adds the <input type="hidden" name="form-name" value="contact"> within JSX.
These are the 3 form sections implementing that step in my project:

      <input type="hidden" name="form-name" value="testimonial" />

      <input type="hidden" name="form-name" value="volunteers" />

      <input type="hidden" name="form-name" value="contact" />

That is the full set up required in this article. Based on this article and my experience if I have these two steps then Netlify should recognize the forms.

I’ve dug deeper into the GitHub code linked in the article and I see the functions for handleChange and handleSubmit are used - this is similar functionality to the setup in my utils folder referred to previously - to handle the input fields and form submission.

To go back to what you’ve said earlier: “see if the form exists”. If by this you mean that the form renders to the page as expected and the html shows correctly in the inspector, then yes is the answer. I thought I’d made clear I’m beyond that step. My apologies for not being clearer.

I’ve tried to provide all the information, code and resources to ensure anyone willing to help, and thank you @hrishikesh for taking the time to respond, is up to speed with where I’m at in the process. If I have not, please let me know and I’ll provide what’s needed. Also, if I’ve been unclear in anyway, please let me know and I will clarify. I’m certain you’d like to come to a swift resolution and I share this sentiment.

I hope this reply clarifies my previous error and makes clear the issue at hand.

10

Unless you mean you ran a build (npm run build, not npm run dev), I don’t meant localhost. I’m sorry but I don’t have any more words to clarify myself.

You need to build your site (not dev, but build) and check the generated source to see if the forms exists. Based on what I’ve been saying, it does not.

Form rendering is not the same as form existing in HTML. Consider this:

let foo = false
return (
  <div>
    foo ? <form></form> : <p>foo not true</p>
  </div>
)

a piece of code like this for example would probably not add the form in the HTML. It needs JavaScript to check the value of foo and thus, would be dynamically added to your DOM using JavaScript, ergo it doesn’t exist in HTML.

DOM is not equal to HTML. Existence in DOM doesn’t guarantee that the form existed in HTML. DOM can be manipulated later with JavaScript. That doesn’t change the raw HTML that exists on the server.

The requirement is simple, the form needs to exist in HTML when the site is being built.

I’m sorry if this doesn’t clarify it for you, but as said, I don’t have any more words to further explain the same point.

I think we’ve said this before, but you’d probablly be better off by simply adding a static HTML version of your form in the deploy directory.

11

Well, thank you for taking the time @hrishikesh to provide your best answer to the problem. I believe you that you have no more words toward a solution. I will say it once more in hopes that it will help others:

Gatsby is a Static-Site Generator, it creates the HTML on build and this has always been sufficient for my websites - providing the HTML within JSX for the accurate transference from JSX to HTML on build. If I were to provide a raw HTML file, it is not recognized in the build by Gatsby (See Porting an HTML Site to Gatsby). I know for certain because I tried your method and it does not work.

Your advice appears to be in direct conflict with Netlify’s and Gatsby’s documentation on the matter.

I will seek other avenues for resolution. Thank you very much for your thoughtful responses.

12

Just to follow up and show what I mean with my other projects:
This is my portfolio: GitHub - EricPhifer/gatsby-portfolio

This is the Pages sitemap when I run npm run build:
Screenshot 2023-07-17 at 4.55.48 PM

As you can see, no contact.html file exists here. However, when I look in my Netlify Dashboard for this project:

Screenshot 2023-07-17 at 4.59.26 PM
Screenshot 2023-07-17 at 4.59.26 PM771×540 22.9 KB

The form clearly exists and receives submissions. How do you explain this?

13

I have said this several times, but here goes another attempt:

Check the generated source of the HTML file:

view-source:https://ericphifer.com/contact/

There’s a form tag that’s being generated in the raw HTML:

image
image912×423 73.6 KB

In the other site there’s none.

I provided the same explanation to another user:

Gatsby Netlify Form - Support - Netlify Support Forums

and I see you participated there, so you can probably see, they understood and found out what was missing in their code. Same goes for you. You need to find out why Gatsby is not adding form to the generated HTML in your previous site and why it’s adding to this one.

14

Thanks for your response @hrishikesh. Unfortunately, I know all of this and have known it. Troubleshooting it with this information still remains fruitless, which I’ve also said several times. And yes, laravel has done an excellent job getting to the problem and solution on that site - it just hasn’t worked on mine.

15

Hi, @EricPhifer. Our support team isn’t debugging the site’s build process. We are debugging why the form submission isn’t working.

The form isn’t working on the one site because the <form> tag is missing in the HTML. You will need to debug the build process to find out why it is missing and fix it.

Also, you are incorrect about there being no HTML file for the path /contact/ for the site where the form works. You can download the deploy and see all the files in it. This is the content of the current deploy and that HTML file does exist:

/page-data/app-data.json
/__node-manifests/gatsby-source-sanity/22a083a5-00db-4c2b-ab71-c3a67fed61b4-2023-06-27t22:59:25.000z.json
/page-data/404/page-data.json
/page-data/404.html/page-data.json
/netlify.toml
/page-data/index/page-data.json
/page-data/contact/page-data.json
/page-data/privacypolicy/page-data.json
/page-data/termsconditions/page-data.json
/page-data/sq/d/3000541721.json
/favicon-16x16.png
/app-4f6a91cf8955f5b01f78.js.license.txt
/app-7fad9607eeab1e2d0287.js.license.txt
/chunk-map.json
/d0c16330-9a5f1fba1f3417a88cf5.js
/favicon-32x32.png
/favicon.ico
/_gatsby/slices/_gatsby-scripts-1.html
/framework-830eb0a3c51182d4beaf.js.license.txt
/component---src-pages-termsconditions-js-7fb1aef4f879f2d98c6b.js
/component---src-pages-privacypolicy-js-43eb53da7c173b6a2dcc.js
/component---src-pages-termsconditions-js-d10200e81032ff33fc08.js
/~partytown/partytown.js
/component---src-pages-privacypolicy-js-93a453d094befad2f984.js
/_headers
/1bfc9850-3bfd09dd55244d076475.js
/styles.e12c7c9c885ec3ebdd07.css
/~partytown/debug/partytown-sw.js
/component---src-pages-404-js-f83b8309f81c16281215.js
/component---src-pages-termsconditions-js-7fb1aef4f879f2d98c6b.js.map
/component---src-pages-termsconditions-js-d10200e81032ff33fc08.js.map
/component---src-pages-privacypolicy-js-43eb53da7c173b6a2dcc.js.map
/component---src-pages-privacypolicy-js-93a453d094befad2f984.js.map
/page-data/sq/d/1276946714.json
/component---src-pages-404-js-f83b8309f81c16281215.js.map
/~partytown/debug/partytown.js
/webpack.stats.json
/webpack-runtime-0325b14b3f4caf7ada36.js
/webpack-runtime-1f5dcac94d0636e6e014.js
/webpack-runtime-326e83835a8ffd6b018c.js
/webpack-runtime-75f1d48c3cc1a8c019bc.js
/webpack-runtime-a7c1a9f187cf0926b8b3.js
/webpack-runtime-b46dc6be2987fd701fdc.js
/webpack-runtime-c6be28bd446cc8f47c2a.js
/webpack-runtime-fbe5c144de5e28446827.js
/~partytown/partytown-media.js
/component---src-pages-index-js-8b12173a5e171dd7816d.js
/component---src-pages-index-js-10850fd8f9f742f719cc.js
/component---src-pages-index-js-6d8ae691e4cac261bbdb.js
/component---src-pages-index-js-2214b7155dd4316435a6.js
/component---src-pages-index-js-8b6a614c657563d8f755.js
/8f8b81eea587514fa43d936e1f933b4a977f6f80-316b699ee4221b3914b2.js
/component---src-pages-contact-js-263d4025ef9844a88532.js
/component---src-pages-contact-js-ec2c4aed6cb9b2dd3696.js
/component---src-pages-contact-js-44593300710b7e2ac38e.js
/component---src-pages-contact-js-ccc9fbde9e01c35d8ce9.js
/component---src-pages-contact-js-6b4053edff04ae0ec7d6.js
/page-data/sq/d/2246850847.json
/37c8fff2ba9bf8a4d363aea33ba564ba7880dbf4-9a447ba4b3bd3f0f8fe1.js
/~partytown/debug/partytown-media.js
/webpack-runtime-0325b14b3f4caf7ada36.js.map
/webpack-runtime-1f5dcac94d0636e6e014.js.map
/webpack-runtime-326e83835a8ffd6b018c.js.map
/webpack-runtime-75f1d48c3cc1a8c019bc.js.map
/webpack-runtime-a7c1a9f187cf0926b8b3.js.map
/webpack-runtime-b46dc6be2987fd701fdc.js.map
/webpack-runtime-c6be28bd446cc8f47c2a.js.map
/webpack-runtime-fbe5c144de5e28446827.js.map
/404/index.html
/404.html
/component---src-pages-index-js-10850fd8f9f742f719cc.js.map
/page-data/sq/d/1074762977.json
/component---src-pages-index-js-8b12173a5e171dd7816d.js.map
/component---src-pages-index-js-6d8ae691e4cac261bbdb.js.map
/component---src-pages-index-js-2214b7155dd4316435a6.js.map
/component---src-pages-index-js-8b6a614c657563d8f755.js.map
/component---src-pages-contact-js-263d4025ef9844a88532.js.map
/component---src-pages-contact-js-ec2c4aed6cb9b2dd3696.js.map
/component---src-pages-contact-js-44593300710b7e2ac38e.js.map
/~partytown/debug/partytown-sandbox-sw.js
/component---src-pages-contact-js-ccc9fbde9e01c35d8ce9.js.map
/component---src-pages-contact-js-6b4053edff04ae0ec7d6.js.map
/~partytown/debug/partytown-atomics.js
/~partytown/partytown-atomics.js
/~partytown/partytown-sw.js
/8f8b81eea587514fa43d936e1f933b4a977f6f80-316b699ee4221b3914b2.js.map
/privacypolicy/index.html
/page-data/sq/d/1707790137.json
/page-data/sq/d/1798653420.json
/page-data/sq/d/207065181.json
/termsconditions/index.html
/contact/index.html
/37c8fff2ba9bf8a4d363aea33ba564ba7880dbf4-9a447ba4b3bd3f0f8fe1.js.map
/page-data/sq/d/1244872369.json
/~partytown/debug/partytown-ww-sw.js
/~partytown/debug/partytown-ww-atomics.js
/index.html
/app-7fad9607eeab1e2d0287.js
/app-4f6a91cf8955f5b01f78.js
/framework-830eb0a3c51182d4beaf.js
/framework-830eb0a3c51182d4beaf.js.map
/app-7fad9607eeab1e2d0287.js.map
/app-4f6a91cf8955f5b01f78.js.map
/1bfc9850-3bfd09dd55244d076475.js.map
/d0c16330-9a5f1fba1f3417a88cf5.js.map

Here is a screenshot to clarify:

image

So, there is an HTML file with the <form> tag in it for this site. You will need to do the same for the other site. The root cause here is that the <form> tag is missing for the non-working site.

You will need to find the reason the <form> tag is missing from the non-working site and get it added.

16

Thank you for your response @luke. In regards to the contact html file, I’m sorry I thought I was clear. I will try to be clearer: within my VSCode files there is no html file that I create. I am aware that on build Gatsby creates the html files for me and therefore will show up as you’ve shown.

I’m also aware of the problem. I just cannot find a solution or reason why this site is different and unfortunately this time no one seems to be able to help. As mentioned previously, I’ve now been debugging this off and on for the past three months… I’ll just keep trying on my own. Thank you for trying to help.

1 Like
17

Hi, @EricPhifer. Yes, our support team doesn’t know why the site’s build code doesn’t create the file either. We know that is the root cause but we don’t know your site’s code well enough to tell you what to do to fix it.

Is the form created by client-side javascript in the browser? If so, a common workflow to resolve the missing HTML form is this:

  • load the site in the browser
  • let the client-side javascript generate the form HTML
  • inspect the page in the browser’s dev tools to get the javascript rendered HTML form
  • manually copy that form into a new static HTML file
  • place the new static HTML file with the form the directory used by the framework for static includes (which is the directory static for Gatsby)
  • trigger a new deploy of the site

This then causes the static HTML version of the form to be available to the build system and be parsed to create the backend form handler. They key here is that the form definition does not actually need to be on the page where the form is submitted. The HTML form can be defined in a completed used HTML file. However, the HTML form must exist in the publish directory when the deploy completes as that is the requirement to create the backend handler for the form.

The downside of this workaround is that it must be repeated again anytime the form is modified. However, if the form is not modified often, this may be a feasible way to address the issue.