Ghost Özel Kayıt Formu Oluşturma

Paylaşım için teşekkürler.

Eline sağlık

Paylaşım için teşekkürler.

Elinize sağlık, paylaşım için teşekkürler.

Ghost ile özel bir kayıt formu oluşturmayı öğrenin. Bu kılavuz, HTML entegrasyonu, CSS stili ve kullanıcı etkileşimi stratejileri dahil olmak üzere tüm adımları kapsar.
Güçlü bir marka kimliğine sahip yayınlar veya Ghost sitelerini tamamen optimize etmek isteyenler için özel bir kayıt formu, yalnızca bir araçtan daha fazlasıdır; markanın bir uzantısıdır.

Örnek olarak plak koleksiyonculuğu ve müzik dinlemeye odaklanan bir yayın olan Of Record'u kullanarak şunları inceleyeceğiz:

Kişiye özel kayıt yaptırmanın nedenleri
Özel bir kayıt formunun anatomisi
İlgi çekici bir kayıt formunu oluşturan unsurlara bir göz atın
İşte bu eğitimde oluşturacağımız kayıt formunun bir önizlemesi:

Düşündüğünüzden daha basit olabilir

Ghost, çoğu yayın için kullanıma hazır ve özel kod gerektirmeyen basit bir çözüm sunuyor.

Ayarlar → Üyelik'e gidin, bir düzen ve renk seçin, etiketlerinizi uygulayın ve ardından web'de istediğiniz yerde kullanmak üzere yerleştirme kodunu kopyalayın. İşte canlı bir örnek:
Ancak ileri düzey kullanıcılar için Ghost, şunları yapmanıza olanak tanıyan tamamen özel bir kayıt formu oluşturmanıza olanak tanıyan araçlar sunar:

Formu markanızın görsel kimliğiyle tamamen uyumlu hale getirin.
Benzersiz bir kullanıcı deneyimi sağlayın.
Performansı optimize edin.
Aşağıda gösterilen Of Record kayıt formunu inceleyerek bu araçların nasıl çalıştığını görelim.



Özel bir kayıt formunun anatomisi
Özel bir kayıt formu oluşturmanın güzelliği, standart HTML öğeleriyle oluşturmakla tamamen aynı olmasıdır. Ghost ile entegre etmek, birkaç özel veri niteliği eklemek kadar basittir. İşte Of Record'un kayıt formunun kodu:

html:

<form data-members-form= >
    <input data-members-label type="hidden" value="Turntable buying guide" />
    <label>
        Name
        <input data-members-name />
    </label>
    <label>
        Email
        <input data-members-email type="email" required />
    </label>
    <button>
        Sign up
    </button>
    <p>⏲️ Please hold while we check our collection.</p>
    <p>❗Something's gone wrong. Please try again.</p>
    <p>🎸 Success! Check your inbox for our email.</p>
</form>

Bu formu temanızda veya sitenizde bir HTML kartı aracılığıyla herhangi bir yere yerleştirdiğinizde, anında özel bir kayıt formu oluşturulur

Çalışmasını sağlayan gerekli özelliklerden bahsedelim.

Formu etkinleştirin
Ghost'u özel formunuzdan haberdar etmek için forma data-members-form özniteliğini ekleyin. Yeni bir üyenin alacağı e-postanın dilini, özniteliğe bir değer ekleyerek değiştirebileceğinizi unutmayın:

: yeni üyeler "kayıt ol" dilinde bir e-posta alırlar
(varsayılan): yeni üyeler "abone ol" dilinde bir e-posta alırlar
İşlevsel olarak, bu seçeneklerin her ikisi de aynıdır. Bunlardan birini veya diğerini seçmek tamamen yayınınızın kimliğine bağlıdır. Dokümanlarda data-members-form özniteliği için ek seçeneklere bakın.

Kayıt formunu yalnızca üye olmayanlara göstermek için eşleşme yardımcısını @member nesnesiyle birlikte kullanın.

Bir isim al
html:

<label>
    Name
    <input data-members-name />
</label>

Of Record formunda, girdiyi bir etiket öğesiyle sarıyoruz. Bu yaklaşım isteğe bağlıdır, ancak etiketi ve girdiyi ilişkilendirmek için kullanışlı bir yöntemdir ve formu daha erişilebilir hale getirir.

data-members-name özniteliği, Ghost'a üyenin adını toplamasını söyler. Ancak, girdiden "gerekli" ifadesi çıkarıldığı için bu alan isteğe bağlıdır. Bir üye, adını vermeden kaydolabilir. Bir ad istemek için, bir sonraki bölümde görüldüğü gibi "gerekli" özniteliğini kullanın.

Bir e-posta al

html:

<label>
    Email
    <input data-members-email type="email" required />
</label>

Bu girdiye type="email" ve required niteliklerini ekliyoruz. Bunlar doğrulamaya yardımcı olur (tarayıcı e-postanın geçerli olup olmadığını kontrol eder) ve required, göndermeden önce bir değerin mevcut olduğundan emin olur.

İşin sihri, Ghost'un gönderilen e-postayı yakalamak için kullandığı data-members-email niteliğinin eklenmesiyle ortaya çıkıyor.

Etiket Ekle
Ad ve e-posta adresi kaydetmenin yanı sıra, özel formunuzla kaydolan üyelere de etiket ekleyebilirsiniz. Bu etiketler, Ghost Admin'deki üyenin profilinde görünür ve Üyeler menüsü üzerinden filtrelenebilir. Ayrıca, e-posta gönderirken bu etiketleri alıcı grupları olarak da kullanabilirsiniz. Kayıt formunuz belirli bir içerikle bağlantılıysa ve bu içerikle ilgili bir güncelleme göndermek istiyorsanız, bu özellik harika çalışır. Etiketler sayesinde, o içerikle ilgilenen herkesin bir listesine zaten sahip olursunuz!

Ghost Admin'deki üye profili şöyle görünür. "Pikap satın alma rehberi" etiketine dikkat edin.



Ve, bir etiket ayarlamak için eklenecek kod şu şekilde.

html:

<input data-members-label type="hidden" value="Turntable buying guide" />

Bu özellik, gizli bir girdi türü (yani kullanıcıya görünmeyecek) ve data-members-label özniteliği ekleyerek çalışır. Ardından, eklemek istediğiniz etikete değeri ayarlayın. İşte bu kadar!

Artık, birisi özel formunuzla kaydolduğunda, bu etiket otomatik olarak uygulanacaktır.

Form durumları ve CSS stili

html:

<p>⏲️ Please hold while we check our collection.</p>
<p>❗Something's gone wrong. Please try again.</p>
<p>🎸 Success! Check your inbox for our email.</p>

Ghost'un özel veri niteliklerini eklemek, formunuzun üyelerinizin kaydolmasını sağlamakla kalmaz, aynı zamanda kullanıcı kaydolurken ilgili sınıfları da ekler. Form öğesine eklenen bu sınıflar, form öğesinin durumunu yansıtır: yükleme, başarı ve hata.



Bu sınıflar, formun durumunu kullanıcınıza iletmenizi sağlar. Bunu nasıl yapacağınız tamamen size kalmış, ancak CSS'de uygulayabileceğiniz temel mantığı göstereceğiz.

html:

/* Form states */
:where(.loading, .success, .error)  {
    display: none;
}

.loading .loading, .success .success, .error .error {
    display: block;
}

Durumların varsayılan stilini (örneğin <p>) "display: none" olarak ayarlıyoruz. Ardından, Ghost sınıfı form öğesine eklediğinde bu durumları geçersiz kılıyoruz. Örneğin, kayıt yüklenirken form HTML'si şöyle görünüyor:

html:

<form data-members-form>
  ...
</form>

Formdaki yükleme sınıfı ve p öğesindeki aynı sınıf, .loading .loading seçicisini eşleştirir ve görüntüleme özelliğini durumu gösterecek şekilde günceller.

Öğelerin gösterilip gösterilmeyeceğini kontrol eden yalnızca CSS olduğundan, tekrar tekrar kaydolmak yerine, formdan farklı sınıfları ekleyip kaldırarak farklı durumları simüle edebilirsiniz.

Kullanıcıyı kaydolma sürecinde nerede oldukları konusunda bilgilendirmek yalnızca birkaç satır CSS ile mümkündür ve özel bir form oluştururken birçok yaratıcı olasılık sunar.

Formunuz için içerik tasarlama
Artık özel bir kayıt formunun nasıl oluşturulacağını bildiğinize göre, içine ne koyacağınız gibi zorlu bir görevle karşı karşıya kalabilirsiniz.
Özel bir kayıt formuyla istediğiniz yaklaşımı benimseyebilirsiniz:

Minimalist: Basit ve sade tipografi, temel değerlere odaklanır
Görsel hikaye anlatımı: Görseller bir hikaye anlatır ve hedef kitleyle bağlantı kurar
Faydalar hakkında her şey: Madde işaretleri veya simgeler, değer konumunu anında iletir
Etkileşimli deneyim: Animasyonlar, geçişler ve etkileşimli öğeler kullanıcıyı etkiler ve kaydolmayı kolaylaştırır
Bunlar, işleri zorlaştıran yaklaşımlardan sadece birkaçı. Etkili bir kayıt formu nasıl oluşturulur? Endişelenmeyin! Ghost Resources'ta sizi destekliyoruz.

İçerik oluşturucuları, işletmeleri ve yayıncıları desteklemek için kanıta dayalı en iyi uygulamaları paylaşıyoruz. Örneğin, güçlü bir metin oluşturmak için bu formüle veya dönüşüm sağlayan bir kayıt formu oluşturmak için bu stratejilere göz atın.​

Eline sağlık

Paylaşım için teşekkürler.