Turn Any Element Into a Form

Any <form> element inside a Composer widget becomes a Composer-managed form once it's marked as one. UiChemy then intercepts the submission, applies spam protection, and routes it to whichever actions you've configured. No plugin shortcodes, no drag-and-drop builder.

There are two ways to mark a form:

• In the HTML, add data-atom-form="your-key" directly to the <form> tag.
• In the Layers panel, right-click the form element and choose Mark as form from the context menu.

Use Cases

• Building a custom contact, quote-request, or booking form with exactly the fields and layout you want, not a generic form-plugin template.
• Routing different forms to different destinations, a contact form to Save to database + Email a notification, a lead form to Save to database + Send to a webhook for your CRM.
• Adding a form inside a Theme Builder header, footer, or popup, it works the same as on a regular page.

Step 1: Write Your Form in HTML

Open the Composer widget in Developer Mode (Style tab → Edit Code) and write your form in the HTML panel. A basic contact form:

<form data-atom-form="contact">
  <div class="field">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="field">
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="5"></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

The value in data-atom-form is the form's key, it becomes the form name in the submissions dashboard and the identifier used to route the submission to the right actions. Use a short, descriptive slug: contact, newsletter, quote-request.

Once a form is marked, select it to open its Form panel. The Fields section shows the Form name, which you can change, and every field UiChemy detected, for example email · email. Remove the form with the trash icon at the top.

Step 2: Add Your Fields

UiChemy captures every named field in the form. Use any standard HTML form element:

Name one of your fields email to have it displayed in the Email column of the submissions dashboard and available in email notification templates. Use the HTML required attribute for client-side validation, UiChemy validates on the server side too, but required gives users immediate feedback before they submit.

Step 3: Configure Form Actions

Form actions tell UiChemy what to do when the form is submitted. Select the Composer widget and open its Form panel, On submit section. Actions are set per form, not site-wide. Email addresses and webhook URLs are stored on the server, so they never appear in your page source.

You can turn on any combination for each form. A contact form might use Save to database + Email a notification. A CRM lead form might use Save to database + Send to a webhook.

Email options:

A new form starts with Save to database and Email a notification on. A form you add in code, with no actions set, also saves each entry and emails the site admin.

The webhook sends every field at the top level, plus form (the form key), fields (all fields again), page_url, and submitted (date and time). Services that read fields at the top level, like FluentCRM, find them directly.

Step 4: Style the Form

Style the form in the CSS panel of the code editor. The CSS is auto-scoped to this widget, so your form styles won't affect other forms or elements on the page.

form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 480px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

label {
  font-size: 0.875rem;
  font-weight: 500;
}

input,
textarea,
select {
  padding: 0.625rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
}

button[type="submit"] {
  padding: 0.75rem 1.5rem;
  background: #1a1a1a;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

Step 5: Test the Form

1. Save or update the page in your builder (Elementor, Gutenberg, or Bricks) to publish it.
2. Open the page on the front end (not in the editor).
3. Fill in the form and submit it.
4. Go to UiChemy → Form Submissions to confirm the submission was captured.
5. Check your email if you turned on Email a notification.

Handling Success and Error States

By default, UiChemy shows its own success or error message inline in the form (a .uich-form-message element that toggles between a success and error state) and, on success, applies whichever "After submit" behavior you set in the Form panel (inline message or redirect).

There's no front-end JavaScript event to hook into for custom success/error handling. If you need server-side custom logic, for example, sending data somewhere beyond the built-in actions, use the uich_form_submitted action hook (fires after a submission is processed) or the uich_form_response filter (lets you adjust the response) in a custom code snippet, not from the widget's JS panel.

If It Doesn't Work

Frequently Asked Questions

Related