Formspree Kullanarak İletişim Formu Nasıl Oluşturulur

Kullanıcıların size güvenli bir şekilde e-posta göndermelerini sağlamak için web sitenizde birçok yöntem kullanabilirsiniz. Bir örnek, bir iletişim formunda mailto özniteliğini kullanmaktır. mailto özelliği, kullanıcının bir mesaj girmesi için yüklü bir posta uygulamasını açar.

Daha iyi bir deneyim için Formspree gibi bir aracı entegre etmeyi düşünün. Formspree, bir aracı görevi görür, form verilerini kaydeder ve belirttiğiniz e-posta adresine gönderir.

Formspree Nedir ve Nasıl Çalışır?

Formspree, özel bir iletişim formuna entegre edebileceğiniz bir e-posta hizmetidir. Formspree'de oturum açtığınızda, bir form için hedef e-posta adresinizi belirtebilirsiniz. Formspree, form gönderimlerini sizin adınıza işler. sana izin verir Google Formlar gibi ücretsiz bir iletişim formu oluşturun

Formspree, özel formunuza eklemeniz gereken bir uç nokta oluşturur. Bir kullanıcı "Gönder" düğmesine bastığında, form, Formspree'nin API hizmetini çağırmak için uç noktayı kullanır. Bu, iletişim formunun içeriğini içeren bir e-posta oluşturacaktır.

Formspree, bu e-postayı Formspree hesabınızda listelediğiniz hedef e-posta adresine gönderecektir. Daha sonra e-postayı gelen kutunuza alacaksınız. Formspree hesabınızda ayrıca iletişim formu gönderimlerinizi görüntüleyebileceğiniz bir yer vardır.

E-postanızı Formspree'ye kaydetmek için oturum açın ve formunuz için hedef e-posta adresini girin.

1. Giriş Formspree. Hesabınız yoksa, e-posta adresinizi ve şifrenizi girmeniz gerekecektir. İletişim formunun gönderileri göndermesini istediğiniz e-posta adresini kullanarak kaydolun. Ayrıca kayıt işlemi sırasında bu e-posta adresini doğrulamanız gerekebilir.
2. Kayıt işlemi tamamlandıktan sonra "Formlar" sayfası açılacaktır. Tıklamak Yeni form.
3. İletişim formunuz için herhangi bir ad girin ve varsayılan proje ayarlarını bırakın. "E-postaları gönder" alanına hedef e-posta adresini girin. Bu, Formspree'nin iletişim formu gönderimlerinizi göndereceği yerdir. Tamamlandığında, üzerine tıklayın Form Oluştur.
4. Formspree size bir uç nokta ve bunun nasıl kullanılacağına dair örnekler sağlayacaktır. Bu uç noktayı web sitenizdeki özel iletişim formunuza eklemeniz gerekecek (bununla ilgili daha fazla bilgi ileride anlatılacaktır).
5. Varsayılan olarak Formspree, formunuzu "İlk Projem" adlı bir proje altında saklar. Bunun adını değiştirmek istiyorsanız, "Formlar" sayfasına geri dönün. Tıklamak Ayarlar proje adının yanında.
6. Burada, projenizin adını başka bir şeyle değiştirebilirsiniz. Örneğin, web sitenizle aynı ada sahip olacak şekilde yeniden adlandırabilirsiniz. Ayrıca web sitenizin URL'sini de ekleyebilirsiniz.

Formspree tarafından sağlanan uç noktayı web sitenizin kodundaki iletişim formuna eklemeniz gerekecek.

1. Uç noktayı formun "eylem" özniteliğine ekleyin. Bu, bir kullanıcının tarayıcısının, formu gönderdikleri zaman bu URL'ye göndermesine neden olur.

   <form eylemi="https://formspree.io/f/xjvlaqpe" yöntem="İLETİ">
   <!-- Formunuz burada -->
   <düğme türü="Sunmak" sınıf="buton"> Göndermek </button>
   </form>

2. Formunuza girdiler ekleyin. kullanan bu örnek formu kullanabilirsiniz. Bootstrap CSS çerçevesi:

   <form eylemi="https://formspree.io/f/mbjqjrdl" sınıf="ekstra dolgu" yöntem="İLETİ">
   <div sınıfı="gruptan">
   <etiket için ="cevap"> E </label>
   <giriş türü="e-posta" sınıf="form kontrolü" kimlik="cevap" isim="_replyto" ngModel="cevap vermek" aria-tanımlanan="e-postaYardım" yer tutucu="[email protected]">
   <küçük kimlik="e-postaYardım" sınıf="form-metin metin-sessiz"> E-postanız başka kimseyle paylaşılmayacaktır. </small>
   </div>
   <div sınıfı="gruptan">
   <etiket için ="İleti"> Mesajın </label>
   <metin alanı adı="İleti" stil="yükseklik: 200 piksel" sınıf="form kontrolü" kimlik="İleti" yer tutucu="Selam! İ'sizinle iletişime geçiyorum çünkü..."></textarea>
   </div>
   <düğme türü="Sunmak" sınıf="buton"> Göndermek </button>
   </form>
   

Formspree'nin çalışıp çalışmadığını test etmek için iletişim formunu kullanarak kendinize bir mesaj gönderin, Göndermekve e-postanızın gelen kutusunu kontrol edin.

1. Web sitenizi çalıştırın ve iletişim formunun bulunduğu sayfayı açın. İletişim formuna bir mesaj girin ve Göndermek.
2. İletişim formu mesajını gelen kutunuza alacaksınız.
3. Formspree'ye geri dönerseniz, Gönderiler sekme. Burada ayrıca iletişim formunuzdan gönderilen mesajları da görebileceksiniz.

Formspree, sitenize özel bir iletişim formu entegre etmek için kullanabileceğiniz birçok hizmetten biridir. Arka uç ayrıntıları hakkında endişelenmenize gerek kalmadan hızlı bir şekilde kullanıcı geri bildirimlerini kabul etmeye başlamanıza olanak tanır.

HTML ve JavaScript ile form oluşturma konusunda yeniyseniz, istemci tarafı form doğrulama hakkında da daha fazla bilgi edinebilirsiniz. Bu, iletişim formlarınızın tüm kullanıcı girişlerini doğrulayabilmesini sağlamaya yardımcı olur.

Yazar hakkında

Sharlene Von Drehnen (9 Makale Yayınlandı)

Sharlene, MUO'da Teknoloji Yazarıdır ve ayrıca Yazılım Geliştirme alanında tam zamanlı olarak çalışmaktadır. BT lisans derecesine sahiptir ve daha önce Kalite Güvencesi ve Üniversitede özel ders tecrübesine sahiptir. Sharlene oyun oynamayı ve piyano çalmayı sever.

Sharlene Von Drehnen'dan Daha Fazla