Pięć działających sposobów na odbieranie zgłoszeń z formularzy na stronie w Twojej skrzynce: mailto, usługa endpointów formularzy, Netlify Forms, funkcja serverless z API e-mail oraz Google Apps Script. Z kodem wysyłania w JavaScripcie i ochroną przed spamem.
Strona internetowa sama nie wyśle e-maila. Formularz musi przesłać dane do czegoś, co to potrafi: usługi endpointów formularzy, funkcji formularzy Twojego hostingu, funkcji serverless wywołującej API e-mail, skryptu Google Apps Script lub własnego serwera. Wybierz według tego, ile kontroli potrzebujesz, a potem wysyłaj przez JavaScript, aby odwiedzający zostali na stronie.
Porównanie pięciu metod
Każda metoda poniżej ma kompletny kod. Zacznij od formularza i obsługi wysyłania w JavaScripcie, które działają z każdą metodą, a potem wybierz backend.
Tylko z akcją mailto:, która otwiera własną aplikację pocztową odwiedzającego z wypełnionymi danymi. Nie działa u nikogo, kto nie ma skonfigurowanej aplikacji pocztowej, a to wiele osób na wspólnych lub służbowych komputerach, i nie możesz ostylować ani zweryfikować wyniku. Do wszystkiego, co ważne, użyj jednej z pozostałych metod.
Zwykle dlatego, że wiadomość podaje się za wysłaną z adresu odwiedzającego, albo dlatego, że Twojej domenie brakuje rekordów SPF, DKIM i DMARC dla usługi, która ją wysyła. Wysyłaj z adresu we własnej domenie, ustaw odwiedzającego jako reply-to i dodaj rekordy DNS, które poda Ci dostawca poczty.
To pole ukryte przed ludźmi, ale widoczne dla prostych botów. Ludzie zostawiają je puste, boty je wypełniają. Twój backend odrzuca każde zgłoszenie, w którym ma ono wartość. Zatrzymuje dużo podstawowego spamu, nie przeszkadzając prawdziwym odwiedzającym.
Na początku nie. Zacznij od honeypota i kontroli po stronie serwera, takich jak odrzucanie wiadomości pełnych linków. Wyzwanie dodaj tylko wtedy, gdy spam wciąż napływa, i wybierz takie, które nie każe ludziom rozwiązywać łamigłówek.
Ten front-end działa z każdą metodą. Skrypt wysyła formularz przez fetch, pokazuje komunikat o stanie i zachowuje tekst, jeśli wysyłanie się nie powiedzie.
Etykiety obejmują swoje pola, przeglądarka sprawdza pola wymagane i format e-maila, a linia stanu jest odczytywana przez czytniki ekranu.
Działa z każdym endpointem, który przyjmuje zwykłe przesłanie formularza. Jeśli endpoint oczekuje JSON, wyślij zamiast tego JSON.stringify(Object.fromEntries(data)) z typem zawartości JSON.
Otwiera aplikację pocztową odwiedzającego z polami w treści wiadomości. Nie wymaga serwera, ale nic nie zostanie wysłane, jeśli odwiedzający nie ma aplikacji pocztowej.
Usługi takie jak Formspree, Basin, Getform i Web3Forms dają Ci adres URL, na który wysyłasz dane, i przekazują każde zgłoszenie do Twojej skrzynki. Zarejestruj się, utwórz formularz, wklej jego adres URL do atrybutu action formularza powyżej i zostaw skrypt fetch. Sprawdź aktualne darmowe limity każdej usługi i miejsce, w którym przechowuje dane.
Netlify wykrywa formularz podczas wdrożenia, gdy ma on atrybut data-netlify. Włącz powiadomienia e-mail w ustawieniach formularzy witryny. Dla formularzy renderowanych przez JavaScript zachowaj też zwykłą kopię HTML w zbudowanych plikach, aby Netlify mógł ją znaleźć.
Funkcja odbiera formularz, sprawdza go i wywołuje API e-mail z tajnym kluczem przechowywanym na serwerze. Ten przykład używa REST API Resend; SendGrid, Postmark i Amazon SES działają tak samo, z własnymi endpointami.
Działa na platformach używających webowych obiektów Request i Response. Ustaw RESEND_API_KEY w zmiennych środowiskowych hostingu i najpierw zweryfikuj domenę nadawczą u dostawcy poczty.
Krótki skrypt wdrożony jako aplikacja internetowa z konta Google wysyła każde zgłoszenie e-mailem i może zapisywać je w Arkuszu. Obowiązują dzienne limity e-maili, więc nadaje się do formularzy o małym ruchu.
W nowym projekcie Apps Script wklej ten kod, a następnie wdróż go jako aplikację internetową działającą jako Ty, dostępną dla każdego. Użyj adresu URL aplikacji jako action formularza.
Hosting współdzielony często obsługuje PHP. Wbudowana funkcja mail() działa u wielu dostawców, ale dostarczalność jest lepsza z biblioteką SMTP, taką jak PHPMailer, i prawdziwą skrzynką w Twojej domenie.
Odrzuca żądania inne niż POST, przycina dane wejściowe, nie przyjmuje znaków nowej linii w adresie odpowiedzi (które pozwoliłyby atakującym dodać nagłówki) i przekierowuje na stronę z podziękowaniem.
Zacznij za darmo · Bez karty kredytowej