Modify email body when using Builder.io form

[sodefa-dmnk]

Hey there,

is it possible to modify the body of a email sent by the Builder.io form component? The mail currently consists of a table of the fields. We need to write something at the top of the email body so it can be forwarded to Zendesk.

Any help or ideas would be greatly appreciated.

[manish-sharma]

Hello, @sodefa-dmnk!

You can possibly use a custom submit event, get the form inputs and then create your own form body before sending it to the email address.

Creating forms in Builder.io - Builder.io

event.preventDefault()
const formdata = {'username': event.target[0].value, 'email': event.target[1].value};
// create your own body or use api endpoint to receive form data to the backend and modify the body before sending it to email
fetch("/send-email", { //
       method: "POST",
       body: formData
})
.then(response => {
       if (response.ok) {
           alert("Message sent successfully!");
       } else {
           alert("Message failed to send. Please try again.");
       }
   })
   .catch(error => {
       console.error("Error:", error);
       alert("An error occurred. Please try again later.");
   });

[sodefa-dmnk]

Hey @manish-sharma,

thanks for your reply! I tried your solution and sent the data to the endpoint https://builder.io/api/v1/form-submit. The problem is that the endpoint seems to modify the body and put the content in a table (see screenshot). Is there any way to suppress this behaviour?

[manish-sharma]

Hello @sodefa-dmnk,

To achieve your goal, you’ll need to utilize your own API endpoint. Upon receiving the form data, you can then modify the body of the request as needed and subsequently forward it to the respective email address. It’s important to note that this process should be implemented on the server-side to ensure data security and proper functionality.

Best regards,