تضمين النماذج

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  allow="camera; microphone"
  style="border: none;"
></iframe>

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  height="100vh"
  frameborder="0"
  allow="camera; microphone"
  style="border: none; min-height: 100vh;"
></iframe>

<div style="max-width: 720px; margin: 0 auto;">
  <iframe
    src="https://app.nueform.com/f/your-form-slug"
    width="100%"
    height="500"
    frameborder="0"
    allow="camera; microphone"
    style="border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
  ></iframe>
</div>

<div id="nueform-container" data-form="your-form-slug"></div>
<script>
  (function() {
    var container = document.getElementById('nueform-container');
    var slug = container.getAttribute('data-form');
    var iframe = document.createElement('iframe');
    iframe.src = 'https://app.nueform.com/f/' + slug;
    iframe.width = '100%';
    iframe.height = '600';
    iframe.frameBorder = '0';
    iframe.allow = 'camera; microphone';
    iframe.style.border = 'none';
    container.appendChild(iframe);
  })();
</script>

<!-- Using a custom subdomain -->
<iframe
  src="https://acme.nueform.io/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<!-- Using a fully custom domain -->
<iframe
  src="https://forms.acme.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  frameborder="0"
  style="border: none; height: 100vh;"
></iframe>

<div style="position: relative; width: 100%; padding-bottom: 75%; /* 4:3 ratio */">
  <iframe
    src="https://app.nueform.com/f/your-form-slug"
    frameborder="0"
    allow="camera; microphone"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

<style>
  .nueform-embed {
    width: 100%;
    border: none;
    height: 700px;
  }

  @media (max-width: 768px) {
    .nueform-embed {
      height: 500px;
    }
  }

  @media (max-width: 480px) {
    .nueform-embed {
      height: 100vh;
      min-height: 400px;
    }
  }
</style>

<iframe
  class="nueform-embed"
  src="https://app.nueform.com/f/your-form-slug"
  frameborder="0"
  allow="camera; microphone"
></iframe>

<iframe
  src="https://app.nueform.com/f/your-form-slug?utm_source=website&utm_campaign=spring_sale&user_id=12345"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<script>
  var formUrl = 'https://app.nueform.com/f/your-form-slug';
  var params = new URLSearchParams({
    user_id: getUserId(),           // Your function
    email: getUserEmail(),          // Your function
    utm_source: getUTMSource(),     // Your function
    timestamp: Date.now().toString()
  });

  var iframe = document.createElement('iframe');
  iframe.src = formUrl + '?' + params.toString();
  iframe.width = '100%';
  iframe.height = '600';
  iframe.frameBorder = '0';
  iframe.style.border = 'none';

  document.getElementById('form-container').appendChild(iframe);
</script>

function NueFormEmbed({ slug, params = {} }) {
  const queryString = new URLSearchParams(params).toString();
  const src = `https://app.nueform.com/f/${slug}${queryString ? '?' + queryString : ''}`;

  return (
    <iframe
      src={src}
      width="100%"
      height="600"
      frameBorder="0"
      allow="camera; microphone"
      style={{ border: 'none' }}
      title="NueForm"
    />
  );
}

// Usage
<NueFormEmbed
  slug="customer-feedback"
  params={{ user_id: '12345', utm_source: 'app' }}
/>

<template>
  <iframe
    :src="formSrc"
    width="100%"
    height="600"
    frameborder="0"
    allow="camera; microphone"
    style="border: none;"
  />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  slug: String,
  params: { type: Object, default: () => ({}) }
});

const formSrc = computed(() => {
  const query = new URLSearchParams(props.params).toString();
  return `https://app.nueform.com/f/${props.slug}${query ? '?' + query : ''}`;
});
</script>

export default function FormPage() {
  return (
    <div className="max-w-3xl mx-auto py-8">
      <h1>Contact Us</h1>
      <iframe
        src="https://app.nueform.com/f/contact-form"
        width="100%"
        height="600"
        frameBorder="0"
        allow="camera; microphone"
        style={{ border: 'none' }}
        title="Contact Form"
      />
    </div>
  );
}

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  allow="camera; microphone"
  ...
></iframe>