Turn Any Element Into A Form

Any <form> element inside a Proton widget becomes a Protuno-managed form the moment you add data-atom-form="your-key" to it. Protuno intercepts the submission, applies spam protection, and routes it to whichever actions you have configured. No plugin shortcodes, no drag-and-drop builder.

Step 1: Write Your Form In HTML

Open the Proton 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 you put 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.

Step 2: Add Your Fields

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

The name attribute is required. Fields without a name attribute are not captured in the submission.

The email field: Name one of your fields email to have it displayed in the Email column of the submissions dashboard and available in email notification templates.

Required fields: Use the HTML required attribute for client-side validation. Protuno validates on the server side as well, but required gives users immediate feedback before they submit.

Step 3: Configure Form Actions

Form actions tell Protuno what to do when the form is submitted. Actions are configured in Protuno → Settings → Forms, not in the HTML. This keeps sensitive details (email addresses, webhook URLs) out of your page source.

Available actions:

You can enable any combination of these for each form key. For example, a contact form might use save_db + email. A CRM lead form might use save_db + webhook.

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 will not 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. Click Update in Elementor to publish the page
2. Open the page on the front end (not in the editor)
3. Fill in the form and submit it
4. Go to Protuno → Form Submissions to confirm the submission was captured
5. Check your email if you configured the email action

Handling Success And Error States

By default, after a successful submission the form resets to its empty state. You can add custom success and error handling with JavaScript in the JS panel:

document.querySelector('[data-atom-form="contact"]').addEventListener('atom-form:success', function(e) {
  // e.detail contains the server response
  document.querySelector('.success-message').style.display = 'block';
  e.target.style.display = 'none';
});

document.querySelector('[data-atom-form="contact"]').addEventListener('atom-form:error', function(e) {
  document.querySelector('.error-message').textContent = 'Something went wrong. Please try again.';
});

Frequently Asked Questions

Do I need to add the nonce or honeypot myself? No. Protuno adds the nonce and honeypot fields to every data-atom-form element automatically. You do not need to add them to your HTML.

Can I have two different forms on the same page? Yes. Give each form a different key: data-atom-form="contact" and data-atom-form="newsletter". They submit and process independently.

Can the form send data to a third-party CRM like HubSpot or Salesforce? Yes, via the webhook action. Configure your CRM's webhook URL in Protuno → Settings → Forms. The form data is POSTed as JSON. Most CRMs, as well as Zapier and Make, can receive data this way.

Is the email address in my notification email exposed in the page source? No. Form action configuration (email addresses, webhook URLs) is stored server-side and never rendered into the HTML. The page source shows only the data-atom-form attribute and your form fields.

Related

• Forms Overview
• Viewing & Managing Submissions
• Anti-Spam Protection
• Developer Mode: The Code Editor