Görsel Form Oluşturucu
5 kategori genelinde 25 alan tipi, çoklu dil desteği, koşullu mantık, alan doğrulama, duyarlı genişlik kontrolleri, form ayarları, şablon galerisi, canlı önizleme ve gömme kodu oluşturma ile güçlü bir sürükle-bırak form tasarımcısı. Hiç kod yazmadan karmaşık formlar oluşturun.
Kodsuz Form Tasarım Stüdyosu
Form Oluşturucu, sürükle-bırak etkileşimleri için dnd-kit tarafından desteklenen tam özellikli bir görsel tasarımcıdır. Arayüz üç panele ayrılmıştır: kategoriye göre düzenlenmiş tüm alan tiplerini içeren Alan Paleti (sol), form alanlarınızı düzenlediğiniz ve yapılandırdığınız Tuval (orta) ve seçili alanın etiketleri, doğrulama, koşullu mantık ve genişlik ayarları dahil detaylarını düzenlediğiniz Özellikler Paneli (sağ). Tüm içerik çoklu dil çevirilerini destekler.
Alan Tipleri (Toplam 25)
📝 Giriş Alanları (11 tip)
| Alan Tipi | İkon | Açıklama | Doğrulama Seçenekleri |
|---|---|---|---|
| Metin | Type | Tek satırlı metin girişi | minUzunluk, maxUzunluk, desen (regex) |
| Metin Alanı | AlignLeft | Çok satırlı metin alanı | minUzunluk, maxUzunluk |
| Zengin Metin | FileText | WYSIWYG zengin metin editörü | minUzunluk, maxUzunluk |
| E-posta | Format doğrulamalı e-posta adresi girişi | desen (otomatik e-posta regex) | |
| Telefon | Phone | Telefon numarası girişi | desen |
| Sayı | Hash | Sayısal giriş | min, max |
| Para Birimi | DollarSign | Parasal tutar girişi | min, max |
| URL | Link | URL doğrulamalı web adresi girişi | desen |
| Tarih | Calendar | Tarih seçici | min tarih, max tarih |
| Saat | Clock | Saat seçici | min saat, max saat |
| Tarih-Saat | CalendarClock | Birleşik tarih ve saat seçici | min, max |
☑️ Seçim Alanları (4 tip)
| Alan Tipi | İkon | Açıklama | Seçenekleri Var |
|---|---|---|---|
| Açılır Menü | ChevronDown | Tekli seçim açılır menüsü | ✅ Evet — çok dilli etiketli yapılandırılabilir seçenek listesi |
| Çoklu Seçim | ListChecks | Çoklu seçim açılır menüsü | ✅ Evet |
| Onay Kutusu | CheckSquare | Onay kutusu grubu | ✅ Evet |
| Radyo | CircleDot | Radyo düğme grubu | ✅ Evet |
📎 Medya Alanları (2 tip)
| Alan Tipi | İkon | Açıklama | Doğrulama |
|---|---|---|---|
| Dosya Yükleme | Paperclip | Genel dosya eki | dosyaTipleri, maxDosyaBoyutu, maxDosya |
| Görsel Yükleme | Image | Önizlemeli görsele özel yükleme | dosyaTipleri, maxDosyaBoyutu, maxDosya |
🔧 Gelişmiş Alanlar (4 tip)
| Alan Tipi | İkon | Açıklama |
|---|---|---|
| Derecelendirme | Star | Yıldız derecelendirme seçici (1–5) |
| İmza | PenLine | E-imzalar için dijital imza pedi |
| Adres | MapPin | Yapılandırılmış adres alanları (sokak, şehir, il, posta kodu, ülke) |
| Gizli | EyeOff | İzleme için görünmez alan (ör. UTM parametreleri, yönlendirme kaynağı) |
📐 Düzen Öğeleri (4 tip)
| Tip | İkon | Açıklama |
|---|---|---|
| Başlık | Heading | Form bölümlerini düzenlemek için bölüm başlığı |
| Paragraf | AlignJustify | Bilgilendirici metin bloğu (talimatlar, feragatnameler) |
| Ayırıcı | Minus | Görsel yatay ayırıcı çizgi |
| Düzen Görseli | ImageIcon | Form içinde dekoratif görsel öğesi |
🖱️ Sürükle-Bırak Tuval
Soldaki Alan Paleti'nden alan tiplerini doğrudan Tuval'e sürükleyin. Alanlar tuval içinde sürüklenerek yeniden sıralanabilir. Herhangi bir alanı seçmek, detaylı düzenleme için sağdaki Özellikler Paneli'ni açar.
📏 Duyarlı Genişlik Kontrolü
Her alan dört genişlik seçeneğini destekler: Tam (%100), Üçte İki (%66), Yarım (%50) ve Üçte Bir (%33). Bu esnek çok sütunlu düzenler sağlar — örneğin, "Ad" ve "Soyad"ı yarım genişlikte yan yana yerleştirin, ardından tam genişlikte "E-posta" alanı ekleyin.
🔀 Koşullu Mantık
Alanları diğer alan değerlerine göre dinamik olarak gösterin veya gizleyin. Her alan Koşullu Mantık yapılandırmasını destekler: Aksiyon (Göster veya Gizle), Mantık Tipi (Tüm koşullar veya Herhangi bir koşul) ve çoklu Kurallar. Her kural başka bir alanın anahtarına referans verir ve bir operatör uygular: eşittir, eşitDeğil, içerir, içermez, büyüktür, küçüktür, boş, boşDeğil.
🌐 Çok Dilli Çeviriler
Formdaki her metin öğesi birden fazla dili destekler. Her alan için yapılandırılmış her yerel ayarda Etiket, Yer Tutucu, Açıklama ve Hata Mesajı yapılandırın. Açılır menü/onay kutusu/radyo alan seçenek değerleri de yerel ayar başına etiketleri destekler.
📋 Form Şablonları
Sıfırdan başlayın veya önceden oluşturulmuş bir şablonla başlamak için Şablon Seçici'yi kullanın. Şablonlar, alanlar zaten yapılandırılmış yaygın form yapıları (iletişim formu, anket, kayıt vb.) sağlar.
⚙️ Form Ayarları
Ayarlar Paneli form düzeyinde davranışı kontrol eder: Kimlik Doğrulama Gereksin (kullanıcılar giriş yapmalı), Anonim İzin Ver, CAPTCHA Etkinleştir (bot koruması), Gönderim Limiti (kullanıcı başına max gönderim), Yönlendirme URL'si (gönderim sonrası navigasyon), Kapalı Mesajı (form kapalıyken gösterilir) ve Bildirim E-postaları (yeni gönderimler için uyarı alın).
Form Ayarları Referansı
| Ayar | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| Kimlik Doğrulama | Anahtar | Kapalı | Etkinleştirildiğinde yalnızca giriş yapmış kullanıcılar formu gönderebilir |
| Anonim İzin | Anahtar | Açık | Kullanıcı kimliği olmadan gönderime izin ver |
| CAPTCHA | Anahtar | Kapalı | Otomatik gönderimleri önlemek için CAPTCHA doğrulaması ekle |
| Gönderim Limiti | Sayı | — | Kullanıcı başına izin verilen maksimum gönderim sayısı |
| Yönlendirme URL | URL | — | Başarılı gönderim sonrası kullanıcıları yönlendirilecek URL |
| Kapalı Mesajı | Metin | — | Form "Kapalı" durumundayken gösterilen mesaj |
| Bildirim E-postaları | E-posta Listesi | [] | Her yeni gönderim için bildirim alan e-posta adresleri |
Adım Adım: İletişim Formu Oluşturma
- Oluşturun: Formlar listesinden yeni form oluşturun.
- Açın:
/admin/forms/{id}/builderadresinde form oluşturucuyu açın. - Başlık Ekleyin: "Başlık" düzen öğesini sürükleyin ve etiketini "Bize Ulaşın" olarak ayarlayın.
- Ad Alanları Ekleyin: İki "Metin" alanı sürükleyin. İkisini de "Yarım" genişliğe ayarlayın. "Ad" ve "Soyad" olarak etiketleyin. İkisini de zorunlu yapın.
- E-posta Ekleyin: Tam genişlikte bir "E-posta" alanı sürükleyin. Zorunlu yapın.
- Telefon Ekleyin: Yarım genişlikte bir "Telefon" alanı sürükleyin (isteğe bağlı).
- Konu Ekleyin: Bir "Açılır Menü" alanı sürükleyin. Seçenekler ekleyin: "Genel Soru", "Satış", "Destek", "İş Ortaklığı".
- Koşullu Alan Ekleyin: "Şirket Adı" etiketli bir "Metin" alanı sürükleyin. Koşullu mantık ayarlayın: "Konu" "İş Ortaklığı"na eşit olduğunda Göster.
- Mesaj Ekleyin: Tam genişlikte bir "Metin Alanı" sürükleyin. minUzunluk'u 20 karakter olarak ayarlayın.
- Ayarları Yapılandırın: CAPTCHA'yı etkinleştirin, bildirim e-postasını destek@sirket.com olarak ayarlayın.
- Çevirileri Ekleyin: İngilizce yerel ayar sekmesine geçin ve her alan için EN etiketleri ekleyin.
- Önizleyin: Form deneyimini test etmek için önizleme butonuna tıklayın.
- Kaydet ve Göm: Formu kaydedin, ardından web siteniz için gömme kodunu oluşturun.
Kurumsal Kullanım Senaryosu: Çok Adımlı Etkinlik Kaydı
Küresel bir teknoloji konferansı, 3 dili (EN, TR, DE) destekleyen bir kayıt formuna ihtiyaç duyar. Pazarlama ekibi Form Oluşturucu'yu açar. "Etkinlik Kaydı" şablonuyla başlar, ardından özelleştirir: her bölüm için Başlık ekler ("Katılımcı Bilgileri", "Oturum Tercihleri", "Diyet Gereksinimleri"), "Özel Diyet İhtiyaçları" onay kutusu işaretlendiğinde "Diyet Detayları"nın yalnızca görünmesi için koşullu mantık kullanır, rozet kargolama için Adres alanı ekler, şartlar kabulü için İmza alanı ekler ve UTM kampanya koduyla bir Gizli alan ayarlar. Her metin öğesi 3 dile çevrilir. Form, hangi kayıtlı kullanıcıların kaydolduğunu takip etmek için Kimlik Doğrulama Gereksin olarak ayarlanır, mükerrer kaydı önlemek için Gönderim Limiti 1'dir. Yönlendirme URL'si onay sayfasına yönlendirilir. Lansman sonrası form, üç dilde 2.400 kayıt toplar — koşullu mantık her katılımcının benzersiz ihtiyaçlarına formun uyum sağlamasını garanti eder.
Yorumlar
Yorum bırakın