İletişim formu

Ad, e-posta, telefon, mesaj ve ek alanlarla Shopify’ın kendi iletişim formu; yanında görsel, adres, harita bağlantısı, e-posta ve çalışma saatleri sütunu.

Kategori
Formlar ve bülten
Kullanım yeri
İletişim, Hakkımızda, Açılış sayfaları, Her sayfa
Okuduğu veri
Shopify iletişim formu
Boyut
36 KB, JavaScript yok
Lisans
MIT, müşteri işlerinde ücretsiz

Kısaca

İletişim formu, Shopify’ın kendi iletişim formunu kullanan ücretsiz bir Shopify bölümüdür; mesajlar uygulama gerekmeden mağazanın gönderici e-posta adresine ulaşır. Ad, e-posta, telefon ve mesaj alanları hazırdır; ek alanlar (kısa metin, uzun metin, seçim listesi, onay kutusu) bloklarla eklenir ve formun yanındaki isteğe bağlı sütun bir görsel, harita bağlantılı adres, e-posta, telefon ve çalışma saatlerini gösterir. Hatalar alanların üstünde listelenir, her alanın görünür bir etiketi vardır ve Online Store 2.0 temalarında çalışır.

Örnek içerikli demo

Ne zaman kullanılır

  • Mağaza adresi, çalışma saatleri ve dükkân fotoğrafıyla İletişim sayfası
  • Seçim listesi ve sipariş numarası alanıyla toptan satış ya da özel sipariş talep formu
  • Hakkımızda ya da açılış sayfasının altında kısa bir "Bize sorun" formu

Tema düzenleyicide

  • Başlık (H1–H3 ya da paragraf etiketi, dört boyut) ve metin
  • Ad ve telefon gizli, isteğe bağlı ya da zorunlu; mesaj isteğe bağlı ya da zorunlu; e-posta her zaman zorunlu
  • Ek alan blokları: kısa metin, uzun metin, seçim listesi ya da onay kutusu, yardım metni, zorunlu, yarım ya da tam genişlik
  • Tüm etiketler, zorunlu işareti, düğme, başarı mesajı, hata başlığı ve gizlilik notu düzenlenebilir metin
  • Bilgi sütunu: odak noktalı masaüstü ve mobil görsel, başlık, harita bağlantılı adres, iletişim bilgisi blokları (e-posta, telefon, saatler)
  • Masaüstünde bilgi sütunu solda ya da sağda, mobilde sıra, sayfa ya da tam genişlik, cihaza göre başlık hizalaması
  • Arka plan rengi ya da gradyanı, metin, vurgu, alan, kenarlık, bilgi sütunu ve hata renkleri
  • Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği (anchor ID), kaydırınca belirme

Dosyalar

sections/lib-contact-form.liquid
İndir
Kodu görün

lib-contact-form.liquid dosyasını açın

snippets/lib-image.liquid
İndir
Kodu görün

lib-image.liquid dosyasını açın

Sade Liquid ve CSS ile, JavaScript olmadan yazıldı. Uygulama da bağımlılık da yok.

Temanıza nasıl eklenir

  1. Bölüm dosyasını temanızın sections klasörüne, listelediği snippet’leri de snippets klasörüne kopyalayın.
  2. Tema düzenleyicide Add section’ı (Bölüm ekle) seçin ve adı “Lib ·” ile başlayan bölümü ekleyin.
  3. Örnek metni mağazanızın kendi metniyle değiştirin, renkleri markanıza göre ayarlayın.

Sık sorulan sorular

Mesajlar nereye gidiyor?
Temanızın kendi iletişim sayfasında olduğu gibi, Shopify yönetim panelinde Ayarlar > Bildirimler altında belirlenen gönderici e-posta adresine. Bölüm Shopify’ın iletişim formunu kullanır; uygulama ya da üçüncü taraf hizmet yoktur ve mağazanın spam koruması ayarları geçerli kalır.
Kendi alanlarımı ekleyebilir miyim?
Evet. Ek alan blokları ekleyin: kısa metin, uzun metin, seçim listesi (her satıra bir seçenek) ya da onay kutusu; her birinde yardım satırı, zorunlu ya da isteğe bağlı seçimi ve yarım ya da tam genişlik vardır. Etiket, size gelen e-postada alanın adı olur.
Erişilebilir mi?
Her alanın görünür bir etiketi vardır ve zorunlu işareti yalnızca yıldız değil, metindir. Gönderimden sonra hatalar alanların üstünde bir uyarı olarak listelenir, e-posta alanı geçersiz olarak işaretlenir ve başarı mesajı ekran okuyuculara duyurulur. Ad, e-posta ve telefon otomatik doldurmayı destekler.
Harita bağlantısı bir harita API’si kullanıyor mu?
Hayır. Adres, onu yeni sekmede Google Haritalar’da açan düz bir bağlantıya dönüşür; sayfanıza hiçbir şey yüklenmez ve API anahtarı gerekmez. Gizlemek için bağlantı metnini boş bırakın.

Yayınlamadan önce

  • Demolardaki metinler örnek içeriktir. Yayımlamadan önce kendi mağazanızın bilgileriyle değiştirin.
  • Hareketin azaltılmasını isteyen ziyaretçilerde animasyonlar kapalıdır.
  • Her dosya burada yayımlanmadan önce Shopify Theme Check ile kontrol edilir.

Temanıza uyarlanmış bir sürüme ya da burada olmayan bir bölüme mi ihtiyacınız var? Şu sayfaya bakın: Shopify tema geliştirme.

Geliştirmek istediğiniz bir şey mi var? Gelin, birlikte konuşalım.

Aynı anda sınırlı sayıda proje alıyoruz.

Gencer KarakayaShopify mühendisi

Proje özetinizi bir mühendis okur; size e-postayla yanıt veririz.