Skip to main content

Contact Form

FormContact Forms & UI 2 options JavaScript

Accessible contact form with honeypot spam protection and a package dropdown prefilled from the URL.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
FormContact
Category
Forms & UI
Used as
Page block — “Form: Contact”
Options
2 editable fields
Built with
PHP, Twig, SCSS, JavaScript
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

The site’s contact form, handled by WordPress itself — no form plugin. Messages arrive by email with the sender as Reply-To.

Highlights

  • Nonce check plus an invisible honeypot field to stop spam bots.
  • “Interested In” dropdown lists the Services packages and is preselected from ?package=, so ad links show which package a lead came from.
  • Editable success and error messages.

Options

Editors add this as Form: Contact in a page's components. Every field it exposes:

Option Field Type Details
Sent Message sentMessage text Default: Thanks — I'll get back to you shortly.
Error Message errorMessage text Default: Something went wrong — please try again or email me directly.

Under the hood

Components/FormContact/

  • _style.scss Styles (SCSS) 123 lines
  • functions.php Fields & data (PHP) 246 lines
  • index.twig Markup (Twig) 62 lines
  • script.js Behaviour (JavaScript) 127 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components