Guides

Create Feedback Widget

Build a feedback widget that collects user feedback and submits it securely via the NativeForm API. This guide focuses on backend implementation while showing frontend previews. Your frontend collects the feedback, and your backend securely submits it to NativeForm using the Submit Response API.

Form Context

Imagine you've already created a feedback form in NativeForm with the following structure. This is the form that will receive submissions from your feedback widget.

User Email*Email
User Fullname*Short Text
Feedback*Long Text

Smart Fields

AI evaluated
ViewChoiceLow effort

Extract the view or page where the feedback was submitted from.

homepageform responsesadmin-panel
TypeChoiceLow effort

Classify the feedback type based on the content.

feature-requestbugcontent-issue
UrgencyChoiceLow effort

Determine the urgency level of the feedback.

lowmediumhigh

Frontend Preview

Here's an example of what a feedback widget might look like. This guide focuses on backend implementation only—the frontend code is not provided, only examples.

Empty Form

Feedback widget empty form

Filled Form

Feedback widget filled form

Final Response

After submitting feedback, NativeForm's AI extracts and maps the values to your form fields. Here's what the extracted response looks like:

User Email*
john.doe@example.com
User Fullname*
John Doe
Feedback*
Please add an export feature on this view

Smart Fields

AI evaluated
View
admin-panel
Type
feature-request
Urgency
medium

Backend Implementation

All API calls must be made from your backend server. Never expose your API key in frontend code. Create an endpoint that receives feedback from your frontend and forwards it to NativeForm.

Sign in to create an API key. Keys follow the format nfk_prefix_secret

Sign inCreate account

Required header

x-nativeform-api-key: nfk_xxxxxx_secret

Backend endpoint examples

Create a backend endpoint that receives feedback from your frontend and submits it to NativeForm. Here are examples in different languages:

Request Format

Your backend endpoint should receive feedback data from your frontend, then format and send it to NativeForm.

POSThttps://www.nativeform.app/api/forms/[form_id]/responses

Request Body

textstringRequired

The feedback text submitted by the user. This is the main content that will be extracted and mapped to your form fields.

respondentobject

Optional user identification. Include email and name if available from your authentication system.

emailstring

User's email address

namestring

User's display name

metadataobject

Optional metadata for tracking. Include page URL, user agent, or any other context that helps you understand where feedback came from.

Response Format

Successful submissions return a 201 status with the response details. Your backend should forward this to your frontend.

•responseId — Unique identifier for the submitted response.
•submittedAt — ISO timestamp of when the response was created.
•channel — Always "API" for programmatic submissions.

Error Handling

Handle API errors gracefully and provide meaningful feedback to users. Never expose internal error details.

Error response example

Common error scenarios

400 Bad Request

The request body failed validation. Ensure you're sending valid JSON with the required fields.

401 Unauthorized

The API key is missing or invalid. Verify your key is correctly set in your environment variables.

404 Not Found

The form ID doesn't exist or you don't have access to it. Check your form ID configuration.

422 Unprocessable Entity

Required form fields couldn't be extracted from the text. The feedback may be too short or unclear.

Best Practices

Follow these recommendations to build a secure and reliable feedback widget.

Never expose API keys

Always make API calls from your backend server. Never include your API key in frontend JavaScript, mobile apps, or any client-side code.

Validate input on the backend

Always validate and sanitize user input before sending it to the NativeForm API. Check that feedback text is not empty and within reasonable length limits.

Include metadata for context

Use the metadata field to include helpful context like the page URL, user agent, or any other relevant information that helps you understand where feedback came from.

Handle errors gracefully

Provide clear error messages to users and log errors on your server for debugging. Never expose internal error details to end users.

Use respondent information when available

If you have user information (email, name) from authentication, include it in the respondent field to enable better tracking and follow-up.

Rate limit submissions

Implement rate limiting on your backend endpoint to prevent abuse and ensure fair usage of your API quota.