반응형
Formspree는 웹사이트에서 폼 제출을 처리하는 과정을 간소화하는 강력한 서비스입니다. 서버사이드 코드를 작성할 필요 없이 사용자의 데이터를 수집할 수 있도록 도와줍니다. 이는 백엔드 인프라를 유지할 필요 없이 빠르고 효율적인 방법으로 폼 제출을 처리해야 하는 개발자와 비개발자 모두에게 훌륭한 선택입니다. 이 블로그 포스트에서는 Formspree를 소개하고 웹사이트에 이를 활용하는 기본적인 방법을 제공하겠습니다.
Formspree란 무엇인가요?
Formspree는 폼 제출을 쉽게 캡처하고 처리할 수 있는 폼 백엔드 서비스입니다. 각 폼에 고유한 엔드포인트 URL을 제공하며, 사용자가 제출한 데이터를 이 URL로 보낼 수 있습니다. Formspree는 이 데이터를 처리하여 이메일로 전달하거나 검토할 수 있도록 저장합니다.
Formspree의 주요 기능
- 서버사이드 코드 불필요: 서버사이드 코드를 작성하지 않고 폼 제출을 처리할 수 있습니다.
- 이메일 알림: 폼 제출을 직접 받은 편지함으로 받을 수 있습니다.
- 스팸 보호: 내장된 스팸 필터링으로 깨끗한 제출물을 유지합니다.
- 간편한 통합: 기존 HTML 폼과 간단히 통합할 수 있습니다.
- 보안성: HTTPS를 지원하여 데이터가 안전하게 전송됩니다.
Formspree 시작하기
여기에서는 Formspree를 시작하고 웹사이트에 통합하는 단계별 가이드를 제공합니다.
1단계: Formspree 가입
- Formspree.io로 이동합니다.
- "Sign Up" 버튼을 클릭하고 필요한 정보를 제공하여 새 계정을 만듭니다.
2단계: 새 폼 만들기
- 로그인한 후 "New Form"을 클릭합니다.
- 새 폼을 만들기 위한 지침을 따릅니다. 폼 제출을 처리할 고유한 엔드포인트 URL을 받게 됩니다.
3단계: HTML 폼 업데이트
HTML 폼을 Formspree 엔드포인트로 업데이트합니다. 다음은 폼을 수정하는 예시입니다:
HTML 폼 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
.contact-form-style-01 {
max-width: 600px;
margin: auto;
}
.contact-form-style-01 input,
.contact-form-style-01 textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
}
.contact-form-style-01 button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
.success-message,
.error-message {
display: none;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
.success-message {
background-color: #d4edda;
color: #155724;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
}
</style>
</head>
<body>
<form
name="contact-form"
id="contact-form"
action="https://formspree.io/YOUR_FORM_ENDPOINT"
method="POST"
class="contact-form-style-01"
>
<div class="row mt-50">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label class="sr-only" for="subject">제목</label>
<input
type="text"
name="subject"
class="md-input"
id="subject"
placeholder="이메일 제목을 적어 주세요"
required
autocomplete="on"
/>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label class="sr-only" for="email">이메일</label>
<input
type="email"
name="email"
class="md-input"
id="email"
placeholder="이메일을 입력해 주세요"
required
autocomplete="email"
/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label class="sr-only" for="message">메시지를 적어 주세요 *</label>
<textarea
name="message"
class="md-textarea"
id="message"
rows="7"
required
autocomplete="on"
placeholder="작업 내용, 작업 희망 기간 등을 적어 주세요"
></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="text-left">
<button
type="submit"
name="submit"
class="btn btn-color btn-md btn-default btn-animate remove-margin"
>
<span>이메일 보내기<i class="ion-android-arrow-forward"></i></span>
</button>
</div>
</div>
</div>
<div class="success-message">Thank you! Your message has been sent.</div>
<div class="error-message">Oops! There was an error sending your message.</div>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
var form = event.target;
var formData = new FormData(form);
fetch(form.action, {
method: form.method,
body: formData,
headers: {
'Accept': 'application/json'
}
}).then(function(response) {
if (response.ok) {
form.reset();
document.querySelector('.success-message').style.display = 'block';
document.querySelector('.error-message').style.display = 'none';
} else {
response.json().then(function(data) {
if (Object.hasOwn(data, 'errors')) {
document.querySelector('.error-message').innerHTML = data["errors"].map(error => error["message"]).join(", ");
} else {
document.querySelector('.error-message').innerHTML = "Oops! There was a problem submitting your form";
}
document.querySelector('.error-message').style.display = 'block';
document.querySelector('.success-message').style.display = 'none';
})
}
}).catch(function(error) {
document.querySelector('.error-message').innerHTML = "Oops! There was a problem submitting your form";
document.querySelector('.error-message').style.display = 'block';
document.querySelector('.success-message').style.display = 'none';
});
});
</script>
</body>
</html>4단계: 폼 테스트
- 브라우저에서 웹사이트를 엽니다.
- 폼을 작성하고 제출합니다.
- 제출이 잘 수신되었는지 이메일을 확인합니다.
- 제출 결과에 따라 성공 및 오류 메시지가 올바르게 표시되는지 확인합니다.
추가 기능
- 스팸 보호: Formspree는 내장된 스팸 보호 기능을 제공합니다. 보안을 강화하려면 reCAPTCHA를 활성화하는 것을 고려해보세요.
- 맞춤 리디렉션: 맞춤 리디렉션 URL을 설정하여 제출 후 사용자를 감사 페이지로 안내할 수 있습니다.
- 웹훅 통합: Formspree는 웹훅을 지원하여 폼 제출을 다른 서비스와 통합할 수 있습니다.
결론
Formspree는 서버사이드 코드가 필요 없이 폼 제출을 처리하는 간단하면서도 강력한 솔루션을 제공합니다. 이 블로그 포스트에서 설명한 단계를 따라가면 사용자의 데이터를 안전하고 효율적으로 수집하기 위해 Formspree를 빠르게 설정할 수 있습니다. 이를 통해 백엔드 인프라 걱정 없이 훌륭한 사용자 경험을 만드는 데 집중할 수 있습니다.
반응형