# Gömme ve popup

Formunuzu bir web sitesine gömün veya popup katmanı olarak gösterin.

## Gömme ve popup

Formunuzu herhangi bir web sayfasına satır içi bir gömme veya bir popup katmanı olarak yerleştirin. Bunu Paylaş panelinden yapılandırır ve sitenize tek bir snippet yapıştırırsınız.

<p>
  Her iki snippet de seçtiğiniz paylaşım bağlantısından oluşturulur, bu yüzden o bağlantının son kullanma tarihini, yanıt limitini, özel
  alan adını ve analitiğini taşır. Önce bağlantıyı oluşturun — bkz.{' '}
  <a href="/tr/sharing-publishing/sharing-embedding">paylaşım bağlantıları</a>. Bağlantı üzerindeki sorgu parametresi varsayılanları tek
  istisnadır: gömme veya popup snippet'lerine eklenmez.
</p>

<h2 id="embed">Satır içi gömme</h2>

<p>
  Satır içi gömme, formunuzu bir iframe kullanarak doğrudan bir sayfanın içine yerleştirir. <strong>Paylaş</strong> panelini açın,{' '}
  <strong>Gömme</strong> kartına tıklayın ve oluşturulan snippet'i sitenizin HTML'ine kopyalayın.
</p>

<h3 id="embed-layout">Düzen</h3>

<h3 id="embed-display">Görüntü</h3>

<p>
  Oluşturulan HTML'i görmek için <strong>Kodu göster</strong>’e tıklayın. Kopyalamak için <strong>Gömme kodunu kopyala</strong>’yı kullanın,
  ardından sitenize yapıştırın. <strong>Varsayılana sıfırla</strong> tüm ayarları geri döndürür.
</p>

<h3 id="embed-snippet">Snippet ne içerir</h3>

<p>
  Otomatik boyutlandırma kapalıyken snippet, paylaşım bağlantınıza <code>?embed=1</code> eklenmiş tek bir iframe'dir. Görüntü seçenekleri
  kendi parametrelerini ekler: <code>hideCover=1</code>, <code>hideLogo=1</code> ve <code>theme=dark</code> ya da <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formstep.io/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  Otomatik boyutlandırma açıkken iframe bir <code>div</code> içine sarılır ve bir betik izler. Gömülü form her yükseklik değişiminde bir{' '}
  <code>formbase:resize</code> mesajı gönderir; betik, mesajın kaynağını ve gönderen çerçeveyi kontrol eder, ardından iframe yüksekliğini
  ayarlar. Sayfanızda başka hiçbir şeye dokunulmaz ve dışarıdan bir betik yüklenmez.
</p>

<h2 id="popup">Popup</h2>

<p>
  Popup, formunuzu sayfanızın üzerinde bir katman olarak gösterir. <strong>Paylaş</strong> panelini açın, <strong>Popup</strong> kartına
  tıklayın, seçeneklerinizi ayarlayın ve oluşturulan kod snippet'ini sitenize yapıştırın.
</p>

<h3 id="popup-trigger">Tetikleyici</h3>

<p>Popup'ın nasıl açılacağını seçin:</p>

<h3 id="popup-layout">Düzen</h3>

<h3 id="popup-display">Görüntü</h3>

<h3 id="popup-styling">Popup stili</h3>

<h3 id="popup-behavior">Davranış</h3>

<p>
  Oluşturulan snippet'i görmek için <strong>Kodu göster</strong>’e tıklayın. Kopyalamak için <strong>Popup kodunu kopyala</strong>’yı
  kullanın, ardından sitenize yapıştırın. <strong>Varsayılana sıfırla</strong> tüm ayarları geri döndürür.
</p>

<h3 id="popup-snippet">Snippet ne içerir</h3>

<p>
  Popup snippet'i kendi içinde bağımsız tek bir <code>{'<script>'}</code> bloğudur. Popup açıldığında katmanı, kapatma düğmesini ve iframe'i
  düz JavaScript ile oluşturur — ondan önce sayfanıza hiçbir şey eklenmez, hiçbir stil sayfası eklenmez ve dışarıdan bir betik yüklenmez.
  Betiğin altındaki yorum, çağıracağınız fonksiyon adını söyler:
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  Özel bir slug'daki bir tire, fonksiyon adında alt çizgiye dönüşür, çünkü tire bir JavaScript tanımlayıcısında geçerli değildir. Adı
  kendiniz türetmek yerine yorumdan kopyalayın.
</p>

<h2 id="color-scheme">Renk şeması</h2>

<p>Gömmeler ve popup'lar aynı üç seçeneği paylaşır, ikisi de çerçeve içinde formun kendi temasını geçersiz kılar:</p>

<ul>
  <li>
    <strong>Kullanıcı seçsin</strong> — varsayılan seçenek. Form, ziyaretçinin işletim sistemi veya tarayıcı koyu/açık mod tercihini takip
    eder.
  </li>
  <li>
    <strong>Koyu mod</strong> — ziyaretçinin tercihinden bağımsız olarak koyu modu zorlar.
  </li>
  <li>
    <strong>Açık mod</strong> — ziyaretçinin tercihinden bağımsız olarak açık modu zorlar.
  </li>
</ul>

> 💡 **Sitenizin temasıyla eşleştirin**
> <p>
>     Web siteniz her zaman koyu renkliyse, formun uyum sağlaması için gömme veya popup'ı Koyu mod olarak ayarlayın. Siteniz ziyaretçinin
>     tercihine göre değişiyorsa Kullanıcı seçsin seçeneğini tercih edin. Formun kendisini temalandırmak için bkz.{' '}
>     <a href="/tr/branding-domains/appearance-theming">görünüm ve tema</a>.
>   </p>

<h2 id="next-steps">Sonraki adımlar</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Paylaşım bağlantıları](/tr/sharing-publishing/sharing-embedding) — Paylaşım bağlantısı URL'leri oluşturun ve yönetin
  - [QR kodları](/tr/sharing-publishing/sharing-embedding#qr-codes) — Taranabilir kodlar oluşturun ve yerleştirin
  - [Özel alan adları](/tr/branding-domains/custom-domains) — Formları kendi alan adınızdan sunun
  - [Görünüm ve tema](/tr/branding-domains/appearance-theming) — Tema, kapak, logo, koyu mod
</div>