Connect contact page to Netlify forms

[jamestagal]

Hi Jim, I have tried connecting up the form on page.contact.sevlte following this video to Netlify's in-built form submission but get the following error when i try submitting a form: However, I am seeing an active form in my Netlify Form's page but with no submissions. What I have done: I have added a couple of html attributes; a name field to each input and the following to the form attribute which is also consistent with Netlify's Forms setup instructions.

<form  action="POST" data-netlify="true" id="contact form" id="contact form" class="w-full max-w-lg">

Is there something else I need to modify in the page.contact.sevlte to get it working? Cheers, Ben

[jimafisk]

@jamestagal can you point me to where the form code is specifically in your repo so I can take a look at the full context? Also make sure to tag me with my github username like @jimafisk or else I won't typically see these messages.

[jamestagal]

Hi Jim, yes thanks. The form part is on line 51, see below. https://github.com/jamestagal/edtechdesigner/blob/b8612775314b4dc153053bca64ec8be111a48d9c/layouts/components/page_contact.svelte#L57

the other bit i added was the recaptcha on line 129. https://github.com/jamestagal/edtechdesigner/blob/b8612775314b4dc153053bca64ec8be111a48d9c/layouts/components/page_contact.svelte#L129

Cheers, Ben

[jimafisk]

When I press "send" using the form on the contact page it directs me to the following URL which is missing:

https://vigorous-einstein-b90548.netlify.app/POST?frist+name=Jim&last+name=Fisk&email=jimafisk%40gmail.com&message=Hi+Ben%21+Just+testing+out+your+form+submission

See screenshot


Error message

``` Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site. Back to our site If this is your site, and you weren't expecting a 404 for this path, please visit Netlify's "page not found" support guide for troubleshooting tips. ```

This answer provides some details how Netlify Forms work: https://answers.netlify.com/t/netlify-forms-page-not-found-404-on-submit/36106/17

Per Netlify's html form documentation:

Your form’s name attribute determines what we call the form in the Netlify app interface. If you have more than one form on a site, each form should have a different name attribute.

I don't see a name attribute on the form itself. I think this needs to match the form name you created in the Netlify admin interface exactly (capitalization and all). Does it work if you add that?

[jamestagal]

Hi @jimafisk thanks Actually the form name that was created of the Form in the Netlity admin was injected from the id attribute that I had in my code and changing it to be 'name' did not make any difference. I got the same error message so it is a little perplexing.

[jimafisk]

The behavior is slightly different when I submit now, it redirects back to https://vigorous-einstein-b90548.netlify.app/pages/contact/ but still throws the "Page Not Found" error. Looks like it's getting a 404 when trying to POST:


It looks like name="contact form" was added to your <form> element that wasn't there before. Not sure if having spaces in the name is causing issues: https://answers.netlify.com/t/received-blank-submissions-in-2-out-of-4-forms-input-names-and-form-names-are-provided/35567/2.

I'm honestly not too familiar with how Netlify forms work behind the scenes, so you'll probably have to reach out to them for support on that.

[jamestagal]

Hi @jimafisk

I finally got around to posting on the Netlify forum about this issue but I don't understand the response I got because it is very technical and beyond my understanding. Would you mind having a look if you can for me please? The post is linked above.

Update: I read the Netlify post again particularly the question about the build process and I remember you told me about this once before: "The best approach for deploying to Netlify is to build your Plenti app in CI (e.g. GitHub Actions) outside of Netlify and then copy those assets over to Netlify to deploy the site. Here's an issue discussing exactly how to do that: https://github.com/plentico/plenti/issues/140"

But that still doesn't help me to reply to his question/s. Maybe @roobyz can help because you have set up this theme so know it well?

Regards, Ben

[roobyz]

hi @jamestagal ... my plenti.json has the build value set as follows:

  "build": "deploy/public",

I set it up this ways because Cloudflare wants the functions in a directory in the same root path as the public folder, for example:

deploy
|_ public                    # Plenti static output
|_ functions\api\submit.js   # Cloudflare function

So when my CI/CD process executes, the public and functions folders are in the same folder location and the output is placed there. This is what my build script is doing.

Your plenti.json has the build set as follows:

  "build": "public",

I would change your build settings to what I have. Also, Netlify has a similar, but different folder requirement, so your output folder might look like:

deploy
|_ public                         # Plenti static output
|_ .netlify\functions\submit.js   # Netlify version of function

Finally, the submit.js function that I wrote is for Cloudflare. As @jimafisk was hinting at and the Netlify folks confirmed, there would definitely need to be a rewrite of the function logic for Netlify. Also, the page_contact.svelte component would likely need a rewrite as well so that the POST method is triggered on the correct endpoint for Netlify.

For example, based on Cloudflare's approach my endpoint is:

  const reqUrl = "/api/submit";

This is the endpoint that Cloudflare creates on my site based on the build setup from above functions\api\submit.js.

Hopefully that makes sense. ;-)

[jamestagal]

Hi @roobyz Thanks for explaining. It does make sense however the later is over my head in terms of coding ability.

@jimafisk would you mind helping me write a Netlify function and modify the page_contact.svelte file as Roberto pointed out? or should I, for simplicity, just set up a Cloudflare function using Roberto's method?

@roobyz I started by adding the following to my plenti.json file but after pushing the code to Github it didn't deploy to Netlify and failed.

 "build": "deploy/public",

Would I have to modify the netlify-deploy.ymal file to include the new build path? deploy/pubic for it to deploy? I am not sure.

Ben

[roobyz]

hi @jamestagal ,

After changing your build settings, you need to:

1. ensure that it compiles locally
2. after step 1, you need to update your "Publish directory" on the Netlify UI to look for your content in the deploy\public\ folder (https://docs.netlify.com/configure-builds/overview/#basic-build-settings)
3. after step 2, you can push your changes to Netlify

(@jimafisk) I can help with the Netlify function, however we might need a bit of back and forth to get it right, and due to my current work schedule may require a bit of time.

Also, regarding functions, per the Netlify docs (https://docs.netlify.com/functions/build-with-javascript/):

Netlify will access the functions directory during every build, preparing and deploying each supported code file as a function. The default directory is YOUR_BASE_DIRECTORY/netlify/functions

So you want your outcome to look like:

deploy    # Base directory
|_ public                        # Plenti static output
|_ netlify\functions\submit.js   # Netlify function

Then we can update the endpoint on the page_contact.svelte component to:

const reqUrl = "/.netlify/functions/submit"

Roberto

[jamestagal]

Hi @roobyz Thanks for the information. Sorry just the first step...how do i ensure it complies locally? using command plenti build?

Ben

[roobyz]

hi @jamestagal ... yeah, the normal process. It builds and you can serve it locally. ;-) plenti build and plenti serve. You just want to ensure that any other changes you may have made aren't the culprit at Nelify.

[jamestagal]

Hi @roobyz

I am running into errors in the deploy..See error in Github below.

The error is about the directory but not sure what it means..

When looking at your Step 2 above, I didn't include any Publish directory in Netlify because that is outlined in my netlify-deploy.yaml file which was how @jimafisk told me to set it up originally....but now I added .deploy before "public" to match the plenti.json file

"build": "deploy/public",

Also see last line of the netlify-deploy.yml file below.

name: netlify deployment

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Build
        uses: docker://plentico/plenti:latest
        with:
          entrypoint: /plenti
          args: build

      - name: Setup Node
        uses: actions/setup-node@v2-beta
        with:
          node-version: '16'

      - name: Deploy to Netlify
        run: |
          npm install netlify-cli -g
          netlify deploy --prod --dir .deploy/public --site=${{ secrets.NETLIFY_SITE_ID }} --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} --timeout=600 --message "Deployed on $(date)"

So I can't see anything else i have changed. But now I can see that I have 3 .gitignore folders.. deploy/public, node_modules and public.

[roobyz]

hi @jamestagal... the plenti build setting is putting the static files in deploy/public, however your Nelify yaml is looking for the files in .deploy/public. You need to remove the period in front of ".deploy" from your netlify-deploy.yaml

[jamestagal]

Hi @roobyz Thank you. That solved that and it deployed successfully 👍

Now do I need to create Netlify and Functions folders into the deploy directory and add the submit.js file as you showed in a previous post?

deploy    # Base directory
|_ public                        # Plenti static output
|_ netlify\functions\submit.js   # Netlify function

Regards, Ben

[roobyz]

great to hear @jamestagal! I'll respond in two parts.

---

PART I:

What Netlify wants by default is that the folder path deploy\netlify\functions\ contains the function logic when you pubish your site. I prefer to keep my deployment code separate from my development code, so:

• I created the functions\api\submit.js file in my project root path
• I updated my package.json with a "build" script to replace the function in the deploy folder with the development function code in my project root folder

That way:

• whenever I want to test or develop changes to my function I run: npm build
• I can delete my whole deploy folder with anything in it and have a clean slate deployment without worrying about losing my development code
• I can ensure reproducible outcomes between development and production since my deploy folder would be created from scratch locally, similar to what would happen in a CI/CD environment

---

PART II:

Each platform (Netlify, Cloudflare, etc.) deploys functions on their service using slightly different methods. Partly this is because the service provider will create an vendor-specific "endpoint" on your site that will contain the function. The endpoint is a URL which would trigger the function when you hit the submit button. In addition, the functions offer vendor-specific features that you can call in your function logic. The submit.js function I wrote currently only works on Cloudflare for both reasons.

We would need to write an updated version of submit.js that will also work on Netlify's platform. In addition, we would need to update the contact form component with the correct endpoint URL, so that the submit button actually triggers the function at the correct location. Once those updates are made, we can copy the new function to the deploy\netlify\functions\ folder and it should work.

I can help create a version that will work on both platforms, but it may take a bit of time since I'll be traveling for business over the next couple of weeks.

Roberto

[jamestagal]

Thanks @roobyz That's very detailed and nicely explained. No worries about the time....there is no rush...this is a passion project and interest for me! Traveling again sounds like fun! Stay safe and enjoy it. :)

Regards, Ben

[jamestagal]

Hi @roobyz

Question. If I created the netlify\functions\submit.js folders/file in my project root path, what would the updated "build" script look like in mypackage.json file?
See below for my guess:

"build": "$(cd deploy && rm -rf netlify/functions && cp -r ../netlify/functions/ netlify/)",

I am just looking at your version and modifying it to suit my scenario...But I am not sure...particularly changing the last one from ...functions/)" to ...netlify/)"?

Ben

[roobyz]

hi @jamestagal ... that looks correct. What it is doing is recursively copying any files/folders containing any api logic from the functions folder in the parent directory to the deployment directory. That way any new api calls we might add would get picked up as well.

[jamestagal]

Hi @roobyz How are you going? I'm just looking back over this issue and I was wondering whether you have had a chance to look into creating a Netlify function for this form submission?

Best regards, Ben