Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Porady Formularz kontaktowy na statycznej stronie

Warsztat / Porady

Formularz kontaktowy na statycznej stronie

Rafał Kukawski 14 stycznia 2015 komentarze ()

Dzięki usłudze Formspree możesz mieć na stronie dowolny formularz, który zostanie wysłany na podany przez Ciebie adres e-mail.

Wystarczy do strony wstawić zwykły formularz z atrybutem action kierującym do usługi Formspree oraz zawierającym adres e-mail, na który formularz ma zostać wysłany.

Kod: Zaznacz cały
<form method="post" action="//formspree.io/twoj@email.pl">
    <input type="text" name="imie">
    <textarea name="wiadomosc"></textarea>
    <input type="submit" value="Wyślij">
</form>

Pierwsze użycie formularza będzie skutkowało wysłaniem na podany adres wiadomości, w której znajdą się instrukcje jak potwierdzić chęć otrzymywania maili z tej usługi. Zabezpiecza to przed nadużyciami usługi.

Usługa oferuje 1000 wiadomości na miesiąc za darmo. Jeśli wymagany jest większy limit, należy skontaktować się z autorami usługi.

Jeśli mowa o kwestiach prywatności, to usługa Formspree nie przechowuje żadnych wiadomości. Usługa z kolei korzysta z API Mailgun, więc w celu eliminacji wszelkich niejasności, należy zapoznać się z ich polityką prywatności.

Usługa oferuje kilka możliwości konfiguracji. Wystarczy w formularzu umieścić specjalnie nazwane pola tekstowe (lub pola ukryte). Przykładowo:

Jeśli w formularzu znajdzie się pole o nazwie _replyto

Kod: Zaznacz cały
<input type="text" name="_replyto" placeholder="Twój e-mail" />

to podany adres e-mail osoby kontaktującej się zostanie ustawiony jako Reply-To e-maila, co pozwoli nam szybko odpowiedzieć na wiadomość z własnego klienta pocztowego.

W kontrolce o nazwie _next możemy podać adres na który użytkownik zostanie przekierowany po wysłaniu wiadomości. Domyślnie usługa Formspree pokazuje swoją wiadomość z podziękowaniami.

Kod: Zaznacz cały
<input type="hidden" name="_next" value="http://strona.pl/podziekowanie.html" />

Jeśli chcesz umożliwić użytkownikowi ustawienie tytułu maila lub chcesz na sztywno ustalić tytuł, skorzystaj z nazwy _subject.

Kod: Zaznacz cały
<input type="text" name="_subject" placeholder="Tytuł wiadomości" />
<input type="hidden" name="_subject" value="Wiadomość od użytkownika strony" />

Jeśli chcesz wysyłać kopię wiadomości na dodatkowy adres, wystarczy wstawić pole o nazwie _cc

Kod: Zaznacz cały
<input type="hidden" name="_cc" value="twoj-drugi@email.pl" />

Kolejna nazwa _gotcha jest prostym sposobem na walkę ze spamem. Wystarczy wstawić takie pole do formularza i np. ukryć je za pomocą CSS. Gdy wysłany formularz będzie miał wartość w tym polu, usługa uzna użytkownika za spambota.

Kod: Zaznacz cały
<input type="text" name="_gotcha" style="display:none" />

Usługa pozwala wysyłać formularz przez Ajaxa. Wystarczy w żądaniu ustawić nagłówek Accept na application/json, żeby otrzymać odpowiedź serwera w formacie JSON. Na stronie usługi podany został przykład z użyciem jQuery.

Kod: Zaznacz cały
$.ajax({
    url: "//formspree.io/you@email.com",
    method: "POST",
    data: {message: "hello!"},
    dataType: "json"
});

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Rafał Kukawski

Programista, webmaster. Szczególnie upodobał sobie JavaScript i technologie klienckie, choć strona serwera i bazy danych nie stanowią tajemnicy. Tworzy też aplikacje na urządzenia mobilne. kukawski.pl.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook