Guide · 12 minute read

How to add an SMS contact form to any website

Use this when the searcher wants the actual setup path: a form on the website, an SMS to the owner, and no fragile email notification chain.

Benjam Indrenius

Published 2026-06-01

The setup pattern

To add a contact form that sends SMS alerts, the website should do as little as possible. Render a target element, load one public script, and let the lead system own the form submit, SMS delivery, consent text, and follow-up flow.

Install path

The website should only load the lead system

Step 1

Script tag

The page loads the widget from localbot.

Step 2

Submit path

The widget sends the lead to localbot, not to your site backend.

Step 3

SMS alert

The owner gets the lead on the phone with callback context.

Why this guide uses localbot source as the reference

This setup is based on the same install path documented for AI coding agents in content/docs/ai-agents/onboarding.mdx and the same framework snippets generated from src/lib/agent-install.ts. Those are the source-backed files localbot uses to tell agents how to install the widget correctly.

The important constraint is simple: do not build another form, do not add a new backend route, and do not wire Twilio into the customer website. localbot owns that path after the script loads.

HTML install

For a static HTML site, Webflow custom code area, Squarespace code block, or any CMS that lets you paste HTML, add the target div and script once.

HTML

<div id="localbot-contact"></div>
<script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>

Next.js install

In Next.js App Router, use next/script and lazy loading. This keeps the page render clean while still loading the form on the contact section.

Next.js component

import Script from 'next/script';

export function ContactForm() {
  return (
    <section id="contact">
      <h2>Get in touch</h2>
      <div id="localbot-contact" />
      <Script
        src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID"
        strategy="lazyOnload"
      />
    </section>
  );
}

React install

For Vite, CRA, or another client-rendered React app, append the script in an effect and remove it when the component unmounts.

React component

import { useEffect } from 'react';

export function ContactForm() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.localbot.io/api/widget/YOUR_WIDGET_ID';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="localbot-contact" />;
}

WordPress install

The low-risk WordPress path is a Custom HTML block on the contact page. If you prefer theme code, inject the script from functions.php and put the target div in the page content.

functions.php

function localbot_widget_script() {
    if ( is_page( 'contact' ) ) {
        echo '<script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>';
    }
}
add_action( 'wp_footer', 'localbot_widget_script' );

Verification

localbot exposes install-safe API checks for agents and technical owners. Use verify-install to confirm the script appears on the page, then test-lead to save a simulated lead for verification. A real website submission is still the test that proves owner SMS delivery.

Verification API

export LOCALBOT_API_KEY=lb_sk_live_xxx

curl -sS -X POST https://www.localbot.io/api/v1/widgets/YOUR_WIDGET_ID/verify-install \
  -H "Authorization: Bearer $LOCALBOT_API_KEY" \
  -H "Content-Type: application/json" \
  --data '{"url":"https://example.com/contact"}'

curl -sS -X POST https://www.localbot.io/api/v1/widgets/YOUR_WIDGET_ID/test-lead \
  -H "Authorization: Bearer $LOCALBOT_API_KEY" \
  -H "Content-Type: application/json" \
  --data '{"source":"setup-guide"}'

What to check before you call it done

The page contains exactly one script loading localbot.io/api/widget/.
The widget ID in the script URL matches the dashboard.
The contact form is visible and submits successfully.
A real website submission sends the owner SMS when notifications are enabled.
There are no console errors for content security policy or blocked scripts.

If you want to understand what happens after the form submits, read how to build the SMS lead follow-up system.

SMS contact form setup FAQ

What is the fastest way to add an SMS contact form to a website?

The fastest path is a hosted form widget loaded with a script tag. You paste one public widget script on the page, test a real submission, and the SMS delivery stays outside your website code.

Do I need Twilio, Zapier, or a backend route?

Not with localbot. The website only loads the widget. localbot renders the form, accepts the submission, texts the owner, and handles lead follow-up from its own backend.

Where should the script tag go?

For plain HTML or WordPress, place it near the end of the page or before the closing body tag. For Next.js, use next/script with strategy="lazyOnload" so the form loads without blocking the page.

Can I keep my existing contact form?

localbot is designed to replace the form, because it controls the submission path, owner SMS, lead text-back, and summary. If you must keep a custom form, a webhook or Twilio integration is usually the right engineering path.