Jak utworzyć formularz kontaktowy za pomocą Formspree

W swojej witrynie możesz korzystać z wielu metod, aby umożliwić użytkownikom bezpieczne wysyłanie do Ciebie wiadomości e-mail. Jednym z przykładów jest użycie atrybutu mailto w formularzu kontaktowym. Atrybut mailto otwiera zainstalowaną aplikację pocztową, w której użytkownik może wprowadzić wiadomość.

Aby uzyskać lepsze wrażenia, rozważ zintegrowanie narzędzia, takiego jak Formspree. Formspree działa jako pośrednik, rejestrując dane formularza i wysyłając je na podany przez Ciebie adres e-mail.

Co to jest Formspree i jak to działa?

Formspree to usługa poczty e-mail, którą można zintegrować z niestandardowym formularzem kontaktowym. Po zalogowaniu się do Formspree możesz określić docelowy adres e-mail dla formularza. Formspree obsługuje przesyłanie formularzy w Twoim imieniu. Pozwala ci

Formspree wygeneruje punkt końcowy, który należy dodać do niestandardowego formularza. Gdy użytkownik naciśnie przycisk „Prześlij”, formularz użyje punktu końcowego do wywołania usługi API Formspree. Spowoduje to wygenerowanie e-maila z treścią formularza kontaktowego.

Formspree wyśle ​​tę wiadomość e-mail na docelowy adres e-mail podany na koncie Formspree. Następnie otrzymasz wiadomość e-mail na swoją skrzynkę odbiorczą. Twoje konto Formspree zawiera również miejsce, w którym możesz przeglądać przesłane formularze kontaktowe.

Aby zarejestrować swój adres e-mail w Formspree, zaloguj się i wprowadź docelowy adres e-mail dla swojego formularza.

1. Zaloguj się do Formpree. Jeśli nie masz konta, będziesz musiał podać swój adres e-mail i hasło. Zarejestruj się, korzystając z adresu e-mail, na który formularz kontaktowy ma wysyłać zgłoszenia. Może być również konieczne zweryfikowanie tego adresu e-mail podczas procesu rejestracji.
2. Po zakończeniu procesu rejestracji otworzy się strona „Formularze”. Kliknij Nowa forma.
3. Wpisz dowolną nazwę formularza kontaktowego i pozostaw domyślne ustawienia projektu. Wprowadź docelowy adres e-mail w polu „Wyślij e-maile do”. W tym miejscu Formspree wyśle ​​​​przesyłane przez Ciebie formularze kontaktowe. Po zakończeniu kliknij Utwórz formularz.
4. Formspree dostarczy Ci punkt końcowy i przykłady, jak z niego korzystać. Musisz dodać ten punkt końcowy do niestandardowego formularza kontaktowego w swojej witrynie (więcej na ten temat później).
5. Domyślnie Formspree przechowuje formularz w projekcie o nazwie „Mój pierwszy projekt”. Jeśli chcesz zmienić nazwę tego, wróć do strony „Formularze”. Kliknij Ustawienia obok nazwy projektu.
6. Tutaj możesz zmienić nazwę swojego projektu na inną. Na przykład możesz zmienić jego nazwę, aby miała taką samą nazwę jak Twoja witryna. Możesz także dodać adres URL swojej witryny.

Będziesz musiał dodać punkt końcowy dostarczony przez Formspree do formularza kontaktowego w kodzie Twojej witryny.

1. Dodaj punkt końcowy do atrybutu „akcja” formularza. Spowoduje to, że przeglądarka użytkownika wyśle ​​formularz pod ten adres URL, gdy go prześle.

   <forma akcja="https://formspree.io/f/xjvlaqpe" metoda="POCZTA">
   <!-- Twój formularz tutaj -->
   <typ przycisku="Zatwierdź" klasa="przycisk"> Składać </button>
   </form>

2. Dodaj dane wejściowe do formularza. Możesz użyć tego przykładowego formularza, który używa framework Bootstrap CSS:

   <forma akcja="https://formspree.io/f/mbjqjrdl" klasa="dodatkowa wyściółka" metoda="POCZTA">
   <klasa div="grupa-form">
   <etykieta dla="odpowiedź do"> Twój adres email </label>
   <typ wejścia="e-mail" klasa="kontrola form" id="odpowiedź do" nazwa="_odpowiedź do" ngModel="Odpowiadać" aria-opisana przez="e-mailPomoc" symbol zastępczy="[email protected]">
   <mały id="e-mailPomoc" klasa="tekst-formularz tekst-wyciszony"> Twój e-mail nie zostanie udostępniony nikomu innemu. </small>
   </div>
   <klasa div="grupa-form">
   <etykieta dla="wiadomość"> Twoja wiadomość </label>
   <nazwa obszaru tekstowego="wiadomość" styl="wysokość: 200px" klasa="kontrola form" id="wiadomość" symbol zastępczy="No hej! I'Kontaktuję się z Tobą, ponieważ..."></textarea>
   </div>
   <typ przycisku="Zatwierdź" klasa="przycisk"> Składać </button>
   </form>
   

Aby sprawdzić, czy Formspree działa, wyślij do siebie wiadomość za pomocą formularza kontaktowego, naciśnij Składaći sprawdź skrzynkę odbiorczą poczty e-mail.

1. Uruchom swoją witrynę i otwórz stronę z formularzem kontaktowym. Wpisz wiadomość do formularza kontaktowego i naciśnij Składać.
2. Otrzymasz wiadomość z formularza kontaktowego na swoją skrzynkę odbiorczą.
3. Jeśli wrócisz do Formspree, kliknij Zgłoszenia patka. Tutaj będziesz również mógł zobaczyć przesłane wiadomości z formularza kontaktowego.

Formspree to jedna z wielu usług, których możesz użyć do zintegrowania niestandardowego formularza kontaktowego ze swoją witryną. Pozwala szybko zacząć akceptować opinie użytkowników bez martwienia się o szczegóły zaplecza.

Jeśli nie masz doświadczenia w tworzeniu formularzy za pomocą HTML i JavaScript, możesz również dowiedzieć się więcej o walidacji formularzy po stronie klienta. Pomaga to zapewnić, że formularze kontaktowe mogą zweryfikować wszystkie dane wprowadzone przez użytkownika.

O autorze

Sharlene von Drehnen (9 opublikowanych artykułów)

Sharlene jest pisarzem technicznym w MUO, a także pracuje na pełny etat w tworzeniu oprogramowania. Posiada tytuł Bachelor of IT oraz wcześniejsze doświadczenie w zapewnianiu jakości i udzielaniu korepetycji uniwersyteckich. Sharlene uwielbia grać i grać na pianinie.

Więcej od Sharlene Von Drehnen