Umbraco Forms: İletişim Formu Oluşturma Rehberi

Umbraco Forms: İletişim Formu Oluşturma Rehberi

Bu eğitimde, Umbraco Forms kullanarak bir İletişim Formu oluşturmayı inceleyeceğiz. Bu rehber, bir İletişim Formu oluşturma sürecinde size adım adım yol gösterecek ve formun inşasında yer alan tüm farklı bileşenleri kapsayacaktır.

Web sitenizde bir İletişim Formu kullanarak ziyaretçilerin size mesaj göndermesine olanak tanıyabilirsiniz. Web sitenizde bir İletişim Formu bulundurmak, potansiyel müşteri sorularını takip etmenizi sağlar ve e-posta iletişimi yoluyla yeni iş fırsatları (leads) oluşturmanıza yardımcı olur. Umbraco Türkiye olarak, Türkiye'deki yazılım geliştiricilere ve dijital pazarlama profesyonellerine Umbraco CMS hakkında kapsamlı Türkçe kaynaklar, pratik rehberler ve teknik ipuçları sunarak yerel topluluğun dijital yetkinliğini artırmayı amaçlıyoruz.

Bu metni blog postunun "Giriş" bölümü olarak kullanabilirsin. Yazının devamındaki teknik adımlara geçmeden önce okuyucuyu hazırlamak için oldukça ideal bir özet. Umbraco Türkiye olarak 

1. Adım: Doküman Tiplerini (Document Types) Yapılandırma

Bu eğitimin ilk aşaması, iletişim formunu web sitenizde görüntülemek için gerekli Doküman Tiplerini hazırlamaktır.

Kompozisyon (Composition) Oluşturma

Bir Kompozisyon oluşturarak başlıyoruz. Kompozisyonlar, farklı Doküman Tiplerinde tekrar tekrar kullanabileceğiniz bağımsız özellik setleridir. Bu sayede aynı özellikleri her sayfada tek tek oluşturmak zorunda kalmazsınız.

Kompozisyon oluşturmak için şu adımları izleyin:

1. Umbraco Backoffice panelinde Settings (Ayarlar) bölümüne gidin.

2. Sol ağaç yapısında Document Types klasörünü genişletin.

3. Compositions klasörünün yanındaki üç noktaya (...) tıklayın.

4. Create ve ardından Document Type seçeneğine tıklayın.

5. İsim olarak Title Box yazın.

6. Aşağıdaki alanları belirtilen özelliklerle ekleyin:
   

7. Değişiklikleri kaydetmek için Save butonuna tıklayın.

"Contact Us" Doküman Tipini Şablonla Birlikte Oluşturma

Şimdi, formun yer alacağı gerçek sayfayı temsil edecek Doküman Tipini oluşturacağız.

1. Settings bölümünde Document Types klasörünün yanındaki (...) simgesine tıklayın.

2. Create > Document Type with Template seçeneğine tıklayın.

3. İsim olarak Contact Us yazın.

4. Sağ üst köşedeki Compositions butonuna tıklayın.

5. Listeden Title Box'ı seçin ve Submit butonuna basın.

6. Aşağıdaki alanları ekleyin:         

7. Save butonuna tıklayarak kaydedin.

Umbraco Forms: İletişim Formu Kurulumu ve Yapılandırması

Doküman Tipi İzinlerini Güncelleme

Aşağıdaki adımlarda, kök içerik düğümünün altına alt düğümler ekleyebilmek için izinleri güncelleyeceğiz:

1. Web sitenizdeki kök içerik düğümü (bu örnekte Home page) için kullanılan Doküman Tipine gidin.

2. Structure sekmesine tıklayın.

3. Allowed child node types bölümünde Choose butonuna tıklayın.

4. Contact Us sayfasını seçin.

5. Choose butonuna tıklayın.

6. Save butonuna tıklayın.

Adım 2: İçerik Düğümünü (Content Node) Hazırlama

Bu adım, web ziyaretçilerine sunulacak olan HTML sayfasını oluşturmanızı sağlar:

1. Umbraco Backoffice panelinde Content bölümüne gidin.

2. Home Page yanındaki ... simgesine tıklayın.

3. Create seçeneğine tıklayın.

4. Contact Us doküman tipini seçin.

5. İçerik düğümü için bir isim girin (örneğin: Contact Us).

6. Title, Subtitle ve Body Text değerlerini girin.

7. Save veya Save and Publish butonuna tıklayın.

Adım 3: İletişim Formunu Oluşturma

Bu aşamada Umbraco Forms kullanarak formu tasarlayacağız:

1. Umbraco Backoffice panelinde Forms bölümüne gidin.

2. Forms klasörü yanındaki ... simgesine tıklayın.

3. Create butonuna tıklayın.

4. New Form... seçeneğine tıklayın.

5. Form için bir isim girin (örneğin: Contact Us).

6. [İsteğe bağlı] Veri Onayı beyanı için bir grup ismi girin (örneğin: Data Consent).

7. Add new group butonuna tıklayın ve ismini Information olarak belirleyin.

8. Yeni bir alan eklemek için Add Question seçeneğine tıklayın.

9. Aşağıdaki detayları girin:
   

10. Submit butonuna tıklayın.

11. Aşağıdaki alanları eklemek için 8-10. adımları tekrarlayın:

12. Enter your phone number alanında Conditions (Koşullar) özelliğini aktif hale getirin.

13. Add Condition butonuna tıklayın.

14. Açılır menüden How should we contact you? sorusunu seçin.

15. Değer alanında phone seçeneğini belirleyin ve Submit butonuna tıklayın.

16. Enter your email address alanı için benzer adımları uygulayın (Koşul olarak email seçilmelidir).

17. Diğer alanları ekleyin: What is your role? (Dropdown), Attachments (File upload), Are you a Robot? (reCAPTCHAv2).

18. Reorder seçeneğine tıklayarak Data Consent grubunu en alta taşıyın ve Save butonuna tıklayın.
    

Form İş Akışını (Workflow) Yapılandırma

1. Form editörünün altındaki Submit message/ Go to page seçeneklerine tıklayın.

2. Message on Submit alanına özel bir mesaj girin ve Submit butonuna tıklayın.

3. Send template email adımına tıklayın.

4. Sender Email alanına bir e-posta adresi girin.

5. Attach Uploaded Files seçeneğini aktif edin.

6. Submit ve ardından Save butonuna tıklayın.

Form Ayarlarını Yapılandırma

1. Form editöründeki Settings sekmesine gidin.

2. Validation bölümüne kaydırın.

3. Mark Mandatory fields seçeneğinin işaretli olduğundan emin olun.

4. Save butonuna tıklayın.

Adım 4: Formu İçerik Düğümüne Ekleme

1. Content bölümüne gidin ve Contact Us sayfasını açın.

2. Contact Form alanında Choose butonuna tıklayın.

3. Insert Form with Theme seçeneğini seçin.

4. Contact Us Form'u seçin ve Choose butonuna tıklayın.

5. Save veya Save and Publish butonuna tıklayın.

Adım 5: Ek Yapılandırmalar

Formun düzgün çalışması için gerekli olan ek ayarları bu aşamada tamamlayacağız:

1. reCAPTCHA Değerini Yapılandırma: Formda robot kontrolünün çalışması için appsettings.json dosyasını güncelleyerek ilgili değerleri ekleyin.

2. SMTP (Basit Posta Aktarım Protokolü) Yapılandırması: Form gönderildiğinde e-posta iletilebilmesi için appsettings.json dosyasına SMTP ayarlarını ekleyin.

Adım 6: İletişim Formunu Ekrana Basma (Rendering)

Bu adımda, "Contact Us" Doküman Tipindeki değerleri şablon (template) üzerinde görüntüleyeceğiz:

1. Umbraco Backoffice panelinde Settings (Ayarlar) bölümüne gidin.

2. Templates (Şablonlar) klasörü altındaki Contact Us şablonunu açın.

3. Formu ekrana basmak için aşağıdaki kodu ilgili alana girin:

   @using Umbraco.Forms.Web.Helpers;

   @await Component.InvokeAsync("RenderForm", new { formId = Guid.Parse("<form guid>"), FormTheme = "bootstrap3-horizontal", ExcludeScripts = "1" })

4. Kod içerisindeki <form guid> kısmını, formunuzun Info sekmesinde bulunan ID (GUID) ile değiştirin.

5. Insert (Ekle) butonunu seçin.

6. Value (Değer) seçeneğine tıklayın.

7. Choose field açılır menüsünden Document Type seçeneğini belirleyin.

8. Contact Us Doküman Tipini seçin ve Choose butonuna tıklayın.

9. Açılan listeden bodyText alanını seçin.

10. Önce Submit, ardından Save butonuna tıklayarak değişiklikleri kaydedin.

Final: Sonucu Görüntüleme

Yapılandırmayı tamamladınız. Artık formu web sitesinin ön yüzünde kontrol edebilirsiniz:

1. Umbraco Backoffice panelinde Content (İçerik) bölümüne gidin.

2. Contact Us sayfasını açın.

3. Sayfanın yayınlanmış (published) olduğundan emin olun.

4. Info (Bilgi) sekmesine gidin.

5. Links (Linkler) bölümündeki Published bağlantısına tıklayarak formu canlı olarak görüntüleyin.