Ни на одном сайте нет формы «свяжитесь с нами». Как лучше всего это сделать?
Недавно я создал свой собственный сайт, так как хотел делать то, что невозможно в Medium, например, добавлять скетчи p5.js. После недолгих раздумий я остановился на статичном сайте Jekyll на GitHub pages. Статические сайты не имеют внутренней логики; они не могут сохранить данные пользователя в форме и отправить мне. Однако ни один личный сайт не обходится без формы Контакты (уж точно не хотелось выкладывать свою почту для всех роботов в спам!).
Первое, что я попробовал, это использовать Google Forms и внедрить их на свой сайт. Это сработало отлично, но… это было уродливо. Формы Google не позволяют вам так много настраивать, и результат противоречил моему сайту. Поскольку форма встроена с помощью iFrame, ее сложно стилизовать с помощью CSS (из-за CORS).
Я подумал, что должны быть другие поставщики конечных точек, и их действительно множество. У большинства есть бесплатный вариант с ограничениями, вам просто нужно выбрать, с какими ограничениями вы можете жить :)
Попробовав несколько разных провайдеров, я выбрал Web3Forms по следующим основным причинам:
- У них есть настраиваемое перенаправление после отправки. Большинству провайдеров для этого требуется платная учетная запись, поэтому люди, которые заполняют вашу контактную форму, перенаправляются с вашего сайта на общую страницу «Спасибо». Нет, спасибо.
- Бесплатная интеграция hCaptcha, которая значительно снижает спам.
- Потрясающие документы и поддержка. Они прислали электронное письмо после того, как я присоединился, они быстро ответили на вопросы и даже предлагают дополнительные бесплатные материалы в месяц (помимо других вариантов, я могу написать о них сообщение в блоге 😉)
Итак, как это делается? Легкий :)
- В Web3Forms нажмите создать ключ доступа. Заполните свой адрес электронной почты. Вы получите ключ доступа по электронной почте.
- Создайте форму HTML (и, возможно, JavaScript) на своем сайте. Они приводят многочисленные примеры или создают свои. Мой приведен ниже, основанный на их примере JavaScript. Поскольку я хотел показать пользователям сообщение после отправки формы, я не мог оставаться только на чистом HTML. Вы можете увидеть этот код и полный код моего сайта в GitHub.
<!--contact-us.html--> <!--Bootstrap so it looks nice--> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <!--This is for hCaptcha--> <script src="https://web3forms.com/client/script.js" async defer></script> <!--This is for showing the response--> <script type="text/javascript" src="/js/contact-us.js"></script> <!--This is the form--> <div style="width:60%; margin:auto;"> <form id="contact-form" method="POST"> <!--Don't forget to put your access key!--> <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" /> <input type="hidden" name="subject" value="new submission in contact" /> <!--Name--> <div class="mb-3"> <label for="nameInput" class="form-label">Name</label> <input type="text" name="name" class="form-control" id="nameInput" placeholder="my name" required> </div> <!--Email--> <div class="mb-3"> <label for="emailInput" class="form-label">Email address</label> <input type="email" name="email" class="form-control" id="emailInput" placeholder="[email protected]" required> </div> <!--Message--> <div class="mb-3"> <label for="messageInput" class="form-label">Message</label> <textarea class="form-control" name="message" id="messageInput" rows="3" required></textarea> </div> <!--hCaptcha--> <div class="h-captcha" data-captcha="true"></div> <div class="mb-3" style="margin-top:10px"> <button type="submit" class="btn btn-danielle">Submit</button> </div> <!--Response--> <div id="form-result"></div> </form> <!--Kudos to Web3Forms--> <div>Powered by <a href="https://web3forms.com/">Web3Forms</a></div> </div>
Сначала я импортирую бутстрап, чтобы он выглядел хорошо. Затем я импортирую скрипт hCaptcha из Web3Forms. Затем я создаю свою HTML-форму. Я также добавил ссылку на Web3Forms, потому что они потрясающие (я не получаю за это дополнительных заявок, но мне нравится отдавать должное).
Вот мой файл JavaScript, чтобы показать пользователям ответ:
//contact-us.js
$( document ).ready(function() {
const form = document.getElementById('contact-form');
const result = document.getElementById('form-result');
//on submit, POST to web3Forms and get response
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(form);
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
result.innerHTML = "Please wait..."
//fetch result
fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: json
})
.then(async (response) => {//show response
let json = await response.json();
console.log(json);
if (response.status == 200) {
result.innerHTML = json.message;
result.classList.add("notice--success");
} else {
console.log(response);
result.innerHTML = json.message;
result.classList.add("notice--warning");
}
})
.catch(error => {//show error
console.log(error);
result.innerHTML = "Something went wrong!";
result.classList.add("notice--danger");
})
.then(function() {//reset form
form.reset();
//make response dissapear after 3 seconds if you wish
setTimeout(() => {
result.style.display = "none";
}, 3000);
});
});
});
Вот и все! Ваша форма активирована. Вы можете использовать другие варианты защиты от спама, но для того, чтобы включить hCaptcha, вам нужно написать их на [email protected] (по крайней мере, это было необходимо, когда я присоединялся, возможно, он уже вышел из бета-версии к настоящему времени).
Вы можете увидеть живую форму в моей Контактной странице. Не стесняйтесь сказать привет и дайте мне знать, что вы думаете.
