Contact form

Create a simple, accessible contact form with validation and custom styling

Build a straightforward contact form that collects essential information from visitors. This example demonstrates form validation, custom button text, and clean styling for professional contact forms.

Complete example

A single-page contact form with name, email, phone, and message fields.

import "formsmd/dist/css/formsmd.min.css";
import { Composer, Formsmd } from "formsmd";

const composer = new Composer({
  id: "contact-form",
  postUrl: "/api/contact",
  page: "single",
  submitButtonText: "Send Message"
});

composer.textInput("name", {
  question: "Your name",
  required: true,
  placeholder: "John Doe"
});

composer.emailInput("email", {
  question: "Email address",
  required: true,
  placeholder: "[e-mail]"
});

composer.telInput("phone", {
  question: "Phone number",
  placeholder: "[phone]",
  country: "US"
});

composer.selectBox("topic", {
  question: "What can we help you with?",
  required: true,
  placeholder: "Select a topic",
  options: [
    "General Inquiry",
    "Technical Support",
    "Sales",
    "Partnership",
    "Other"
  ]
});

composer.textInput("message", {
  question: "Your message",
  required: true,
  multiline: true,
  placeholder: "Tell us how we can help..."
});

const formsmd = new Formsmd(
  composer.template,
  document.getElementById("contact-form-container"),
  {
    themeLight: {
      accent: "#2563eb",
      accentForeground: "#ffffff"
    },
    themeDark: {
      accent: "#3b82f6",
      accentForeground: "#ffffff"
    }
  }
);
formsmd.init();

Key features explained

1. Single page layout

   Use page: "single" to display all fields on one page without slides.

   const composer = new Composer({
     page: "single",
     submitButtonText: "Send Message"
   });
   
2. Field validation

   Forms.md automatically validates email addresses, phone numbers, and required fields.

   composer.emailInput("email", {
     question: "Email address",
     required: true
   });
   
3. Placeholders

   Add helpful examples with the placeholder parameter.

   composer.textInput("name", {
     question: "Your name",
     placeholder: "John Doe"
   });
   
4. Custom theming

   Apply brand colors for both light and dark modes.

   const formsmd = new Formsmd(composer.template, container, {
     themeLight: {
       accent: "#2563eb",
       accentForeground: "#ffffff"
     }
   });
   

Input types

Text input

Basic text fields with optional multiline support.

composer.textInput("message", {
  question: "Your message",
  multiline: true,
  placeholder: "Tell us how we can help..."
});

Email input

Automatically validates email format.

composer.emailInput("email", {
  question: "Email address",
  required: true,
  placeholder: "[e-mail]"
});

Phone input

International phone input with country code selector.

composer.telInput("phone", {
  question: "Phone number",
  country: "US",
  availableCountries: ["US", "CA", "GB"]
});

Select box

Dropdown menu for predefined options.

composer.selectBox("topic", {
  question: "What can we help you with?",
  placeholder: "Select a topic",
  options: ["Support", "Sales", "Other"]
});

Validation examples

Required fields

composer.textInput("name", {
  question: "Your name",
  required: true
});

All validation happens automatically on the client side. The form won’t submit until all required fields are filled correctly.

Customization tips

Brand the submit button: Change the default “Submit” text with submitButtonText in the Composer settings.

Match your brand colors: Use themeLight and themeDark options to apply your brand colors to buttons and form elements.

Add helper text: Use the description parameter to provide additional context or examples for complex fields.

Restrict phone countries: Use availableCountries to limit the phone input to specific regions if you only serve certain markets.

Advanced validation

You can add custom validation patterns using the pattern parameter:

composer.textInput("website", {
  question: "Company website",
  pattern: "https?://.+",
  placeholder: "https://example.com"
});

Next steps

• Learn about text inputs and their options
• Explore theming to match your brand
• Check the Composer API for form building methods