프리홈 관리자모드에서 contact form 7 상담폼 만들기

사이트를 운영하다 보면 고객상담..등의 문의를 받기 위해서 폼메일을 만들어야 하는 경우가 많이 있습니다.

상담 폼을 만들기 위해서는 프리홈 관리자 메뉴에서  “컨택트폼” 메뉴를 이용해서 제작할 수 있습니다. 아래의 예제를 통해서 여러분이 만들고 싶은 상담폼을 얼마든지 손쉽게 만드실 수 있습니다.

contact-4
contact-1

“콘텍트폼” 메뉴를 클릭하면 나오는 화면입니다.

contact form7은 다양한 폼형식을 만들어주는 플러그인으로 프리홈에 기본 탑재되어있습니다. 콘택트 폼의 기본적이 이용방법은 프리홈 온라인 이용가이드를 참고하시고 여기서는 응용단계로 많이 사용될만한 레이아웃을 어떻게 만드는지에 대해서 알아보겠습니다.

콘택트폼 이용가이드 바로가기

contact-2

콘택트폼 플러그인 페이지 상단의 “새로추가” 버튼을 클릭하여 아래의 코드를 입력합니다. 원하시는 해당영역의 텍스트를 수정하셔서 콘택트폼 폼코드를 작성하는 영역에 붙여넣기 하시면 됩니다.

———————————    소스코드  시작  ———————————————-

<div class=”wpb_column vc_column_container vc_col-sm-12″><div class=”wpb_wrapper”><div class=”vc_row wpb_row vc_inner wf-container” style=”min-height: 0px;”><div class=”wpb_column vc_column_container vc_col-sm-6″><div class=”wpb_wrapper”>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>이름 [text* your-name]</p>

</div>
</div>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>핸드폰 [tel your-tel]</p>

</div>
</div>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>이메일 [email* your-email]</p>

</div>
</div> </div></div><div class=”wpb_column vc_column_container vc_col-sm-6″><div class=”wpb_wrapper”>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<textarea name=”33″ cols=”30″ rows=”6″>
1. 개인정보의 수집 및 이용 목적
– 입사전형 진행, 입사지원서 수정, 자격요건의 확인, 합격여부 확인, 지원자와의 원활한 의사소통 경로 확보
2. 수집하는 개인정보의 항목
– 필수정보 : 성명, 입사 지원 수정용 비밀번호, 이메일 주소, 생년월일, 성별, 전화번호(유/무선), 사진, 국적, 출신학교, 학력, 전공, 경력사항(경력직), 병역 사항 (미필의 경우 미필 사유), 보훈 사항(보훈 대상의 경우 보훈번호 포함)
– 선택정보 : 경력사항(신입), 자격사항, 수상내역, 어학사항
3. 개인정보의 보유 및 이용기간
– 입사지원자의 개인정보는 회사의 인력풀에 저장되어 채용이 필요한 경우 해당 인력풀에서 상시채용을 위하여 이용됩니다.
– 다만, 입사지원자가 개인정보의 삭제를 원하는 경우 지체 없이 해당 정보를 삭제합니다.
4. 동의를 거부할 권리 및 동의 거부에 따른 불이익
– 지원자는 개인정보의 수집, 이용 등과 관련한 위 사항에 대하여 원하지 않는 경우 동의를 거부할 수 있습니다.
– 다만, 수집하는 개인정보의 항목에서 필수정보에 대한 수집 및 이용에 대하여 동의하지 않는 경우는 채용전형에 제한이 있을 수 있습니다.
</textarea>
<p></p>
[checkbox* checkbox-agree1 id:agree2 class:agree2 “개인정보 수집 및 이용에 동의합니다 .”]

</div>
</div> </div></div></div><div class=”ult-spacer spacer-5632dd6f234ff” data-id=”5632dd6f234ff” data-height=”10″ data-height-mobile=”10″ data-height-tab=”10″ data-height-tab-portrait=”” data-height-mobile-landscape=”” style=”clear:both;display:block;”></div><div class=”hr-thin style-line” style=”width: 100%;”></div><div class=”ult-spacer spacer-5632dd6f235a7″ data-id=”5632dd6f235a7″ data-height=”10″ data-height-mobile=”10″ data-height-tab=”10″ data-height-tab-portrait=”” data-height-mobile-landscape=”” style=”clear:both;display:block;”></div><div class=”vc_row wpb_row vc_inner wf-container” style=”min-height: 0px;”><div class=”wpb_column vc_column_container vc_col-sm-6″><div class=”wpb_wrapper”>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>상담을 원하시는 지점을 선택하세요..</p>

</div>
</div> </div></div><div class=”wpb_column vc_column_container vc_col-sm-6″><div class=”wpb_wrapper”>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>[select store “강남점” “역삼점” “삼성점”]</p>

</div>
</div> </div></div></div><div class=”ult-spacer spacer-5632dd6f249be” data-id=”5632dd6f249be” data-height=”10″ data-height-mobile=”10″ data-height-tab=”10″ data-height-tab-portrait=”” data-height-mobile-landscape=”” style=”clear:both;display:block;”></div><div class=”hr-thin style-line” style=”width: 100%;”></div><div class=”ult-spacer spacer-5632dd6f24a62″ data-id=”5632dd6f24a62″ data-height=”10″ data-height-mobile=”10″ data-height-tab=”10″ data-height-tab-portrait=”” data-height-mobile-landscape=”” style=”clear:both;display:block;”></div><div class=”vc_row wpb_row vc_inner wf-container” style=”min-height: 0px;”><div class=”wpb_column vc_column_container vc_col-sm-12″><div class=”wpb_wrapper”>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>전화상담을 희망합니까?</p>

</div>
</div>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>
[radio radio-tel “전화상담을 희망합니다.” “e-mail 답변만 원합니다.”]</p>

</div>
</div> </div></div></div><div class=”ult-spacer spacer-5632dd6f25912″ data-id=”5632dd6f25912″ data-height=”10″ data-height-mobile=”10″ data-height-tab=”10″ data-height-tab-portrait=”” data-height-mobile-landscape=”” style=”clear:both;display:block;”></div><div class=”hr-thin style-line” style=”width: 100%;”></div><div class=”ult-spacer spacer-5632dd6f259b2″ data-id=”5632dd6f259b2″ data-height=”10″ data-height-mobile=”10″ data-height-tab=”10″ data-height-tab-portrait=”” data-height-mobile-landscape=”” style=”clear:both;display:block;”></div>
<div class=”wpb_text_column wpb_content_element “>
<div class=”wpb_wrapper”>
<p>문의하고자 하는 내용을 적어주세요</p>
<p> [textarea your-message]</p>
<p>[submit “상담하기”]</p>

</div>
</div> </div></div>

———————————    소스코드  끝  ———————————————-

contact-3

모든 콘택트폼 수정작업이 완료되었으면 위의 이미지에 보이는 폼 숏코드를 원하는 페이지 위치에 삽입하면 됩니다.

삽입하는 방법은 프리홈 콘택트폼 이용가이드를 참고하세요!

콘택트폼 이용가이드 바로가기

 

contact-5

메일 탭을 클릭하셔서 이미지와 같이 세팅합니다.

고객이 상담폼을 통해 작성한 내용을 관리자가 받게 되는 메일 폼입니다.

이부분을 세팅하지 않으면 고객이 작성한 상담문의 내용이 전달되지 않습니다.

메시지 탭은 상담폼 작성시 전달되는 메시지 입니다. 원하시는 메시지를 작성해두시면 됩니다.

contact-4

위의 소스코드가 잘 적용되었다면 보이는 이미지와 같은 멋진 상담폼 디자인레이아웃이 나오게 됩니다.