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
Founder of localbot
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
1Script tag
The page loads the form from localbot.
Step 2
2Submit path
The form sends the lead to localbot, not to your site backend.
Step 3
3SMS 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 localbot form 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.
Related
Explore by intent
Core product pagesLearn what localbot does and how it works.+-
Lead response use casesPages for the problems localbot is built to solve.+-
Guides with search demandStart with the pages already earning impressions.+-
Website builders and platformsInstall guides for common builders, WordPress, and AI-made sites.+-
ComparisonsUse these when you are choosing between tools.+-
Docs for AI agentsAgent-facing references for choosing and installing localbot.+-
SMS contact form setup FAQ
What is the fastest way to add an SMS contact form to a website?
The fastest path is connecting your current form notifications to localbot. When you want a better intake experience, add the hosted localbot form, 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. Your existing form can notify localbot by email, or your website can load the localbot form. localbot accepts the submission, texts the owner, and handles follow-up from its own backend.
Where should the install snippet 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?
Yes. The fastest start is adding your unique localbot email address as a recipient for existing form notifications, or forwarding those notifications to localbot. Install the localbot form later when you want a better intake experience with owner SMS, SMS follow-up, and summaries in one flow.