이메일을 보내는 HTML 양식을 만드는 방법

사이트에 양식을 설정했는데 제출된 항목을 확인하는 것을 잊은 적이 있습니까? 제출 후 이메일을 보내는 HTML 양식을 만드는 것은 이 문제를 해결하는 가장 간단하고 효과적인 방법 중 하나입니다.

여기에서는 양식이 수신되었는지 확인하기 위해 귀하와 고객에게 이메일을 보내는 양식을 만드는 방법을 안내해 드리겠습니다.

이상적으로는 브라우저에서 양식 제출을 이메일 주소로 직접 라우팅할 수 있습니다. 그러나 HTML 웹 양식에서 직접 이메일을 보내면 방문자의 이메일 주소가 노출되어 사용자가 피싱과 같은 악의적인 활동에 취약해지기 때문입니다.

mailto: address를 양식에 추가하면 이 문제를 피할 수 있는 잠재적인 방법이 될 수 있습니다. 이 옵션은 사용자의 컴퓨터에서 기본 메일 클라이언트를 활성화하여 이메일을 통해 양식을 보내라는 메시지를 표시합니다. 웹 브라우저는 지정된 주소가 아닌 이메일 서비스 공급자에게 요청을 보냅니다.

mailto: 옵션에는 몇 가지 문제가 있습니다. 예를 들어 모든 브라우저와 100% 호환되지 않고 사용자 친화적이지 않으며 브라우저에서 양식을 보낼 때 데이터 형식을 제어하는 ​​것이 불가능합니다.

그 외에도 사용자가 양식을 제출할 때 경고 메시지가 나타나 전송하려는 정보가 개인 정보 보호를 위해 암호화되지 않음을 알려줍니다.

아래에서는 새 항목이 제출될 때 이메일로 보내는 HTML 양식을 만드는 몇 가지 옵션에 대해 설명합니다.

선택하는 옵션은 작업 방식과 사용 중인 플랫폼에 따라 다릅니다. 이것은 계획이 HTML과 다른 스크립트를 혼합하여 사용하는 것이라면 상황이 조금 다르다는 것을 의미합니다. 아래에서는 사용 가능한 다양한 옵션을 살펴봅니다.

방법 1: HTML을 사용하여 이메일 보내기 양식 만들기(권장하지 않음)

HTML만 사용하시겠습니까? 처음부터 사용할 샘플 코드는 다음과 같습니다.

CodePen의 HubSpot(@hubspot)에서 이메일을 보내는 HTML 양식을 만드는 방법 펜을 참조하십시오.

이 코드는 연락처의 이름, 메시지를 요청하고 제출 버튼을 포함하는 양식을 생성합니다(CodePen에는 표시되지 않음). 이 코드는 기본적입니다. 멋지게 보이지는 않습니다. 더 아름다운 것을 위해 필요에 맞는 코드를 몇 줄 더 추가해야 합니다.

기본 HTML만 사용할 수 있지만 이상적인 옵션은 아닙니다. 이 양식은 이메일 주소로 직접 보내지 않고 이메일 클라이언트나 도구 창을 열어 양식을 제출합니다. 이것은 사용자가 양식을 제출하는 것을 겁먹게 할 수 있습니다.

그렇다면 양식 제출을 이메일 주소로 직접 보낼 수 있는 HTML 코드는 무엇입니까?

양식을 이메일 서버와 함께 사용하고 사서함으로 보내려면 PHP가 답입니다. 이제 해당 옵션을 살펴보겠습니다.

방법 2: PHP를 사용하여 이메일 보내기 양식 만들기(고급)

가입자가 연락할 수 있는 양식을 만들려면 PHP 스크립트가 가장 친한 친구가 될 것입니다. 다른 약어입니다. 이것은 Hypertext Preprocessor의 약자이며 이 언어는 HTML과 협력하여 양식을 처리합니다.

프로세스를 시작하기 전에 몇 가지 기본 양식을 분석해 보겠습니다.

웹 양식에는 방문자가 브라우저에서 볼 수 있는 프런트 엔드와 서버에서 실행되는 백엔드 스크립트의 두 가지 측면이 있습니다.

방문자의 웹 브라우저는 HTML 코드를 사용하여 양식을 표시합니다. 양식이 제출되면 브라우저는 양식 태그의 "action" 속성에 언급된 링크를 사용하여 정보를 백엔드로 보내고 양식 데이터를 해당 URL로 보냅니다.

예: <form action=https://yourwebsite.com/myform-processor.php> .

그런 다음 서버는 작업 URL(이 경우 myform-processor.php)에 지정된 스크립트에 데이터를 전달합니다. 이 데이터를 사용하여 백엔드 스크립트는 양식 제출 데이터베이스를 만들고 사용자를 다른 페이지(예: 지불)로 안내하고 이메일을 보낼 수 있습니다.

Ruby, Perl 또는 Windows용 ASP와 같이 백엔드 프로그래밍에서 사용할 수 있는 다른 스크립팅 언어가 있습니다. 그러나 PHP는 가장 대중적이며 거의 모든 웹 호스팅 서비스 제공업체에서 사용합니다.

양식을 처음부터 만드는 경우 수행할 수 있는 단계는 다음과 같습니다.

1단계: PHP를 사용하여 페이지를 만듭니다.

이 단계에서는 호스팅 플랫폼에서 웹사이트의 cPanel에 액세스할 수 있어야 합니다.

웹페이지를 만들 때 ".html" 확장자를 사용하는 대신 ".php"를 입력하세요. 이것은 이미지를 "jpg"와 "png"로 저장할 때 발생하는 것과 유사합니다.

이렇게 함으로써 서버는 당신이 작성한 PHP를 호스팅한다는 것을 알게 될 것입니다. 빈 HTML 페이지를 그대로 저장하는 대신 "subscriberform.php"와 같이 저장합니다. 페이지를 만들고 저장한 후 양식을 만들 수 있습니다.

2단계: 코드를 사용하여 양식을 만듭니다.

이 단계에서는 양식을 만드는 코드를 작성합니다.

HTML로 양식을 만드는 방법을 잘 모르겠다면 HTML Dog의 리소스에서 기본에 대한 입문서를 확인하세요.

다음 코드는 기본 양식에 필요한 것입니다.

<form method="post" action="subscriberform.php">
		


<텍스트 영역 이름="메시지"></텍스트 영역>
<입력 유형="제출">
</form>

이것은 HTML 전용 작성과 유사하기 때문에 이 줄은 양식의 이름과 구독자가 사용자 정의 메시지를 입력하고 이를 보낼 수 있는 영역도 생성합니다.

중요한 차이점은 action=”subscriberform.php” 부분입니다. 코드의 이 부분은 제출될 때 페이지에서 양식을 보내도록 합니다. 첫 번째 예에서 그것은 옵션이 아니었음을 기억하십시오.

3단계: 양식에서 이메일을 보내도록 합니다.

양식을 만들고 디자인 기본 설정에 따라 적절한 수정 사항을 모두 추가한 후에는 전자 메일 부분을 만들 차례입니다.

이를 위해 페이지의 시작 부분(HTML Doctype을 정의하기 전에도 맨 처음)으로 스크롤합니다. 이메일로 데이터를 보내려면 데이터를 처리할 코드를 추가해야 합니다. 이 코드를 복사하거나 비슷한 코드를 만드세요.

<?php
if($_POST["메시지"])
mail("[이메일 보호]", "제목은 다음과 같습니다.",
$_POST["여기에 메시지를 삽입하세요."]. "보낸 사람: [이메일 보호됨]");

?>

첫 번째 줄과 마지막 줄에 있는 모든 내용은 이러한 기능이 PHP로 수행되도록 웹페이지에 지시합니다. 이 코드는 또한 구독자가 양식을 사용하는지 확인합니다. 거기에서 양식이 전송되었는지 확인합니다.

더 세분화하면 "mail"은 완성된 양식을 "[email protected]"에 이메일로 보내고 제목은 다음과 같습니다. 다음 줄에서 따옴표 안에 이메일 메시지 사본을 작성하여 선택한 이메일 주소에서 보낼 수 있습니다.

양식이 제출되면 페이지는 데이터를 자체적으로 보냅니다. 데이터가 성공적으로 전송되면 페이지에서 이메일로 전송합니다. 그런 다음 브라우저는 페이지의 HTML(포함된 양식)을 로드합니다.

이를 통해 양식을 만드는 데 필요한 기본 코드가 있습니다.

이것은 이 작업을 수행하는 한 가지 방법일 뿐입니다. 또는 빌더를 사용하여 양식을 만든 다음 웹사이트에 포함할 수도 있습니다.

방법 3: 양식 작성기를 사용하여 전자 메일 보내기 양식 만들기

WordPress를 사용하여 웹사이트를 구축하지 않고 코딩에 익숙하지 않은 경우, 특히 CMS가 끌어서 놓기 페이지 편집기를 제공하지 않는 경우 양식을 만드는 방법을 몰라 헤매게 될 수 있습니다.

(인기 팁: 끌어서 놓기 편집기를 사용하면 이메일 전송 양식을 훨씬 쉽고 간단하게 만들 수 있습니다. CMS Hub를 사용해 보세요. 100% 무료입니다.)

아래의 각 도구를 사용하면 코딩 없이 이메일을 보내는 양식을 작성할 수 있습니다. 가장 좋은 점은 원하지 않는 경우 콘텐츠 관리 시스템을 변경할 필요가 없다는 것입니다. 대신 각 도구의 포함 코드를 사용하여 웹사이트에 양식을 포함할 수 있습니다.

1. HubSpot: 전반적으로 최고의 이메일 양식 작성기

HubSpot에는 모든 제품의 프리 티어에 양식 빌더가 포함되어 있습니다. HubSpot에는 이미 귀하의 이메일이 있으므로 새 항목이 제출되면 자동으로 메시지를 보냅니다.

HubSpot의 양식 빌더는 Marketing Hub 및 CMS Hub를 비롯한 플랫폼의 다른 도구와 연결되며 사전 기술 지식이 필요하지 않습니다. 마케팅 기능을 포함하도록 양식을 확장하려는 경우에도 그렇게 할 수 있습니다.

예를 들어 연락처 목록에 연결하는 사용자 지정 양식을 작성할 수 있습니다. 이러한 양식을 사용자 정의하고 양식 완성에 따라 자동 이메일을 트리거할 수도 있습니다. 후자는 프리미엄 업그레이드가 필요합니다.

양식 제출 후 이메일을 수신하는 방법을 알아보려면 기술 자료 문서를 참조하십시오.

2. Forms.io: 최고의 빠른 이메일 양식 작성기

Forms.io를 사용하면 끌어서 놓기 인터페이스에서 양식을 빠르게 만든 다음 HTML 포함 코드를 사용하여 사이트에 포함할 수 있습니다. 경고 또는 알림을 받은 다음 도구의 백엔드에서 응답을 관리할 수 있습니다. 10명의 사용자에게는 무료이지만 회사에 더 많은 시트가 필요한 경우 월 $14.99에 액세스할 수 있습니다.

3. Jotform: 여러 양식을 위한 빌더를 위한 최고의 이메일

하나 이상의 양식이 필요할 것으로 예상된다면 Jotform이 탁월한 선택입니다. JavaScript, iFrame 또는 양식의 전체 소스 코드와 같이 웹사이트에 양식을 포함할 수 있는 몇 가지 옵션을 제공합니다. 라이트박스나 팝업 양식을 생성할 수도 있습니다.

Jotform은 브랜드와 함께 무료입니다. 가격은 월 $24부터 시작합니다.

여기에서 더 많은 양식 작성 도구를 확인하십시오.

방법 4: 플러그인을 사용하여 이메일 보내기 양식 만들기

WordPress 웹사이트를 운영 중이라면 좋은 소식이 있습니다. 사용할 수 있는 양식 빌더 플러그인이 너무 많으며 대부분이 우수한 무료 비용으로 제공됩니다. 이러한 도구는 모두 제출을 받으면 이메일을 보냅니다.

1. HubSpot 양식 플러그인: 리드 생성에 가장 적합

양식을 리드 생성 도구로 사용할 계획이라면 HubSpot 양식 플러그인을 사용하는 것이 좋습니다. HubSpot 계정에 직접 연결되어 HubSpot CRM, Marketing Hub, Sales Hub 등과 함께 사용할 수 있습니다.

2. WPForms: 어디에나 임베딩하는 데 가장 적합

WPForms는 제출을 받으면 이메일로 보내도록 구성할 수 있는 끌어서 놓기 양식 작성기입니다. 또한 사이드바와 바닥글을 포함하여 사이트의 모든 위치에 양식을 포함할 수 있습니다.

3. ARForms

ARForms를 사용하면 설정한 조건에 따라 이메일 알림을 받을 수 있지만 모든 제출에 대해 이메일 알림을 받을 수도 있습니다. HubSpot, PayPal 및 Google Sheets를 비롯한 기술 스택의 다른 도구와 통합할 수도 있습니다.

이메일을 보내는 HTML 양식의 장점

더 많은 방문자를 리드로 전환하거나, 영업 팀을 위한 정보를 수집하거나, 충성도가 높은 브랜드 지지자를 생성하려는 경우 양식은 인바운드 전략에 필수적입니다. 웹사이트에 양식이 없으면 더 많은 리드, 더 높은 전환율, 더 행복한 장기 고객을 놓칠 수 있습니다.

문제는 응답 확인을 잊어버리기 쉽고, 제출을 받기는 더 쉽지만 검색 가능한 기록이 없다는 것입니다. 이메일을 다시 보내는 양식은 참조 및 용이성을 위해 받은 편지함에 정보를 보관합니다.

편집자 주: 이 게시물은 원래 2019년 12월에 게시되었으며 포괄성을 위해 업데이트되었습니다.