blogger - 페이지에 문의하기 양식 추가하는 방법

구글 블로거를 사용하면 블로그 하나에 한 개의 “문의하기 양식” 가젯을 사용할 수 있습니다. 문제는 사이드바나 푸터 영역에 가젯을 추가하고 그곳을 통해 문의 메일을 보내야 합니다. 

다행히 아래 그림과 같이 페이지에서 문의 메일을 보낼 수 있는 방법이 있습니다. 약간의 응용을 하면 말이지요.

설정 -> 레이아웃으로 찾아가서 “문의하기 양식”가젯을 추가합니다. 사이드바나 헤더, 푸터 영역 어디든 상관없습니다.

여기서는 문의 양식 구성에서 제목을 "문의하기 양식"이라고 해 두었습니다.

내 블로그로 접속해서 마우스 오른쪽 버튼 한 다음 메뉴 중 “페이지 소스 보기”를 클릭합니다.

"페이지 소스 보기"를 할 수 있는 또 다른 방법은 크롬의 경우 view-source:https://example.com 로 소스 보기 할 수 있습니다. 예를 들어 블로그 주소가 habonyphp.com 이라면 view-source:https://www.habonyphp.com 으로 소스보기 합니다.

우리는 “문의하기 양식”이라는 이름으로 가젯을 만들었기 때문에 오른쪽 상단 점 세 개의 아이콘을 클릭해서 “찾기“를 선택합니다.

입력란에 “문의하기 양식”이라는 문장을 찾아 ContactForm으로 시작하는 id 속성 값을 찾습니다.

여기서는 찾은 문자열의 id 속성 값이 “ContactForm2” 입니다. 문의메일 가젯을 추가하면 ContactForm 끝에 숫자가 붙습니다.

새로운 페이지를 만들어 아래 값을 붙여넣기 하되 “ContactForm2” 값을 찾은 문자열 값으로 모두 바꿔주세요.

<form name="contact-form">
<p>이름<br/>
<input class="contact-form-name" id="ContactForm2_contact-form-name" name="name" size="30" type="text" value="" /></p>

<p>이메일 <span style="font-weight: bolder;color:red;">*</span><br/>
<input class="contact-form-email" id="ContactForm2_contact-form-email" name="email" size="30" type="text" value="" /></p>

<p>내용 <span style="font-weight: bolder;color:red;">*</span><br/>
<textarea class="contact-form-email-message" cols="25" id="ContactForm2_contact-form-email-message" name="email-message" rows="5"></textarea></p>

<p class="contact-form-error-message" id="ContactForm2_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm2_contact-form-success-message"></p>

<p><input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="메일 전송" /></p>
</form>

ContactForm2_contact-form-error-message 은 에러 출력할 때 필요하고 ContactForm2_contact-form-success-message 은 메일을 정상적으로 전송되었을 때 출력되는 부분입니다.

마지막으로 사이드바에 추가한 가젯을 숨겨야 합니다. 

설정 -> 테마 -> HTML 편집으로 들어가서 아래 코드를 삽입합니다. 여기서는 가젯 이름이 ContactForm2이므로 아래 코드를 헤더 부분에 삽입합니다.

<style>#ContactForm2{display:none;}<style>

문의 메일이 전송되는 걸 확인하였으면 폼을 적당히 꾸며 주세요.