# leadin/11.0.7/scripts/shared/Form/PreviewForm.tsx

HubSpot All-In-One Marketing – Forms, Popups, Live Chat, version 11.0.7. 30 lines.

- Page: https://pluginprobe.com/plugins/leadin/11.0.7/code/scripts/shared/Form/PreviewForm.tsx
- Raw: https://pluginprobe.com/plugins/leadin/11.0.7/raw/scripts/shared/Form/PreviewForm.tsx
- Modified: 2024-03-06T11:43:04+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/leadin/11.0.7/code/scripts/shared/Form/PreviewForm.tsx#L10-L20`.

```tsx
import React, { useEffect, useRef } from 'react';
import UIOverlay from '../UIComponents/UIOverlay';
import { formsScriptPayload, hublet } from '../../constants/leadinConfig';
import useFormScript from './hooks/useFormsScript';

export default function PreviewForm({
  portalId,
  formId,
}: {
  portalId: number;
  formId: string;
}) {
  const inputEl = useRef<HTMLDivElement>(null);
  const ready = useFormScript();

  useEffect(() => {
    if (!ready) {
      return;
    }
    if (inputEl.current) {
      inputEl.current.innerHTML = '';
      const embedScript = document.createElement('script');
      embedScript.innerHTML = `hbspt.forms.create({ portalId: '${portalId}', formId: '${formId}', region: '${hublet}', ${formsScriptPayload} });`;
      inputEl.current.appendChild(embedScript);
    }
  }, [formId, portalId, ready, inputEl]);

  return <UIOverlay ref={inputEl} />;
}

```