LogoLogo
  • Introduction
  • Early Access
  • System Requirements
  • Elements FAQ
  • Purchasing & Licensing FAQ
    • License Types
  • Why Elements?
    • Static Website Benefits
    • Build a Digital Garden
  • Community Forum
  • Marketplace
  • Elements App
    • Getting Started
    • Keyboard Shortcuts
    • Migrations
      • Migrating from Blocs
      • Migrating from Classic
      • Migrating from Stacks
    • Design System
    • Editor
      • Apple Intelligence
      • Component Inspector
      • Dark Mode
      • Node Browser
      • Page Manager
      • Preview
      • Resources
      • Responsive Breakpoints
      • Workspaces
    • Components
      • Built-in Components
        • Accordion
        • Background
        • CMS
          • Helpers
          • Developing for the CMS
            • ElementsCMS.php
            • ElementsCMSCollection
            • ElementsCMSItem.php
          • Frontmatter
          • Markdown
          • Online Editor
          • Pretty URLs
          • Template Data
        • Button
        • Container
        • Divider
        • Dropdown
        • Flex
        • Filter
        • Filter Tags
        • Form
        • Gallery
        • Grid
        • Image
        • Menu
        • Modal
        • Modal Close
        • Reveal
        • Image Slider
        • SVG
        • Text
        • Top Pages
        • Typography
        • Video
      • Common Controls
        • Link
        • Layout
        • Sizing
        • Spacing
        • Transitions
        • Effects
        • Filters
        • Transforms
        • Borders
        • Advanced
      • Custom Components
    • Globals
    • Templates
    • Project Settings
      • General
      • Web Icons
      • Advanced
      • Template
      • Publishing
        • How to fix Publishing Issues
    • Theme Studio
      • Theme
      • Screens
      • Page
      • Colors
      • Font Family
      • Font Size
      • Spacing
      • Shadows
      • Border Width
      • Border Radius
      • Typography
    • How to
      • Add an Icon Inside a Button
      • Adjust Smooth Scroll Speed
      • Apply Anchor Scroll Padding
      • Add Snow to your Website
      • Build a Sticky Menu
      • Center Align Components
      • Create a Card
      • Site Banner with Text
      • Make a two column layout
    • Resources
    • Troubleshooting
    • SEO
      • Robots.txt
    • Accessibility
    • Advanced
      • URL Scheme
  • Elements Language
    • Introduction
      • Getting Started
      • Component Styling
    • Element Pack
      • info.json
      • Components
        • info.json
        • Icons
        • Properties.json
          • Grouping Controls
          • Default Values
          • General Structure
            • Title
            • ID
            • Format
            • Visible
            • Enabled
            • Responsive
          • UI Controls
            • Divider
            • Heading
            • Image
            • Information
            • Link
            • Number
            • Resource
            • Segmented
            • Select
            • Slider
            • Switch
            • Text
            • Text Area
            • Theme Border Width
            • Theme Border Radius
            • Theme Color
            • Theme Font
            • Theme Spacing
            • Theme Shadow
            • Theme Text Style
            • Theme Typography
        • HTML Templates
          • Portal
          • Backend
          • Conditional Statements
          • Regular Expressions
          • Looping
          • Includes
          • Image Resources
          • HTML
            • Anchor
            • Raw
            • Editable Content
            • Dropzones
            • Inline templates
          • CSS
          • JavaScript
        • Assets
        • Hooks.js
          • Common use cases
          • Passing data to templates
          • Working with Collections
          • Working with UI Controls
          • Working with Resources
          • Available Functions
            • rw.addAnchor
            • rw.getBreakpoints
            • rw.getBreakpointNames
            • rw.getResponsiveValues
            • rw.resizeResource
            • rw.setProps
            • rw.setRootElement
          • Available Data
            • rw.collections
            • rw.component
            • rw.node
            • rw.pages
            • rw.project
            • rw.props
        • Shared Files
          • Assets
          • Templates
        • Collections
          • Data collections in Hooks.js
          • Accessing Data in Templates
          • Collections in properties.json
      • Resources
      • Templates
      • Themes
    • Troubleshooting
  • Elements Cloud
    • Getting Started
    • Troubleshooting
  • Elements Marketplace
    • Getting Started
    • Add-on Guidelines
    • Marketplace API
  • Branding
    • Logotype
    • Logotype Animated
    • Icon
  • Legal
    • Subscription Terms of Service
    • Cloud Terms of Service
    • Frameworks
Powered by GitBook

We are Realmac Software. We make nice things.

On this page
  • Server Requirements
  • Form Components
  • Form Setup
  • Reply-to Address
  • Form Webhooks
  • Testing Webhooks Locally

Was this helpful?

Edit on GitHub
Export as PDF
  1. Elements App
  2. Components
  3. Built-in Components

Form

Send form data via email or webhooks

The Form Component is a powerful form solution allowing you to send form submissions via your own email server or via a webhook.

Server Requirements

The Form Component in Elements requires PHP 8.1 or newer. You must ensure all pages with a Form use a .php extension.

PHP Server Check

Ideally you should be running PHP 8.4 or newer, but as a minimum you need 8.1. You can easily check this by appending ?apicheck to any page with a Form, for example:

my-website.com/contact/?apicheck

Form Compatibility Checklist

Form Components

The following Components must be placed inside of the "Form" Component wrapper to function correctly.

Form Component
Details

Attachment

Allows users to attach files when sending the form, can be limited in size or specific file type.

Checkbox

Error

Display an error message on form submit.

Input

Label

Radio

Submit

Another component such as a Button or Image can be placed inside this component to trigger the Form Submit function.

Success

Display a success message on form submit.

Form Setup

To recive emails via the Form Component you will need to enter your Email server details. Here’s a breakdown of what each field means and what you’ll need to configure to make it work properly.

Authentication Settings
Details

Host

Email host address. e.g. mail.yourdomain.com

Port

The port number the email server uses for sending messages. - 587: For TLS encryption (most common) - 465: For SSL encryption. - 25: For non-encrypted emails (not recommended).

Encryption

Choose the encryption method required by your email provider. None, TLS, SSL

Username

The email address or username for the SMTP account you’re using to send emails. e.g. admin@yourdomain.com.

Password

The password for your SMTP account.

Email Settings
Details

Subject

The subject of the email you'll receive. e.g. "Website Feedback"

To Name

The name the email will be addressed to. e.g. "Team Realmac"

To Address

The email address the form submission will be sent to. e.g. "support@realmacsoftware.com"

Reply-to Address

In order for Elements to correctly set the “reply-to” header in the outgoing email, the form field name must be set to email, all lowercase.

Form Webhooks

A webhook allows your form submissions to be sent directly to another service, like a database, CRM, or automation tool without needing to check emails or manually process the data. By sending form data to a webhook, you can trigger workflows in Zapier, Make, or Pipedream, making it easy to do the following (and so much more):

• Add a new lead to Airtable or Google Sheets

• Send a follow-up email through Mailchimp or ConvertKit

• Notify your team in Slack or Discord

• Create support tickets in Zendesk or Trello

There's really no limit to what you can do with the new webhooks feature. Whether you’re building a customer support system, a lead capture form, or a dynamic survey that feeds into a database, webhooks unlock powerful automation and customization that email simply can’t match.

Webhooks and Attachments: If you are using an attachment in your form, only the first attached file will be sent via the WebHook.

Testing Webhooks Locally

Webhook submissions require a server environment, so once you publish the page to a server—either a remote server or a local one—you should find the submission works as expected.

If you want to test everything locally, you’ll need to set up a local web server on your Mac. We recommend ServBay for this.

Here’s a quick guide:

  1. Install ServBay

  2. Publish your Elements site to a local folder

  3. In ServBay, create a new site and point the root directory to your published folder

  4. Open the site in your browser through ServBay for full local testing—including Forms and webhooks

PreviousFilter TagsNextGallery

Last updated 17 hours ago

Was this helpful?