Embedding a form on your website

You can put any TripMapper form directly onto your own website, so people fill it in without ever leaving your site. Submissions come straight back into TripMapper.

There are two ways to share a form:

  • Share link: Emailing or messaging the form to a client, or linking to it from social media. Opens the form on a TripMapper-hosted page.

  • Embed code: Putting the form inside one of your own pages — a contact page, an enquiry page, a landing page.

This guide covers the embed code. Both are found in the same place.

Before you start

Save your form first. Click Save Form before you open the Share panel, so the embed reflects your latest fields.

You'll need to be able to add a block of HTML to your website. Most website builders have this — it's usually called an Embed, Custom HTML, or Code block. If you're not sure, your web developer will know.

Step 1 — Open the Share panel

Open your form and click Share, next to Save Form in the bottom-right corner.

The form builder, with the Share button highlighted in the bottom-right corner next to Save Form

The Share panel opens, with your settings on the left and a live preview of the form on the right.

Step 2 — Choose how the form looks

At the top of the panel, you can set:​

  • Layout — how the form is arranged. Choose the option that suits the page you're embedding into.

  • Banner Image — click Select Image to upload a header image, usually your logo or a photo. This appears at the top of the form.

The preview on the right updates so you can see the result. When you're happy, click Save.

The Share panel, showing the Layout dropdown, Banner Image picker, Share Link and Embed Code fields, with a live preview of the form alongside

Step 3 — Copy the embed code

Underneath the divider, you'll find Embed Code. Click the copy icon to the right of it to copy the whole snippet.

The code looks like this — yours will have a different ID in it:

<tripmapper-embed form="{formReference}"></tripmapper-embed>
<script src="https://trpm.app/embed.js"></script>

Copy it, don't retype it. The ID in the first line is unique to your form. If it's mistyped by even one character the form won't appear, the form won't appearand you need both:

  • The first line is the placeholder that marks where the form should appear.

  • The second line loads TripMapper, which fills that placeholder in.

Step 4 — Paste it into your page

Add an Embed / Custom HTML / Code block to your page, wherever you want the form to appear, and paste in both lines. Save and publish the page.

That's it — load your page and the form will be there.

A few things worth knowing

  • The form fills the space you give it. It takes the full width of whatever you drop it into and shrinks to fit narrow columns and phone screens. To make the form narrower, make its container narrower.

  • Keep both lines together. The simplest, most reliable option is to paste them into the same block, exactly as copied.

  • Your page must be published and live. The form loads from TripMapper's servers, so it won't display if you open an HTML file directly from your computer. Test it on your live or staging site.

  • Use an HTTPS page. Forms often collect personal details — passport numbers, dates of birth, signatures. Only embed on pages served over https://.

Putting more than one form on a page

You can. Add a <tripmapper-embed> line for each form, and include the <script> line just once on the page:

<tripmapper-embed form="your-first-form-id"></tripmapper-embed>
<tripmapper-embed form="your-second-form-id"></tripmapper-embed>
<script src="https://trpm.app/embed.js"></script>

Including the script more than once won't break anything, but it isn't needed.

Troubleshooting

Nothing appears where the form should be

Check, in this order:

  1. Are both lines present? The <tripmapper-embed> line on its own does nothing without the <script> line. This is the most common cause.

  2. Has the page been published? Some website builders don't run embedded code while you're still editing. Save, publish, and view the live page.

  3. Is the form ID correct? Re-copy the code from the Share panel rather than editing it by hand.

  4. Has your website builder stripped the code? Some plans — particularly free and entry-level tiers of hosted builders — don't allow custom HTML or scripts. If your embed block silently removes the <script> line, this is usually why. You may need to upgrade your plan, or use the Share link instead.

A blank gap appears instead of the form

A blank space, rather than nothing at all, usually means the form ID isn't recognised — for example, if the form has been deleted, or the ID was altered. Go back to the Share panel and copy the embed code again.​

The form appears, but doesn't match my website's fonts and colours

This is expected. The form is styled by TripMapper and deliberately kept separate from your site's styling, so your website's CSS can't accidentally break it — and it can't be restyled with your own CSS.

Use the Layout and Banner Image options in the Share panel to bring it closer to your branding.​

The form doesn't appear on a page that loads content dynamically

Some websites — single-page apps, and some pop-ups, modals, tabs and accordions — add their content to the page after it has finished loading. The embed only picks up placeholders that are on the page when it first loads, so a form added later this way won't appear.

If you're affected by this, put the form on a normal page of its own, or ask your developer to make sure the embed loads after the placeholder is in place.

Where do submissions go?

Everything submitted through an embedded form arrives in the same place as any other response. Open the form and switch to the Submissions tab at the top of the screen.

Changing the form later

Edit and save the form as normal — you don't need to re-copy the embed code or touch your website again. The embed always shows the current version of your form.

The one exception is deleting a form: if you delete a form that's embedded somewhere, it will stop appearing on that page.

Was this helpful?