Embed a form

You can show a Tepez form inside a page of your own site or app, so the person fills it in without leaving your page. This page gives the iframe snippet, explains how to size it, and shows how your page can learn that the person submitted the form.

The iframe

Any fill link works as the iframe's src: a form link, a prefilled link, a template link, or a person's own entry link (resumeUrlBewit). Tepez doesn't restrict which sites may frame its fill pages, so no setup is needed on the Tepez side.

The form's height changes while the person fills it in: fields appear as they answer, and error messages add lines. Tepez doesn't tell your page the form's current height, so the iframe can't resize itself to fit. The form is easiest to fill when the iframe takes the whole page:

<iframe
  src="https://app.tepez.co.il/f/<formId>/"
  title="Job application"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0"
></iframe>

To show the form inside a section of a page, give the iframe a fixed height, tall enough for the form at its longest. When the form grows taller than the iframe, the iframe shows its own scrollbar, which you can't turn off from your page:

<iframe
  src="https://app.tepez.co.il/f/<formId>/"
  title="Job application"
  style="width: 100%; height: 900px; border: 0"
></iframe>

• Prefilling works the same inside an iframe: put ?data=… on the src. See Prefill a form.
• Use the link exactly as Tepez gave it. The page adds run/ to its own address when it loads.
• The form page has a footer with Tepez's links. For a form you embed, the Tepez team can hide it. Ask us.
• Tracking pixels and analytics tags can't be added inside the form. Put them on your page, around the iframe.

Know when the person submits

After the person submits, the iframe shows the form's thank-you message. Your page isn't told about it: Tepez doesn't send a message to the page that frames it, and your page can't read what happens inside the iframe, because the form comes from another site.

The way to find out is a redirect. Set the form to redirect after submit to a page on your own site, with the entry id in the URL (see Bring the user back). The redirect navigates only the iframe, not your page. The page it lands on comes from your site, so it can pass the entry id to the page around it with postMessage.

The callback page, the redirect's target, for example https://your-app.example.com/tepez/done.html?entryId={{ data.entry.id }}:

<!doctype html>
<p>Thank you</p>
<script>
  const entryId = new URLSearchParams(window.location.search).get('entryId');
  window.parent.postMessage({ type: 'tepez-submitted', entryId }, window.location.origin);
</script>

The page that holds the iframe, on the same site:

<iframe
  id="tepez-form"
  src="https://app.tepez.co.il/e/<entryId>/?b=<bewit>"
  title="Job application"
  style="width: 100%; height: 900px; border: 0"
></iframe>
<script>
  window.addEventListener('message', (event) => {
    // Accept messages only from your own callback page
    if (event.origin !== window.location.origin) return;
    if (event.data?.type !== 'tepez-submitted') return;

    // Hide the form and let your server check the entry
    document.getElementById('tepez-form').remove();
    console.log('Submitted entry', event.data.entryId);
  });
</script>

Both pages must come from the same origin, the same scheme, host and port, or the check on event.origin drops the message. As with any callback, treat the message as a signal: your server reads the entry with GET /entry/{entryId} before it acts on it. Let your users fill a form in your app shows how.

Lists and checks served by your own server

A form can load a field's options from a URL, or check a value against one, such as a list of your branches. The browser of the person filling the form calls that URL from the form's page, https://app.tepez.co.il, also when the form is embedded in your page. So when the URL is on your own server, it must:

• be public HTTPS
• answer CORS requests from the form's origin, with Access-Control-Allow-Origin: https://app.tepez.co.il

Without the CORS header, the browser blocks the response and the field shows no options. Lists you keep in Tepez as options sets already allow this, and need nothing from you.

Troubleshooting