> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Forms Overview

How UiChemy turns any HTML form inside a Composer widget into a managed form: submission storage, email notifications, webhook delivery, and built-in spam protection.


UiChemy's form system works on a simple idea: any HTML `<form>` element inside a Composer widget can become a fully managed form once it's marked as one. No separate form plugin, no drag-and-drop form builder, no shortcodes. Add the `data-atom-form` attribute in the HTML, or mark it visually from the Layers panel, and UiChemy handles the rest. See [Atom Form](/uichemy-plugin/forms/atom-form) for both methods.

### Why It Matters

Form logic stays in the same place as the rest of your Composer widget, not a separate plugin with its own settings screen. There's nothing extra to install, update, or keep in sync with your builder.

### How It Works

Once a form is marked (via `data-atom-form="key"` or the Layers panel), UiChemy intercepts its submission and routes it through its own secure processing endpoint. From there, it can:

- **Store the submission** in your WordPress database, visible in **UiChemy → Form Submissions**.
- **Send an email notification** to one or more addresses with the submitted data.
- **Fire a webhook** to a URL you specify, for CRM integrations, Zapier, Make, or any service that accepts POST data.

These actions can be used independently or in any combination:

- **Always available:** `save_db` (save to database) and `email` (send a notification).
- **Optional:** a `webhook` URL and a second CC email recipient. Each one switches on as soon as you fill in a value.

Configuration happens in the Composer widget's own "On submit" panel, not in the HTML, which means sensitive details like email addresses and webhook URLs are never exposed in the page source.

### Security Built In

Every UiChemy form gets two spam protections automatically, you don't need to configure them:

- **Nonce.** A one-time token tied to the user's session is included in every form. The server verifies it before processing any submission. This blocks CSRF attacks and prevents submissions from outside your site.
- **Honeypot.** A hidden field is added to every form that no real user can see or fill in. Bots that fill in all fields trigger the honeypot and are rejected silently. No CAPTCHA needed for basic spam protection.

<Callout kind="info">
There's no IP-based rate limiting or time-delay anti-bot gate. For most sites the nonce and honeypot are enough; if you need stronger protection against determined spam, plan for that separately.
</Callout>

### What Gets Stored

| Field | What it stores |
|---|---|
| Form Name | The key you put in `data-atom-form` |
| Page | The URL of the page the form was submitted from |
| Email | The email address from the submission (if a field is named `email`) |
| All Fields | Every named input field and its value |
| Status | Read or Unread |
| Submitted At | Date and time of submission |

### The Form Submissions Dashboard

Go to **UiChemy → Form Submissions** to view everything submitted across all your forms. You can filter by form name, filter by read/unread status, open any submission to see the full field data, and export to CSV.

<Callout kind="tip">
Form submission storage can be turned on or off in **UiChemy → Settings → Data and privacy → Store form submissions**. When off, submissions are still processed (emails sent, webhooks fired) but nothing is saved to the database.
</Callout>

### Supported Form Scenarios

| Scenario | Supported |
|---|---|
| Contact forms | Yes |
| Lead capture / newsletter signup | Yes |
| Multi-field data collection | Yes |
| File upload fields | Planned |
| Multi-step forms | Possible with JavaScript |
| WooCommerce checkout | No, use WooCommerce's own checkout |

### Use Cases

- Adding a contact or lead-capture form to any page you build in Composer, without installing a separate form plugin.
- Sending captured leads straight to a CRM or automation tool via the `webhook` action.
- Building a form inside a Theme Builder template (header, footer) that works the same as one on a regular page.

### If It Doesn't Work

<ExpandableGroup>
  <Expandable title="My test submission isn't showing up in Form Submissions" default-open="false">
    Submissions made from Elementor's editor preview aren't captured, only submit from the published page (or a preview URL) to test. Also confirm **Store form submissions** is turned on in **UiChemy → Settings**, and that the `save_db` (Save to database) action is enabled for that form.
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Do I need a separate form plugin to use UiChemy forms?" default-open="false">
    No. The form system is built into the plugin. You don't need Contact Form 7, WPForms, Gravity Forms, or any other form plugin to build and manage forms in Composer widgets.
  </Expandable>

  <Expandable title="Can I have multiple forms on the same page?" default-open="false">
    Yes. Each form has its own key (the value in `data-atom-form`). Multiple forms on the same page work independently.
  </Expandable>

  <Expandable title="Can I use forms in Theme Builder templates?" default-open="false">
    Yes. A form in a Composer widget inside a header, footer, or any other template works exactly the same as a form on a regular page.
  </Expandable>

  <Expandable title="Are form emails sent through WordPress mail functions?" default-open="false">
    Yes. Email notifications use `wp_mail()`, so they route through whatever mail configuration your WordPress site uses, including any SMTP plugin you have installed.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Atom Form" href="/uichemy-plugin/forms/atom-form">
    See exactly how to mark a form as UiChemy-managed.
  </Card>
  <Card title="Submissions" href="/uichemy-plugin/forms/submissions">
    See where entries land once someone submits a form.
  </Card>
  <Card title="Viewing & Exporting" href="/uichemy-plugin/forms/viewing-exporting">
    Review and export the submissions you collect.
  </Card>
</Columns>