we are having a problem to style the notification email send after the form is submitted. is it possible that we can add attribute in payload, for example
<input type =“text” name =" heading" value=“First Heading”, data-itsHeading=“true” /> becomes { “title”: “heading1”, “name”: “heading”, “value”: “First Heading”, “itsHeading”:“true” }
now data-someValue is ignored by Netlify although its serialised to formData
I’m not sure what you’re trying to do. Could you please elaborate?
thanks @hrishikesh for response.
we are trying to style the email that goes out after the form is submitted. there we need some kind of logic to understand how the element have to styled. for that we have data-attribute in our html. which we want it to preserve till event.body in submission-created. as far i have understand now there is only three fields (title, name and value ) in this payload that are collected from form.so is there is way to add other attribute.
Given that you are doing this:
let formData = new FormData()
let emailInput = form.querySelector('input[type="email"]')
formData.append('email', emailInput.value)
// so on...
formData.append('emailAttribute', emailInput.getAttribute('data-itsHeading'))
This will add it to the formData once you’ll send the POST request to your fetch.
yes true, it is added to the FormData. the problem is in submission-created.
Given you form is send
exports.handler = async (event, context) => {
const payload = JSON.parse(event.body).payload
payload.ordered_human_fields.itsHeading is undefined.
Personally, I haven’t tried using payload. I send form data using body: new URLSearchParams(formData).toString(), (in fetch) and access it through event.body. I receive the data like:
const submittedData = event.body.split('&')
const parameter1 = decodeURIComponent(submittedData[0].substr(6).replace(/\+/g, '%20'))
// submittedData[0[ is the first parameter you appended to your form data.
// substr(6) is used to remove the parameter name and the equal to sign. For example,
// if you're having something like `name=foo`, then it would be, substr(5) (name has 4 characters + 1).
// finally, the replace part is required if your input had spaces, if not, you can ignore it.
// Decode this entire string and use it for further processing using decodeURIComponent
That’s how I handle this when I have to. I’m not sure if this is the only or the best way, but it works for me.
@hrishikesh the problem is payload created by netlify don’t have these data. so the question again is … how can add these data to payload. please try once to test with submission-created function. can you receive those custom attribute.
I am using this in a custom function, but I see no reason why it won’t work in simple Netlify forms. The submission-created function and any normal function is basically the same. If you want, you can try removing all Netlify form attributes and create a custom function and send the post request to that function. For example, if you name your function formSubmit.js, you can access it like: fetch('/.netlify/functions/formSubmit/', {}...) and it will do the trick. I’m currently using this setup with the function code I shared above and it’s working fine for me. If you want, you can check it here: https://github.com/Hrishikesh-K/Comments/blob/main/functions/addComment.js
I could surely check why it’s not working for you, but it would be easier for me if you could share your example that’s already setup instead of me having to make one from scratch.
@ravi I think all fields have to be in the html upon form submission for Netlify to pickup the form data. A workaround that I’m using is having a hidden field in the form and populate it with JavaScript before submission. A bit quirky but it definitely works.
@tomrutgers yes that works. but here the form is dynamic (created in a CMS ) and quite long. so would be logical and convenient to have something to differentiate the elements.