웹사이트에 방문자가 친절하게 문의할 수 있는 공간을 만들고 싶으신가요? 단순히 메일 주소만 덜렁 노출하는 것은 아쉽습니다. 그렇다고 복잡하게 서버를 구성하고 SMTP 설정을 찾아보는 건 너무 머리가 아프죠.

룬샷스튜디오의 홈페이지 리뉴얼 경험을 통해, 누구나 쉽게 웹사이트에 문의 메일 폼을 달고 직접 이메일을 받아볼 수 있는 꿀팁 서비스를 소개합니다!

💡 왜 Formspree인가요? (복잡한 고민 끝!)

저희도 시스템 구축을 고민하다가 발견한 보물 같은 서비스입니다. Formspree(https://formspree.io/)는 백엔드(Backend) 코딩이나 서버 설정 없이 HTML 폼만으로 이메일을 수신할 수 있게 해주는 서비스입니다.

가장 큰 장점은 다음과 같습니다.

• ⚡️ 간편한 설정: 복잡한 PHP, 파이썬, Node.js 같은 서버 언어 없이 HTML/CSS 지식만으로 충분합니다.
• 💰 일일 무료 전송: 개인 프로젝트나 소규모 사이트에 충분한 하루 50개의 메일 전송을 무료로 제공합니다. (유료 플랜도 당연히 있습니다.)
• 🔒 보안 강화: 스팸 방지 기능이 내장되어 있어 안심하고 사용할 수 있습니다.

✅ 적용 예시:

[룬샷스튜디오 Contact 페이지] https://loonshotstudio.com/pages/studio/contact.html이처럼 깔끔하게 완성되었습니다!

🔧 Formspree로 웹사이트 메일 폼 구축하는 3단계

Formspree를 사용해 폼을 연결하는 과정은 매우 간단합니다.

1. Formspree 계정 생성 및 폼 만들기

1. Formspree 사이트에 접속하여 로그인합니다.
2. 대시보드 왼쪽 상단의 + Add New Form 버튼을 클릭하여 새로운 폼을 생성합니다.
3. 폼의 이름과 수신할 이메일 주소를 설정합니다. 이 주소로 방문자들의 문의 메일이 전송됩니다.

2. HTML 폼 코드 복사 및 수정

폼을 생성하면 Formspree에서 제공하는 HTML 코드 스니펫을 받게 됩니다.

가장 중요한 부분은 <form> 태그의 action 속성입니다. 이 고유한 URL이 Formspree 서버로 데이터를 전송하는 역할을 합니다.

HTML

<form action="[Formspree에서 제공한 고유 URL]" method="POST">
    <input type="text" name="name" placeholder="이름을 입력해주세요" required>
    
    <input type="email" name="_replyto" placeholder="답변받을 이메일 주소" required>
    
    <textarea name="message" placeholder="문의 내용을 작성해주세요" required></textarea>
    
    <button type="submit">메일 보내기</button>
</form>

📢 SEO & UX 팁:

• name="_replyto": 이 필드에 입력된 이메일 주소로 바로 답장할 수 있게 해주는 Formspree의 핵심 기능입니다.
• required: 필수 입력 필드에 설정하여 사용성을 높입니다.

3. 웹사이트에 적용하고 테스트!

1. 위에서 수정한 HTML 폼 코드를 여러분의 웹사이트 (contact.html 등)에 붙여넣습니다.
2. 사이트를 업로드하고 폼을 직접 채워 메일 보내기 버튼을 눌러보세요.
3. 설정한 이메일 주소의 받은 편지함과 Formspree 대시보드를 확인하면, 방문자가 보낸 메일이 도착해 있는 것을 볼 수 있습니다!

✨ 세상엔 참 별별 좋은 서비스들이 다 있어!

복잡하게 서버를 구성할 필요 없이, 간단한 HTML 코드만으로 이메일 수신 시스템을 완성했습니다. Formspree 덕분에 #시작이반이다 라는 말을 실감하며 룬샷스튜디오의 홈페이지 리뉴얼을 성공적으로 마무리할 수 있었습니다.

#룬샷스튜디오 는 앞으로도 이런 효율적인 툴과 서비스를 적극적으로 활용해 더 나은 결과물을 만들겠습니다.

모두 Formspree로 간편하게 친절한 웹사이트를 만들어보세요! 감사합니다!