Building Forms for Newsletter & Promo Tracking

Docs

Create powerful forms for email collection, promo code tracking, and lead capture with ai4shops.com's Form Builder

Forms are the backbone of data collection on your website. With ai4shops.com's Form Builder, you can create forms for newsletters, contact requests, promo code tracking, and more. Connect them to modals for a seamless user experience!

Prerequisites: Make sure you have created a project before starting this guide.

Video Placeholder: Complete Newsletter Form Setup

Duration: 4-5 minutes | Building a newsletter form and connecting it to a modal

What Forms Can Do

Forms in ai4shops.com are powerful data collection tools:

Email Collection - Build your newsletter list
Contact Requests - Receive customer inquiries
Promo Code Tracking - Track discount code usage and fraud
Lead Capture - Qualify potential customers
Feedback Collection - Gather customer opinions
Survey Responses - Conduct market research

Tracking Capabilities

Every form submission automatically captures:

IP Address - Geographic information
User Agent - Browser and device info
Device Fingerprint - Fraud prevention
Timestamp - When submitted
Referrer - Where they came from

Creating a New Form

Step 1: Navigate to Forms

From your project dashboard, click "Forms" in the sidebar.

Screenshot: Forms list page

File: /_static/guides/form-builder/forms-list-en.png

Step 2: Click "Create Form"

Click the "Create Form" or "New Form" button.

Step 3: Enter Form Details

Fill in the basic information:

Field	Description	Example
Name	Internal reference name	"Newsletter Signup"
Description	Optional notes	"Main website newsletter form"

Screenshot: Form creation dialog

File: /_static/guides/form-builder/create-form-en.png

Step 4: Create the Form

Click "Create" to generate your new form. You'll be taken to the form editor.

Adding Form Fields

Build your form by adding and configuring fields.

Screenshot: Form builder with fields

File: /_static/guides/form-builder/form-builder-en.png

Available Field Types

Type	Icon	Best For
Text	Aa	Names, subjects, general text
Email	@	Email addresses (with validation)
Number	123	Quantities, ages, amounts
Date	Calendar	Birthdates, appointments
Select	Dropdown	Predefined choices
Checkbox	Check	Consent, multiple selections
Radio	Circle	Single choice from options
Textarea	Lines	Long messages, descriptions
Phone	Phone	Phone numbers
URL	Link	Website addresses

Adding Fields

Step 1: Click "Add Field"

In the form editor, click "Add Field" or the + button.

Step 2: Choose Field Type

Select the field type from the menu.

Step 3: Configure Field Properties

Set up the field:

Property	Description
Label	Text shown to users
Name	Internal identifier (no spaces)
Placeholder	Example text inside field
Required	Must be filled to submit
Validation	Rules (min/max length, pattern)
Help Text	Additional guidance

Screenshot: Field properties panel

File: /_static/guides/form-builder/field-properties-en.png

Step 4: Reorder Fields

Drag fields to change their order. Users see fields top to bottom.

Field Validation Options

Validation	Available On	Description
Required	All fields	Field cannot be empty
Min Length	Text, Textarea	Minimum characters
Max Length	Text, Textarea	Maximum characters
Min Value	Number	Minimum number
Max Value	Number	Maximum number
Pattern	Text, Email	Regex pattern match

Build an effective newsletter signup form.

Screenshot: Newsletter form setup

File: /_static/guides/form-builder/newsletter-form-en.png

Recommended Setup

Step 1: Create Form

Name it "Newsletter Signup" or similar.

Step 2: Add Email Field

Field Configuration:

Label: "Email Address"
Name: email
Type: Email
Required: Yes
Placeholder: "you@example.com"

Step 3: Add Name Field (Optional)

Field Configuration:

Label: "First Name"
Name: firstName
Type: Text
Required: No
Placeholder: "John"

Field Configuration:

Label: "I agree to receive newsletter emails"
Name: consent
Type: Checkbox
Required: Yes

GDPR Compliance: Always include a consent checkbox for newsletter signups in the EU. Store proof of consent with each submission.

Step 5: Configure Success Message

Set the message shown after successful submission:

Thank you for subscribing! Check your inbox for a confirmation email.

Best Practices

Keep it minimal - Email-only forms convert better
Add value proposition - "Get 10% off your first order"
Set expectations - "Weekly updates, no spam"
Confirm subscription - Send a welcome email

Track discount code usage and prevent fraud.

Screenshot: Promo code field configuration

File: /_static/guides/form-builder/promo-code-en.png

Step 1: Create or Edit Form

Create a new form or add to existing checkout form.

Field Configuration:

Label: "Promo Code"
Name: promoCode
Type: Text
Required: No
Placeholder: "Enter code"

Step 3: Track Metadata

All submissions automatically include:

Data Point	What It Tracks
IP Address	User location, multiple use detection
Device Fingerprint	Unique device identifier
User Agent	Browser/device info
Timestamp	When code was used

Fraud Prevention

ai4shops.com helps you identify suspicious activity:

Multiple submissions from same IP - Possible code sharing
Same device, different emails - Account gaming
Unusual submission patterns - Bot activity
Geographic anomalies - VPN/proxy usage

Tip: Export your submissions and analyze patterns to identify abuse. Look for clusters of submissions from the same IP or device fingerprint.

Connecting Forms to Modals

Forms become powerful when connected to modals!

Screenshot: Form-modal connection diagram

File: /_static/guides/form-builder/form-modal-connection-en.png

The Connection Flow

User fills modal form → submitForm action → Data saved to Form → View in dashboard

How to Connect

Step 1: Create Your Form

Build your form with the fields you need (see above).

Design a modal with input elements matching your form fields.

Important: Modal input name properties must match form field name properties:

Modal Input Name	Form Field Name
`email`	`email`
`firstName`	`firstName`
`promoCode`	`promoCode`

Open your modal
Go to Settings → Data Connection
Select your form from the dropdown
Click "Connect"

Step 4: Add Submit Button Action

On your modal's submit button:

Add submitForm action
Optionally add closeModal action after

Now submissions from your modal are stored in your form and visible in your dashboard!

Form Submissions & Analytics

View and analyze all your collected data.

Screenshot: Submissions table

File: /_static/guides/form-builder/submissions-table-en.png

Viewing Submissions

Step 1: Open Your Form

Navigate to Forms → [Your Form Name].

Step 2: Click "Submissions"

View the submissions tab to see all collected data.

Step 3: Browse Data

The table shows:

All submitted field values
Submission timestamp
IP address
Device/browser info

Step 4: View Details

Click any row to see full submission details including:

Complete form data
Tracking metadata
Device fingerprint
User agent string

Export Options

Export your data for analysis:

Format	Best For
CSV	Excel, Google Sheets, data analysis
JSON	Developers, API integrations

To export:

Go to Submissions tab
Click "Export"
Choose format (CSV/JSON)
Download file

Tracking Data Details

Field	Description	Use Case
IP Address	Visitor's IP	Geographic insights, fraud detection
User Agent	Browser/OS info	Device analytics
Device Fingerprint	Unique device ID	Fraud prevention
Referrer	Previous page URL	Traffic source analysis
Timestamp	Submission time	Timing patterns

API Integration

Programmatically submit data to your forms.

Form Submission Endpoint

POST https://ai4shops.com/api/forms/{form-id}/submit

Authentication

Include your project API key in the header:

X-API-Key: your-project-api-key

Request Body

{
  "fields": {
    "email": "user@example.com",
    "firstName": "John",
    "promoCode": "SUMMER20"
  }
}

Example: Fetch API

const submitForm = async (formData) => {
  const response = await fetch(
    "https://ai4shops.com/api/forms/your-form-id/submit",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-API-Key": "your-project-api-key",
      },
      body: JSON.stringify({
        fields: formData,
      }),
    },
  );
 
  if (!response.ok) {
    throw new Error("Submission failed");
  }
 
  return response.json();
};
 
// Usage
submitForm({
  email: "customer@example.com",
  firstName: "Jane",
});

Example: Axios

import axios from "axios";
 
const api = axios.create({
  baseURL: "https://ai4shops.com/api",
  headers: {
    "X-API-Key": "your-project-api-key",
  },
});
 
const submitForm = async (formId, data) => {
  const response = await api.post(`/forms/${formId}/submit`, {
    fields: data,
  });
  return response.data;
};

Rate Limiting

API submissions are rate limited:

100 requests per hour per IP address
1000 requests per hour per API key

Exceeding limits returns HTTP 429 Too Many Requests. Implement exponential backoff in your code.

CORS Configuration

Allow your website to submit forms.

Screenshot: Allowed origins settings

File: /_static/guides/form-builder/allowed-origins-en.png

Setting Allowed Origins

Step 1: Go to Project Settings

Navigate to Settings → Security or "Allowed Origins".

Step 2: Add Your Domains

Enter each domain that will submit to your forms:

https://yourwebsite.com
https://www.yourwebsite.com
https://staging.yourwebsite.com

Step 3: Save Changes

Click "Save" to apply the new origins.

Security Considerations

Only add trusted domains - Anyone on allowed domains can submit
Include all variants - www and non-www, http and https
Remove unused origins - Clean up old staging/dev domains
Never use wildcards - Don't allow * in production

Without correct origins, form submissions from your website will be blocked by CORS policy. Check browser console for CORS errors.

Advanced Features

Webhooks (Coming Soon)

Send submissions to your own server in real-time:

Instant notifications
CRM integration
Custom processing

Email Notifications

Get notified of new submissions:

Go to Form Settings
Enable "Email Notifications"
Enter recipient email(s)
Choose notification frequency

Conditional Logic (Pro)

Show/hide fields based on answers:

"If Country = US, show State field"
"If Newsletter = Yes, show Frequency options"

Troubleshooting

Submissions Not Saving

Check form is Active
Verify Allowed Origins include your domain
Check browser console for errors
Ensure required fields are filled

API Errors

Error Code	Meaning	Solution
401	Invalid API key	Check your API key
403	Origin not allowed	Add domain to allowed origins
429	Rate limited	Wait and retry
400	Invalid data	Check field names and types

Verify field names match exactly
Check modal is connected to correct form
Ensure submitForm action is on button

What's Next?

Create beautiful popups connected to your forms

AI Chatbot

Add intelligent chat alongside your forms

See all guides

Building Forms for Newsletter & Promo Tracking

What Forms Can Do

Tracking Capabilities

Creating a New Form

Step 1: Navigate to Forms

Step 2: Click "Create Form"

Step 3: Enter Form Details

Step 4: Create the Form

Adding Form Fields

Available Field Types

Adding Fields

Step 1: Click "Add Field"

Step 2: Choose Field Type

Step 3: Configure Field Properties

Step 4: Reorder Fields

Field Validation Options

Newsletter Email Collection

Recommended Setup

Step 1: Create Form

Step 2: Add Email Field

Step 3: Add Name Field (Optional)

Step 4: Add Consent Checkbox

Step 5: Configure Success Message

Best Practices

Promo Code Tracking

Setting Up Promo Code Tracking

Step 1: Create or Edit Form

Step 2: Add Promo Code Field

Step 3: Track Metadata

Fraud Prevention

Connecting Forms to Modals

The Connection Flow

How to Connect

Step 1: Create Your Form

Step 2: Create Your Modal

Step 3: Connect in Modal Settings

Step 4: Add Submit Button Action

Form Submissions & Analytics

Viewing Submissions

Step 1: Open Your Form

Step 2: Click "Submissions"

Step 3: Browse Data

Step 4: View Details

Export Options

Tracking Data Details

API Integration

Form Submission Endpoint

Authentication

Request Body

Example: Fetch API

Example: Axios

Rate Limiting

CORS Configuration

Setting Allowed Origins

Step 1: Go to Project Settings

Step 2: Add Your Domains

Step 3: Save Changes

Security Considerations

Advanced Features

Webhooks (Coming Soon)

Email Notifications

Conditional Logic (Pro)

Troubleshooting

Submissions Not Saving

API Errors

Modal Connection Issues

What's Next?

Modal Designer

AI Chatbot