Problem passing form submission data to custom function

I am not understanding how to pass form submission data to custom (serverless?) functions.

As I understand it, I can set outgoing Webhooks upon form submissions and can send a POST request to a custom function, which includes the payload from the form submission, by specifying the URL of the Webhook as [myNetlifyDomain]./netlify/functions/testFunc.

In my testFunc function, I have:

exports.handler = async (event, context, callback) => {

	console.log(event, context, callback);

	const body = JSON.parse(event.body).payload;

	console.log(body);
	return callback(null, {
		statusCode: 200,
		body: body
	});
}

I am trying to log the context of the form submission so I can then create a call to a 3rd-party API in order to add users to my mailing list.

When I fill out and submit a form, I go to see the output of testFunc and I get this:
{"errorMessage":"Unexpected end of JSON input","errorType":"SyntaxError","stackTrace":["JSON.parse (<anonymous>)","n.handler (/var/task/testFunc.js:1:1104)"]}

This appears both on the front-end from the URL: https://practical-raman-142310.netlify.com/.netlify/functions/testFunc and from the Netlify back-end functions log.

My forms typically include two fields, one for name and one for a comment or email.

I was originally trying to process the mailing list user creation from the submission-created.js function but couldn’t successfully troubleshoot submission errors as the function could not be accessed directly from the URL (permission denied error) and I couldn’t see enough of the error in the Netlify functions log (the log would be cut off inexplicably).

Perhaps I am going about this the wrong way but I contacted someone from Netlify a couple months ago and they told me about this method of passing form submitted data to a custom function.

Any help troubleshooting this would be greatly appreciated.
Thank you,

Are you POSTing to your endpoint from code, or are you submitting an HTML form? In the latter case I think event.body should be a querystring.

You can parse it using querystring:

const params = querystring.parse(event.body);

See: https://github.com/netlify/functions/blob/master/src/lambda/hello_name_post.js

1 Like

Thanks for the response @RobertBroersma. Apparently the response should look something like this: listFormSubmissions but I’m not entirely sure how to parse that. Should I not be using export.handler = (event, context, callback) => { ... } ?

Ah, I understand now what you’re trying to do. I’m not sure how custom webhooks from forms work, but using submission-created.js sounds like the way to go for you.

You mention you couldn’t access the URL in the browser, this is expected for security reasons. submission-created.js should be triggered whenever you make a submission to your Netlify form with the payload you specified, there’s no need to call it manually.

Hope it helps!

1 Like

Thanks for pitching in, @RobertBroersma!

1 Like

I was using submission-created.js but I found myself unable to log the output from the callback (can’t access the function directly). Outputting to console.log didn’t provide any output either.

Basically, I am trying to collect the form data, package it up and send it to an API. My problem was that I could not debug the response from the API. I reached out to someone on the Netlify staff and they pointed me towards using Webhooks to call a function. It seems the problem I’m having now is accessing the data that is supposed to be passed along to the function with the Webhook.

Does that make sense? I’m not sure if my process flow is right here but ultimately I couldn’t debug responses from the APIs I was using so had to abandon using submission-created.js alone.

It sounds to me like it should work. I have no further ideas, I’d wait for a staff member’s input!

Hi @songfarm-david. Logs not working on event-triggered functions are a known issue. I recommend that you use a different name while debugging your function so you will be able to view logs and trigger the function manually. Also note that if you use proxy redirect rules to trigger your function, that will also not have logs and is part of the same issue.

Additionally, the form data should be in the body of the request that triggered your function. Are you seeing something different?

Hopefully that’ll help your function to actually log things and help with your debugging.

Hey folks, long time no see! We think we have a fix live now so that event-triggered functions now show logs as expected. Please let us know if you aren’t seeing that and hopefully provide us some reproduction steps so we can reopen the bug report based on that if needed.

I am not seeing console logs from my submission-created function, is there a chance there might still be an issue with logs in event-triggered functions?

This is the contents of my submission-created.ts file:

import { builder, Handler } from '@netlify/functions'

const myHandler: Handler = async (event) => {
  console.log({ event })

  return {
    data: JSON.stringify({ event }),
    statusCode: 200,
  }
}

const handler = builder(myHandler)

export { handler }

Hi @keneucker,

Why does this appear like you’re using a builder function for a form submission handler?

@hrishikesh

What does a form submission handler look like?

Something like this when using esbuild in netlify.toml:

export async function handler(event) {
  return {
    body: JSON.stringify(event),
    statusCode: 200
  }
}

Dropping the use of builder makes the function work. Thanks for pointing that out, @hrishikesh.