Mailchimp Email Aboneliği Formu Tasarımı

Bu yazımda Mailchimp Email Aboneliği Formu Tasarımı için hazır HTML ve CSS kodlarını vereceğim.

Mailchimp Email Aboneliği Formu Tasarımı Tasarım Örneği
Örnek Form Görseli

Kodları anlattığım yerlere yapıştırıp gerekli oynamaları yapabileceksiniz.

 

Biraz Mailchmip nedir yine de bahsedeyim…

MC4WP: Mailchimp toplu mail göndermeyi sağlayan bir servistir.

Toplu mail gönderme eklentileri arasında en popüler ve en gelişmiş olan eklentilerden bir tanesidir.

Ücretli ve ücretsiz paketleri mevcut ama ücretsiz paketi size fazlasıyla yetecektir. Buradaki bağlantılardan fiyatları inceleyebilirsiniz.

 

Bu yazımda Mailchimp eklentisinin kurulumunu anlatmayacağım çünkü internette bu konuyla ilgili bolca yazı ve videolu ders var sizin için buraya iki tane link bırakayım;

MailChimp Kurulumu Resimli Anlatım -WPMavi

MailChimp Kurulumu Videolu Anlatım – Sadri Ercan

 

Birçok eklenti ile uyumlu çalışmaktadır.
Bu eklentiler;

Contact Form 7 -> Web sitelerinin iletişim formu oluşturulurken en çok kullandığı eklentidir.

WooCommerce -> WordPress kullanan firmaların e-ticaret yaparken kullandığı eklentidir.

BuddyPress -> Sitenizi sosyal medya (örn: twitter)  benzeri bir konsept yaratan eklentidir.

Sitenize üye olan kişiler paylaşım yapabilir, başka bir kullanıcı o paylaşımın altına yorum yazabilir.

 

[su_label type=”info”]MC4WP: Mailchimp Ayarı [/su_label]

Eklentiyi kurup formu oluşturduktan sonra Formcode bölümüne yazmanız gereken kodlar;

<input id="myform" type="email" name="EMAIL" placeholder="E-posta" required />

<input id="mybtn" type="submit" value="Kayıt ol" />

Mailchimp Email Aboneliği Formu Tasarımı Bölümü

[su_label type=”info”] Ek CSS Sayfası [/su_label]

Görünüm>>Özelleştir>> Ek CSS kısmına şu kodları yapıştırın. Ve kaydedin.

#mybtn{
color:#fff;
background:#ca9b52;
border-radius:0px 50px 50px 5px;
margin-left:-55px;
padding-right:20px;

}

#mybtn:hover{

background:#817878; }

#btb{ text-align:center; }

#myform{
border-radius:50px 0px 0px 50px;
padding:8px;
margin-right:0px;
padding-left:10px;
padding-right:0px }

 

[su_label type=”info” class=”test”]Padding Nedir?[/su_label]

Elementin kenarı ile element arasında verilen boşluktur.

padding nedir
yazı kelimesinin paddigini arttırdığımızda kelime sabit kalıyor ama dış çevreve ile arasındaki mesafe artıyor.

örnek için buradaki sayfayı inceleyebilirsiniz.

[su_label type=”info” class=”test”]Margin Nedir?[/su_label]

Elemente dışarıdan boşluk vermeye yarar.

margin nedir
margin-top’ı 5 arttırarak dıştan sarı kutu ile arasındaki mesafenin açıldığını görüyoruz.

Örnek için buradaki sayfayı inceleyebilirsiniz.

 

[su_label type=”success”]Kodları kolay düzenleyin.[/su_label]

Form sitenizde gerekli yerde gözüktüğünde üzerine sağ tıklayıp ögeyi denetle deyin.

Ve gerekli padding, margin ve renk ayarlamalarını yapabilirsiniz.

Mesela padding-right:75px; kısmının üzerine iki kez tıklayarak oradan görerek arttırıp azaltabilirsiniz.

[su_label type=”warning”]Email aboneliği kutusuna ne yazmalısınız?[/su_label]

Mailchimp Email Aboneliği Formu Tasarımı bittikten sonra İnsanları Email aboneliğinize kayıt olması için bazı faktörler vardır;

Bunlarda bazıları;

  • Email aboneliği formu görünür bir yerde olmalı…
  • Email aboneliği formu yazıp geçmemelisiniz, [su_highlight]oraya güzel okuyucuya takip etmesini sağlayacak bir cümle kurmalısınız.[/su_highlight]

Örneğin Karavan ile ilgili bir blogunuz mu var şu tarz bir cümle kurabilirsiniz…

Keşfetmekten heyecan duyacağınız yeni yerlerden ve diğer karavan maceralarımızdan haberdar olmak için takip edin, iletişimde kalalım✔️

Emin olun formunuza kayıt ol diye bir başlık atmak yerine bu tarz bir cümle başlık atarsanız kayıt olanların sayısı daha fazla olacaktır.

Ve son olarak gerçekten güzel, emek harcanmış bilgileri okuyucularınızla paylaşmayı unutmayın.

Paylaş:

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir