How to Collect Data From Forms

Collecting data from your website visitors is crucial for engagement, feedback, and leads. Static.app simplifies this process, eliminating the need for complex server-side code or third-party form builders. You can easily capture any data from your existing HTML forms by adding a single attribute.

Setting Up the Form for Data Collection

Option 1: Uploading a Website with an Existing Form

If your website already contains an HTML form, you can upload the entire site to Static.app:

1. Navigate to the Site's page and add a new site.
2. In your Static.app dashboard, go to Sites and click on your newly uploaded website.
3. Navigate to the Pages section (or Files) and locate the HTML file containing your form (e.g., index.html   , contact.html   ).
4. Click the three-dot menu next to the file and choose Edit Code.

Option 2: Creating a New Page/File for Your Form

If you want to add a new form to an existing Static.app site or create a new page specifically for your form:

1. Log in to your Static.app account and select the website you want to add the form to from your Sites list.
2. Add a new page or upload a new file.
3. If you just created a blank page/file, click the three-dot menu next to it and select Edit Code.
4. Add your HTML form structure within this file.
5. Click Save Changes.

Enable Form Data Collection

Now, you'll modify the HTML code to activate Static.app's form collection feature.

1. Navigate to the Pages or Files section of your website.
2. Find the HTML file containing your form.
3. Click the three-dot menu next to it and select Edit Code.
4. In the code editor, find your opening <form>   tag.
5. Add the static-form   attribute to your <form>   tag.

<form static-form>...</form>

6. To group submissions into a specific category (e.g., "job-applications," "newsletter-signups"), add the static-form-id   attribute.

<form static-form static-form-id="contacts">...</form>

You can then now view and manage your submissions directly from your dashboard.

Callback For Forms

You can add a callback for additional actions after your forms are submitted:

1. This could be displaying a pop-up message
2. Redirecting to another page
3. Sending analytics events

Add the static-form-success-callback="successCallback"  attribute to your <form>  tag.

And below, add a script that will be called after the callback is triggered

<script>
window.successCallback = function() {
  window.location.href = 'thanks.html';
};
</script>

⚠️ Important: Troubleshooting & Script Conflicts

To ensure your form submits correctly, please follow these guidelines:

1. Remove Custom Submission Scripts

If you have custom JavaScript that uses event.preventDefault()   or form.submit()  , it will likely conflict with the Static.app collection script.

• The Error: Your custom script stops the browser's default action, preventing Static.app from "seeing" and capturing the data.
• The Fix: Remove any custom addEventListener("submit", ...)   logic. Let the Static.app script handle the submission entirely.

2. Check your 'Action' and 'Method'

• Action: Ensure your <form>   tag does not have action="#"  . If you want to redirect a user after submission, use a real URL (e.g., action="/thank-you.html"  ) or leave the action attribute out entirely.
• Method: Ensure the method is set to POST   (or removed, as Static.app defaults to the correct handling).

3. Required "Name" Attributes

Every input field must have a name   attribute (e.g., <input name="email">  ). Without this, the data is "anonymous," and Static.app cannot label the information in your dashboard.

4. Avoid ID Conflicts

Ensure your form inputs do not use IDs that are being manipulated by other scripts on your page, as this can lead to null   errors in the browser console that stop all scripts from running.