Standart form oluşturma

Bu bölüm, formun tamamını düzenleyicinin sunduğu sırayla adım adım anlatır.

1. Customize düzenleyicisini açın

   Quote settings sayfasına gidin. Request a Quote sayfasında Customize kartını bulun ve Customize düğmesine tıklayın. Düzenleyici tam ekran açılır.

2. Quote form sekmesini açın

   Düzenleyicinin dört sekmesi vardır: Button & widget, Quote form, Quote cart page ve Success message. Quote form sekmesini açın.

3. Bir şablonla başlayın

   Form template, formunuzun üzerine kurulduğu şablonu ve kime uygun olduğuna dair kısa bir açıklamayı gösterir.

   Change düğmesine tıklayın. Başlığı Choose a form template olan ve “Select a starting point. The form fields will change only after you confirm.” notunu içeren bir seçici açılır. Üç seçenek vardır:

   Şablon	Uygulamanın tanımı	Etiket
   Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
   Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
   B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

   Teklif verdiğiniz işe uyan açıklamaya sahip olanı seçin, ardından onaylamak için Use this template düğmesine tıklayın. Cancel, mevcut formunuza dokunmaz. Bunu alanları düzenlemeye başlamadan önce, şimdi yapın.

   

   Boş bir form yerine bir şablonla başlayın.

   Dikkat

   Farklı bir şablon seçmek mevcut alan listesini değiştirir. Ekrandaki bölümler ve alanlar yeni şablonun kendi bölümleri ve alanlarıyla değiştirilir; bu yüzden eklediğiniz bölümler, yeniden adlandırdığınız alanlar ve kaldırdığınız her şey onlarla birlikte gider. Önce şablonu seçin, sonra özelleştirin.

4. Formun ürün sayfalarında gösterilip gösterilmeyeceğine karar verin

   Product page form display altında — “Show the quote form directly on product pages” — müşterilerin üründen ayrılmadan formu doldurmasını istiyorsanız Enable product page form display seçeneğini işaretleyin.

   İşaretlediğinizde, üç seçenekli bir açılır liste olan Form position on product page görünür:

   Konum	Formun yerleştiği yer
   Below Add to Cart button	Sayfanın üst kısmında, satın alma düğmelerinin hemen altında; en görünür seçenek.
   Below product description	Satış metninden sonra; onu okumuş bir alıcı için.
   Below product information	Ürün bilgisi bloğunun sonunda.

   

   Müşterilerin önce bir teklif sepeti oluşturmasını tercih ediyorsanız bu ayarı kapatın.

5. Form builder üzerinde çalışın

   Form builder — “Manage sections, rows, fields, and validation with the visual form builder” — sorularınızı bölümlere ayrılmış halde tutar. Hangi bölümlerin bulunduğu, az önce seçtiğiniz şablona bağlıdır:

   Şablon	Oluşturucudaki bölümler
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Bir bölümle yapabileceğiniz üç şey:

   • Açıp kapatın. Bölümün ayarlarını açın ve Enable seçeneğini işaretleyin veya işaretini kaldırın. Devre dışı bırakılan bir bölüm, kaç alan içerirse içersin müşteriye gösterilmez.
   • Yeniden adlandırın. Aynı ayarlar panelinde bir Label vardır; alıcılarınızın ona ne diyeceğine göre değiştirin.
   • Taşıyın. Formu yeniden sıralamak için bölümü tutamacından sürükleyin.

   İçindeki alanları görmek için bir bölümü ok simgesiyle genişletin ve o bölüme bir alan daha eklemek için Add element seçeneğini kullanın.

   İletişim ve adres alanları Müşteri bilgi alanları sayfasında; şirket, fatura ve ödeme koşulları ise B2B formu oluşturma sayfasında ele alınır.

   Not

   “🔐 This feature is available on …” yazan bir asma kilit satırıyla gri görünen oluşturucu denetimleri, özelliğin daha yüksek bir planda olduğu anlamına gelir. Bozuk bir şey yoktur; planınızın nelere sahip olduğunu görmek için uygulamada Pricing plans sayfasını açın.

6. Bir alanı düzenleyin

   Oluşturucuda herhangi bir alana tıklayın; alanın kendi ayarları, alanın adı ve “Customize how this field appears on the form.” başlığıyla açılır.

   Ayar	Ne yapar
   Label	Müşterinin okuduğu ifade. Satıcıların en çok değiştirdiği ayar budur.
   Hide label	Alanı tutar ancak üstündeki etiketi kaldırır.
   Placeholder	Boş kutunun içindeki gri örnek metin. İstediğiniz biçim için kullanın; "e.g. 500 units" boş bir kutudan iyidir.
   Help text	Yer tutucu için fazla uzun olan her şey için alanın altındaki bir satır.
   Type	Alanın ne tür bir alan olduğu ve müşterinin içine ne yazabileceği.
   Required	Form, bu olmadan gönderilmez. Katlanabileceğiniz en az sayıda zorunlu alan isteyin.
   Options / Add option	Bir seçim listesindeki, radyo grubundaki veya onay kutusu grubundaki seçenekler.
   Choose default value	Form yüklendiğinde alanın başlangıç değeri.
   Limit characters	Min characters ve Max characters seçeneklerini açar.
   Column width	Alanın satırın ne kadarını kapladığı; böylece iki kısa alan yan yana durabilir.
   Custom HTML class	Kendi CSS’iniz için bir sınıf adı. Bkz. Özel CSS ekleme.
   Remove	Alanı siler. Yalnızca kendi alanlarınızda bulunur: yerleşik iletişim ve adres alanları korunur ve Remove seçeneği yoktur.

   

   Her öğeye tıklayın ve (gerekirse) daha fazla ayarlayın

   Alan panelindeki Save changes ile bitirin veya düzenlemeden vazgeçmek için Cancel düğmesine tıklayın.

   Dikkat

   Limit characters, siz yazdıkça doğrulanır: Min characters ve Max characters her biri 0 veya daha büyük bir tam sayı olmalı ve minimum değer maksimum değerden büyük olamaz. Yanlış girerseniz düzenleyici kaydetmeyi engeller.

7. Alanları istediğiniz sıraya koyun

   Alanlar sürüklenerek yeniden sıralanır. Bir alanı satırının sol ucundaki sürükleme tutamacından tutun ve istediğiniz yere bırakın. Bölümlerin kendi sürükleme tutamacı vardır ve aynı şekilde taşınır.

   Sıra göründüğünden daha önemlidir: bir ad sormadan önce teslimat posta kodu soran bir form, sohbet gibi değil, veritabanı gibi okunur.

   

   Teklif formundaki konumunu/sırasını değiştirmek için öğeyi sürükleyip bırakın

8. Kendi sorularınızı ekleyin

   Extra info, şablonunuzun oraya koyduğu şeylerle başlar ve bu şablona göre değişir. Simple quote form şablonu Quantity ve Upload files ile; Detailed quote form şablonu Project detail ve Delivery service ile; B2B customer form şablonu Message ile gelir.

   İhtiyacınız olan başka her şeyi (teslim süresi, teslimat tarihi, proje referansı) eklemek için Add element seçeneğini kullanın.

   Bir grup soru birbirine aitse ve mevcut bir bölüme uymuyorsa yeni bir bölüm oluşturmak için Add section seçeneğini kullanın.

   Tehlike

   Bir alan isteğe bağlı değildir: formda name değeri email sözcüğünü içeren bir öğe bulunmalıdır. Uygulama kaydetmeyi engeller ve bunu size söyler — Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Bu olmadan teklif verdiğiniz hiçbir şey müşteriye ulaşmaz.

   

   Teklif formuna daha fazla özel alan eklemek için Add element düğmesine tıklayın

   

9. Formu biçimlendirin

   Style, formunuzun kullandığı ön ayarı ve geri kalanını açan bir Change düğmesini gösterir. Ön ayarlar Material filled, Classic, Flat, Flat round, Classic round, Line, Line round ve Material outlined olup her biri giriş alanının küçük bir resmi olarak gösterilir; bu yüzden ada göre değil, gözle seçin.

   Yanında Match theme styling if possible bulunur. İşaretlerseniz form, bunun yerine temanızın kendi yazı tiplerini ve giriş alanlarını ödünç alır; bu genellikle sonradan eklenmiş gibi görünmeyen bir forma giden en kısa yoldur. Uygulama “Theme styling applies on your storefront and is not shown in this preview” notunu düşer; bu yüzden bunu burada değil, mağaza vitrininde değerlendirin.

   Customize text, Font style, Title bar font size ve Title bar font weight ayarlarını belirler. Customize form color, tek tek renkleri belirler: Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border ve Quote popup primary color.

   

   Tüm ayrıntılar için: Tema stilinizle eşleştirme.

10. Formu Preview alanında yeniden okuyun

    Preview paneli düzenleyicinin yanında yer alır ve siz çalıştıkça yeniden çizilir. Kaydetmeden önce araç çubuğundaki iki denetimi kullanmaya değer:

    • Önizlemeyi Guest ve Logged-in arasında değiştiren müşteri durumu düğmesi; farklı formlar görürler.
    • Masaüstü / mobil geçişi, çünkü uzun bir form telefonda farklı bir şeydir.

11. Kaydedin ve kendiniz test edin

    Bir şeyi değiştirdiğinizde Shopify’ın kaydetme çubuğu Save ve Discard changes düğmeleriyle belirir. Save düğmesine tıklayın. Bir alanda hâlâ doğrulama hatası varsa düzenleyici reddeder ve “Please resolve validation errors before saving.” der; belirttiği alanı düzeltin ve yeniden kaydedin.

    Ardından mağaza vitrininize gidin ve gerçek bir test talebi gönderin. Beklediğiniz her şeyle birlikte Quote list sayfasına geldiğini kontrol edin.

    

    Mağaza vitrinindeki form; Quote form appearance, Multiple step olarak ayarlanmış.

Not

Şablon, başlangıç noktanızı belirler; sınırınızı değil. Şablonun getirdiği her şey düzenlenebilir veya kaldırılabilir, bıraktığı her şey de Add element veya Add section ile eklenebilir. Yalnızca şablonu daha sonra değiştirmenin bir düzenleme değil, yeniden başlama olduğunu unutmayın; oluşturduğunuz alan listesini değiştirir.

Dikkat

Yayına almadan önce mutlaka kendiniz bir test talebi gönderin. Alanların, e-postanın ve teklif kaydının birbiriyle uyuştuğunu doğrulamanın tek yolu budur.

Diğer ayarların bulunduğu yer

Quote form sekmesi yalnızca sorulardan ibarettir. Satıcıların burada aradığı birkaç şey, aynı düzenleyicinin diğer sekmelerindedir:

İstediğiniz	Sekme	Bulacağınız
Formun tek sayfa veya adımlar halinde olması	Quote cart page	Quote form appearance — "Controls how the quote form looks on the quote cart page" — Multiple step veya Single page olarak ayarlanır.
Ürün satırlarının neleri gösterdiği	Quote cart page	Product list columns — "The product details shown as columns in the customer's quote cart" — bkz. Tekliflenen ürün grubu.
Müşterilerin ürünleri gruplandırmasına izin verme	Quote cart page	Enable Quote Sections — "Lets customers group the products in their quote cart into named sections" — bkz. Tekliflenen ürün grubu.
Düğmenin ifadesi ve yerleşimi	Button & widget	Düğme metni, tıklama eylemi, düğme konumu ve onu kimin görebileceği.
Gönderdikten sonra ne olacağı	Success message	Teşekkür ifadesi ve Redirect to custom URL.

Not

Düzenleme sırasında sekmeler arasında geçmeye çalışırsanız düzenleyici sizi bu konuda kendisi uyarır: “Save your changes before switching tabs to avoid losing them.”

Sonraki adımlar

• Müşteri bilgi alanları — sorduklarınızı ince ayarlayın
• Tekliflenen ürün grubu — teklif sepeti sayfasındaki ürün sütunları ve teklif bölümleri
• reCAPTCHA ekleme — formu spam’den koruyun
• B2B formu oluşturma — kurumsal alıcılar için şablon