Contact us form Snippets
You can embed a Boom-powered "Contact us" form anywhere on your website. When a visitor submits it, a lead is automatically created in Boom under the Lead source the form is tied to (Contact us by default). This page covers generating a link, embedding the form, customizing it, and connecting it to your ad & analytics tools.
1. Create the form & get your link (one-time)
Contact forms are created and managed in the Boom Portal under Settings → CRM → Contact forms. Each form gets a permanent link - it never changes and is safe to publish publicly; spam protection is built in. From the form's menu, Get embed code gives you a ready-to-paste snippet (recommended - it already includes the conversion-tracking helper described below).
You can also generate a link scoped to part of your portfolio with the Copy contact form button, which lists your Lead sources that have the Contact form option enabled (Settings → CRM → Lead sources):
Where you click it | What the link does |
|---|---|
Portfolio page | General form - the visitor picks a property/unit freely |
A Property page | The property is pre-selected and locked - the visitor can't change it |
A Unit page | The property and unit are pre-selected and locked |
(If your account uses the Communities & Sites naming, "Property" reads as "Community" and "Unit" as "Site" - same behavior.)
Every link works both as a page you can share directly (in an email signature, an ad, a QR code) and as an iframe src for embedding.
2. Embed it
Paste the embed code from Get embed code, or use this snippet with your link:
<iframe
src="https://<your-contact-form-link>?standalone=true"
width="100%" height="720"
style="border:0;max-width:480px"
title="Contact us">
</iframe>
<script src="https://boom.rent/boom-embed.js" async></script>- The form is mobile-responsive inside the frame - keep the iframe at width: 100% and cap it with max-width.
- The <script> line is the conversion-tracking bridge (see Ad campaign & conversion tracking). The form works without it, but your tag manager won't see submissions.
3. Customize (URL parameters)
Append parameters to your link as a query string, e.g.:
Parameter | Values | Default | What it does |
|---|---|---|---|
property_ids | Comma-separated Boom property IDs, e.g. 123,456 | All available properties | Limits the property dropdown to specific properties. Find a property's ID in its page URL in the portal (e.g. .../properties/123). IDs are validated against your account - unknown IDs are ignored. |
submit_label | Any text, max 40 chars (URL-encode spaces) | Submit | Custom text for the submit button. |
show_property | true/false | true | Show or hide the property picker. Set to false for a general contact form. |
show_unit | true/false | true | Show or hide the unit picker. |
Combine parameters with &. Always URL-encode values that contain spaces or special characters.
- On property- or unit-scoped links (from the Copy contact form button on a Property/Unit page) the scoped fields are pre-selected and locked, so the picker parameters above don't apply to them.
- The form also recognizes ad-tracking parameters - gclid, utm_source, utm_medium, utm_campaign, utm_term, utm_content - and stores them on the created lead. You normally don't add these by hand: the forwarding snippet below passes them through automatically when a visitor arrives from an ad.
Styling your form
You can make the form match your website (fonts, colors, corner roundness, spacing) by adding style settings to the form link in your embed code, the same way as the parameters above. Nothing changes in Boom. Edit the link on your site, reload the page, and the form shows the new look.
Example: a gold accent, the Lato font and roomy spacing.
<iframe
src="https://<your-contact-form-link>?standalone=true&font=Lato&text_color=2b2b2b&accent_color=c9a227&button_color=c9a227&button_text_color=1f2a36&field_radius=6&button_radius=999&spacing=roomy"
width="100%" height="720"
style="border:0;max-width:480px"
title="Contact us">
</iframe>
<script src="https://boom.rent/boom-embed.js?handoffMode=auto-height" async></script>Setting | Accepted values | Default | What it changes |
|---|---|---|---|
font | A font from Google Fonts, written as it appears there, e.g. Lato, Roboto Slab, Source Sans 3. Or a standard device font: Arial, Helvetica, Georgia, Times New Roman, Verdana, Tahoma, Trebuchet MS, Courier New, Garamond, Palatino, Segoe UI | Boom's font | All text in the form, the date picker and the thank-you screen. Write spaces as + or %20. |
text_color | Color code | Dark grey | The title, labels and typed text. The line under the title, placeholders and icons use lighter shades of the same color. |
background_color | Color code, or transparent | White | Behind the form and the thank-you screen. transparent lets your page show through. |
field_background_color | Color code, or transparent | White | Inside the input boxes, and behind dropdown lists and the date picker. |
field_border_color | Color code, or transparent | Light grey | The border of the input boxes and dropdown lists. |
accent_color | Color code | Your Branding color | The highlight on the field in focus (text boxes, dropdowns and the date field), and the selected day in the date picker. |
error_color | Color code | Red | Error messages, and the border of a field with an error. |
button_color | Color code | The form builder's button color, otherwise your Branding color | The submit button. Overrides the color set in the form builder. |
button_text_color | Color code | White | The submit button's label. |
field_radius | A number of pixels, 0–999 | 8 | Corner roundness of the input boxes. Multi-line boxes and dropdown lists round up to 16 at most. |
button_radius | A number of pixels, 0–999 | 10 | Corner roundness of the submit button. 999 gives a pill shape. |
spacing | compact, standard, roomy | standard | Space between the fields and around the form. The size of the input boxes and the button stays the same, so every option works on a phone. |
Color codes are 6-digit hex codes written without the #, e.g. c9a227. A # inside a link cuts off everything after it, so accent_color=#c9a227 would be ignored. 3-digit codes (fff) and 8-digit codes with transparency (c9a22780) work too.
- Leave out anything you don't need. A setting you leave out stays as it is today.
- A mistake affects only that setting. A misspelled color or unknown value is ignored, and the rest of your styling still applies. The form always loads.
- A font that can't be used (misspelled, or not on Google Fonts) falls back to Boom's font. Fonts hosted on your own website are not supported yet.
- Styling is cosmetic. Which fields appear, their order, labels and whether they are required are set in the form builder. The form's wording and the spam check don't change.
- To preview your styling, open your form link with the settings directly in a browser. The form builder's Preview always shows the default look. A transparent background only shows on your own page: opened directly, the form sits on the browser's blank white page.
Form height. Roomy spacing or a wider font makes the form taller. With ?handoffMode=auto-height on the script line (as in the example above), the frame fits the form's height automatically, with no inner scrollbar. Without it, raise the iframe's height: roomy needs about 10% more than standard, compact about 5% less.
Sizing
The <iframe> sets the form's box on your page. Recommended values:
Property | Recommended | Notes |
|---|---|---|
width | 100% | Fills the container. |
max-width | 480-560px | The form is single-column; wider just adds whitespace. |
height | ~720px with pickers, ~560px when show_property=false & show_unit=false | Or add ?handoffMode=auto-height to the script line, and the frame takes the form's exact height (see Styling your formStyling your form). |
border | none | |
border-radius | optional, e.g. 12px | Cosmetic; clip the corners to match your site. |
To restyle the inside of the form, see Styling your formStyling your form.
Ad campaign & conversion tracking
Everything in this section is optional - the form works without it. Set it up when your marketing team wants to know which ad campaigns produce leads, or wants to fire their own tags (Meta pixel, GA4, anything routed through Google Tag Manager) when a visitor submits the form.
Because the form runs inside an iframe on your site, tracking needs a small amount of glue in two directions:
- Into the frame - when a visitor lands on your page from an ad, the click ID (gclid) and campaign tags (utm_*) are on your page's URL. The iframe cannot read them on its own; a one-time snippet forwards them in.
- Out of the frame - when a visitor submits the form, tools on your page (GTM, Meta pixel) cannot see it happen. The one-line bridge script from §2 carries the signal out.
A. Forward ad-click parameters into the iframe
Browsers do not let an embedded iframe read the address bar of the page that embeds it. So when a visitor arrives from an ad - e.g. yoursite.com/contact?gclid=Cj0K...&utm_campaign=spring - Boom never sees those parameters unless your page passes them along.
Add the data-boom-embed attribute to the Boom iframe, then paste this script once, anywhere after the iframe:
<iframe data-boom-embed src="https://<your-contact-form-link>?standalone=true" width="100%" height="720" style="border:0;max-width:480px" title="Contact us"></iframe>
<script>
(function () {
var KEYS = ["gclid", "utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"];
var pageParams = new URLSearchParams(window.location.search);
document.querySelectorAll("iframe[data-boom-embed]").forEach(function (frame) {
try {
var src = new URL(frame.getAttribute("src"), window.location.href);
var changed = false;
KEYS.forEach(function (key) {
var value = pageParams.get(key);
if (value) { src.searchParams.set(key, value); changed = true; }
});
if (changed) frame.setAttribute("src", src.toString());
} catch (e) { /* leave the iframe untouched */ }
});
})();
</script>What it does: copies gclid and utm_* from your page's URL onto the iframe's URL - only when they are present. Boom stores them on the created lead and uses the gclid to report Google Ads conversions.
Without this snippet, Google Ads conversion reporting falls back to Google's own cookie matching (which only works some of the time), and campaign tags won't be attached to your leads in Boom. If you run any paid campaigns to pages with the form, add it.
B. Google Ads conversion tracking
If you run Google Ads campaigns, Boom can report a real Google Ads conversion (not just an analytics event) when a visitor submits the form - so your Google Ads dashboard shows "Campaign X drove N form submissions".
Setup:
- In Google Ads, find your conversion action's ID and label: Goals → Conversions → your conversion action → Tag setup → "Use Google tag" - you'll see a Conversion ID (AW-123456789) and a Conversion Label.
- In the Boom Portal → Settings → Integration → Google Ads → paste the Conversion ID and the Contact Form Submitted label.
- Add the forwarding snippet from §A to your page - strongly recommended, so the click ID reaches the iframe and conversions attribute reliably.
The conversion is reported the moment the visitor successfully submits the form.
C. Google Analytics (GA4)
If you use GA4, Boom can report form submissions straight into your GA4 property. No snippet changes are needed.
Setup: Boom Portal → Settings → Integration → Google Analytics → paste your GA4 Measurement ID (G-XXXXXXXX).
Once saved, a contact_form_submitted event appears in your GA4 property on every submission. (If you also embed Boom's listings pages, the full listings funnel is reported too - see Listings iFrame Snippets.)
D. Google Tag Manager / Meta pixel (host-page events)
If you prefer to fire your own tags - a Meta pixel Lead event, a GA4 tag in your own container, anything else in GTM - the bridge script from §2 notifies your page whenever the form is submitted:
<script src="https://boom.rent/boom-embed.js" async></script>On each successful submission the script pushes a Custom Event onto your data layer:
{
event: "boom_form_submitted",
boom_source: "contact_form.submitted",
boom_partner_slug: "your-company",
boom_property_slug: "maple-court", // present when a property was selected/locked
boom_unit_slug: "unit-3b", // present when a unit was selected/locked
boom_lead_id: "idle_x1y2z3" // present when a lead was created
}In GTM: Triggers → New → Custom Event → event name boom_form_submitted, then attach your existing Meta pixel / GA4 / other tag to that trigger. Optionally create Data Layer Variables for the boom_* fields - boom_lead_id works well as Meta's eventID for deduplication.
- No personal data ever crosses the frame boundary - IDs and slugs only, never a name, email, or phone number.
- Meta ads: nothing needs to be forwarded into the iframe for Meta - your pixel and its _fbp/_fbc cookies live on your page, and this event lets GTM fire the pixel right there. Attribution happens on Meta's side.
- One script line covers all Boom embeds on the page; it's safe to paste more than once (the script deduplicates itself) and safe on pages without GTM.
Verifying your setup
The easiest tool for this is Google Tag Assistant - it shows every Google tag and data layer event firing on a page in real time.
- Open your page with test parameters appended, e.g. yoursite.com/contact?gclid=TEST123&utm_source=google&utm_campaign=test.
- Submit the form.
- Your own tags (GTM): connect Tag Assistant to your page - GTM Preview mode does this automatically. The boom_form_submitted event appears in the data layer with the identifiers attached; Meta Pixel Helper shows the Lead fired.
- Boom's GA4 & Google Ads tags: they fire inside the iframe, so Tag Assistant on your page won't see them - instead, connect Tag Assistant to the form link itself: open it directly in a new tab with the same test parameters. Alternatively, in DevTools → Network a request to googleadservices.com with send_to=AW-.../<label> confirms the Ads conversion; it appears in Google Ads within a few hours.
- GA4: contact_form_submitted appears in Reports → Realtime.
- Your Boom contact can confirm the campaign tags (gclid=TEST123) were stored on the resulting lead.
Good to know
- Leads land in Boom under the form's Lead source, with the property/unit the visitor selected (or the one the link was scoped to).
- Spam protection (CAPTCHA + rate limiting) is automatic - nothing to configure.
- No property selected (or none currently available) → the form still submits as a general inquiry.