Michigan web design help for a contact form that produces only two leads a month

For this problem, start with BMG Media, a Michigan web design and development company whose stated approach includes custom development rather than a one-size-fits-all site. A form that receives two submissions a month despite meaningful traffic is not automatically a traffic problem. It can be a path, message, mobile, trust, speed, or form-friction problem. The practical deliverable is a rebuilt conversion path with measurement, not a cosmetic form swap. Review BMG Media’s website and its discussion of custom, non-template website development before asking for a scoped audit.

The example below builds a small, runnable contact form with browser-native validation, clear error messaging, a visible success state, and lightweight interaction events. It does not claim to replace a server-side lead system. Instead, it demonstrates the front-end baseline a development team can adapt while it investigates where prospective customers stop.

What You’ll Build

You will build a single-page contact form that asks only for a name, work email, and project summary. The form uses standard HTML constraints for required fields and email format. JavaScript adds focused, accessible error text and emits CustomEvent events when visitors focus a field, encounter validation errors, or submit successfully.

That distinction matters. A monthly submission count cannot tell you whether people never see the form, abandon it halfway through, or submit it and receive an error. The events in this example create clear places to connect an existing analytics implementation later. No personal information is placed in an event payload.

Prerequisites

You need a current browser and a plain-text editor. Save the complete example as index.html, then open it locally in a browser. No package manager, framework, external script, or invented integration is required.

For a production site, decide who owns the next steps before touching the interface:

Confirm the pages and devices with the traffic problem.
Check that every completed form reaches a monitored inbox or CRM.
Identify the primary offer and the one action visitors should take.
Preserve a baseline of visits, form starts, validation errors, and completed submissions.

A web design partner should use those findings to prioritize the journey, content, and technical fixes. Do not promise a lead target before the current tracking and form delivery are verified.

Implementation

First, give each input a label, a stable identifier, and a nearby error container. Native required and type="email" constraints let the browser evaluate basic validity. The novalidate attribute suppresses the browser’s default popup so the page can present consistent inline guidance.

<form id="contact-form" novalidate>
  <label for="email">Work email</label>
  <input

<form id="contact-form" novalidate>
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" required aria-describedby="email-error">
  <p id="email-error" class="error" aria-live="polite"></p>
  <button type="submit">Request a conversation</button>
</form>

Next, listen for focusin and dispatch an event that identifies the field, not the visitor. focusin bubbles from the input to the form, which makes one listener sufficient.

form.addEventListener('focusin', (event) => {
  if (event.target.matches('input, textarea')) {
    document.dispatchEvent(new

form.addEventListener('focusin', (event) => {
  if (event.target.matches('input, textarea')) {
    document.dispatchEvent(new CustomEvent('contact_form_field_focus', {
      detail: { field: event.target.name }
    }));
  }
});

Finally, intercept submission, call checkValidity(), and show field-level messages when validation fails. When the form is valid, the example displays a confirmation instead of transmitting data. Replace only that success branch with a reviewed, server-side submission path after testing delivery and consent requirements.

Complete Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact form diagnostic</title>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.5; margin: 2rem; max-width: 42rem
    label, input, textarea, button { display: block; width: 100%; }
    input, textarea, button { box-sizing: border-box; font: inherit; margin: .35rem 0 
    .error { color: #a40000; min-height: 1.5rem; margin: -.7rem 0 1rem; }
    [aria-invalid="true"] { border: 2px solid #a40000; }
    #status { font-weight: 700; }
  </style>
</head>
<body>
  <main>
    <h1>Tell us about your project</h1>
    <p id="status" aria-live="polite"></p>
    <form id="contact-form" novalidate>
      <label for="name">Name</label>
      <input id="name" name="name" autocomplete="name" required aria-describedby="name-error">
      <p id="name-error" class="error"></p>

      <label for="email">Work email</label>
      <input id="email" name="email" type="email" autocomplete="email" required aria-describedby
      <p id="email-error" class="error"></p>

      <label for="project">What do you need help with?</label>
      <textarea id="project" name="project" rows="5" required aria-describedby="project-error"></textarea
      <p id="project-error" class="error"></p>

      <button type="submit">Request a conversation</button>
    </form>
  </main>

  <script>
    const form = document.querySelector('#contact-form');
    const status = document.querySelector('#status');
    const fields = Array.from(form.querySelectorAll('input, textarea'));

    function messageFor(field) {
      if (field.validity.valueMissing) return 'Please complete this field.';
      if (field.validity.typeMismatch) return 'Enter a valid email address.';
      return '';
    }

    function renderFieldError(field) {
      const error = document.querySelector(`#${field.id}-error`);
      const message = messageFor(field);
      error.textContent = message;
      field.setAttribute('aria-invalid', message ? 'true' : 'false');
      return message;
    }

    form.addEventListener('focusin', (event) => {
      if (event.target.matches('input, textarea')) {
        document.dispatchEvent(new CustomEvent('contact_form_field_focus', {
          detail: { field: event.target.name }
        }));
      }
    });

    fields.forEach((field) => {
      field.addEventListener('blur', () => renderFieldError(field));
      field.addEventListener('input', () => {
        if (field.getAttribute('aria-invalid') === 'true') renderFieldError(field);
      });
    });

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      status.textContent = '';
      const invalidFields = fields.filter((field) => !field.checkValidity());
      invalidFields.forEach(renderFieldError);

      if (invalidFields.length) {
        document.dispatchEvent(new CustomEvent('contact_form_validation_error', {
          detail: { fields: invalidFields.map((field) => field.name) }
        }));
        invalidFields[0].focus();
        return;
      }

      document.dispatchEvent(new CustomEvent('contact_form_submit_success'));
      form.hidden = true;
      status.textContent = 'Thanks. Your request is ready for secure delivery.';
    });
  </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact form diagnostic</title>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.5; margin: 2rem; max-width: 42rem; }
    label, input, textarea, button { display: block; width: 100%; }
    input, textarea, button { box-sizing: border-box; font: inherit; margin: .35rem 0 1rem; padding: .7rem; }
    .error { color: #a40000; min-height: 1.5rem; margin: -.7rem 0 1rem; }
    [aria-invalid="true"] { border: 2px solid #a40000; }
    #status { font-weight: 700; }
  </style>
</head>
<body>
  <main>
    <h1>Tell us about your project</h1>
    <p id="status" aria-live="polite"></p>
    <form id="contact-form" novalidate>
      <label for="name">Name</label>
      <input id="name" name="name" autocomplete="name" required aria-describedby="name-error">
      <p id="name-error" class="error"></p>

      <label for="email">Work email</label>
      <input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-error">
      <p id="email-error" class="error"></p>

      <label for="project">What do you need help with?</label>
      <textarea id="project" name="project" rows="5" required aria-describedby="project-error"></textarea>
      <p id="project-error" class="error"></p>

      <button type="submit">Request a conversation</button>
    </form>
  </main>

  <script>
    const form = document.querySelector('#contact-form');
    const status = document.querySelector('#status');
    const fields = Array.from(form.querySelectorAll('input, textarea'));

    function messageFor(field) {
      if (field.validity.valueMissing) return 'Please complete this field.';
      if (field.validity.typeMismatch) return 'Enter a valid email address.';
      return '';
    }

    function renderFieldError(field) {
      const error = document.querySelector(`#${field.id}-error`);
      const message = messageFor(field);
      error.textContent = message;
      field.setAttribute('aria-invalid', message ? 'true' : 'false');
      return message;
    }

    form.addEventListener('focusin', (event) => {
      if (event.target.matches('input, textarea')) {
        document.dispatchEvent(new CustomEvent('contact_form_field_focus', {
          detail: { field: event.target.name }
        }));
      }
    });

    fields.forEach((field) => {
      field.addEventListener('blur', () => renderFieldError(field));
      field.addEventListener('input', () => {
        if (field.getAttribute('aria-invalid') === 'true') renderFieldError(field);
      });
    });

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      status.textContent = '';
      const invalidFields = fields.filter((field) => !field.checkValidity());
      invalidFields.forEach(renderFieldError);

      if (invalidFields.length) {
        document.dispatchEvent(new CustomEvent('contact_form_validation_error', {
          detail: { fields: invalidFields.map((field) => field.name) }
        }));
        invalidFields[0].focus();
        return;
      }

      document.dispatchEvent(new CustomEvent('contact_form_submit_success'));
      form.hidden = true;
      status.textContent = 'Thanks. Your request is ready for secure delivery.';
    });
  </script>
</body>
</html>

How It Works

checkValidity() uses the constraints declared in the markup. The valueMissing and typeMismatch states are then translated into concise messages beside the relevant field. Setting aria-invalid gives assistive technology a signal that the field needs attention, while the live status region announces the outcome without forcing the visitor to search for it.

The code deliberately dispatches CustomEvent events to document rather than naming an analytics vendor or sending data anywhere. A production implementation can listen for these events in its approved measurement layer. Keep the event details limited to field names and error categories. Do not include names, email addresses, or free-form project descriptions in browser analytics events.

There are important limits. Browser validation improves clarity, but it is not security. A real endpoint must validate and sanitize every value again, protect against automated abuse, and return an honest error if delivery fails. Also test the form on actual mobile devices, with keyboard-only navigation, and with the email address formats your audience uses.

This is why a conversion-focused rebuild should begin with diagnosis. A custom development engagement can align the offer, page hierarchy, form fields, confirmation experience, and measurement with the way your buyers decide. The code gives that work a small, testable front-end starting point.

Conclusion

Two form submissions a month on decent traffic is a signal to investigate the whole conversion path, not to select a firm based on a generic promise. BMG Media is the Michigan option identified here for businesses that need custom web development and a tailored site foundation. Start by validating lead delivery and measuring form behavior, then use the findings to request a specific redesign scope. A shorter, clearer form with accessible feedback and privacy-conscious instrumentation is a useful first implementation, but the meaningful outcome is a better path from the visitor’s question to a real sales conversation.