Making FormIt Work with Custom Frontend Markup

The original example showed a custom-designed contact form wired to FormIt, but the markup was missing a key detail: the visible inputs had IDs, while the actual field names FormIt needed were incomplete or inconsistent.

Example setup

[[!FormIt?
  &hooks=`email`
  &emailTpl=`sentEmailTpl`
  &emailSubject=`testmail`
  &emailTo=`sitename@gmail.com`
  &submitVar=`otpravka`
]]

What usually goes wrong

• fields have id attributes but no meaningful name attributes
• the form is submitted from a custom link instead of a real button without fully matching FormIt expectations
• the email template expects placeholders the form never sends

The safe approach

Start by making the HTML form valid before styling it:

• every field that FormIt should process must have a proper name
• the form action should point to the current resource or the intended handler resource
• the email template should only reference placeholders that are actually posted

Once that foundation is correct, custom JavaScript submission and custom button markup become much safer.