소개
주요기능
스킨기능
알림기능
분류기능
편집기기능
데모보기
메뉴관리
페이지관리
팝업창관리
배너관리
지도관리
이웃관리
게시판관리
사진관리
폼메일관리
접속통계관리
설문조사관리
댓글관리
QR코드관리
사용자
관리자
회원관리
PC용 웹메신저
모바일용 웹메신저
메신저 관리
관리자관리
초기환경설정
계정초기화
솔루션초기화
스킨만들기
홈페이지 만들기
게시판 만들기
사진앨범 만들기
폼메일 만들기
팝업/배너 만들기
회원관리하기
관리자 설정하기
HOME > 호스팅 > 아사프로2.0 > 만들기 > 스킨만들기 > 폼메일스킨
 
공통제작 방법게시판스킨사진관리스킨폼메일스킨설문조사스킨안내페이지스킨
관리자스킨관리자로그인스킨웹메일로그인스킨회원스킨일정관리스킨접속통계스킨
폼메일은 웹페이지에서 정해진 항목에 맞게 입력한 정보를 메일로 발송하는 기능입니다.
기본적으로 제공하는 1:1문의, 구인구직, 상품문의 스킨을 이용하여 홈페이지를 구성할 수 있습니다.
아사프로 폼메일은 기본으로 제공하는 형식 외에 사용자가 스킨을 제작하여 추가할 수 있습니다. 스킨은 1페이지를 제작하여 추가하면 됩니다.
1. 디자인하기
새로운 스킨을 제작하기 위해 샘플 파일을 다운로드 받습니다.
다운로드 받은 파일을 원하는 디자인으로 수정합니다.
스킨 샘플은 스킨이미지목록페이지에서 다운로드 받을 수 있습니다.
2. HTML 코딩하기
디자인한 파일에서 이미지를 잘라내고 코딩합니다.
편집기와 스팸방지코드는 모듈 및 라이브러리로 제공해 주는 기능이므로 따로 코딩하지 않아도 됩니다.
폼메일 스킨은 자바스크립트와 HTML로 2부분으로 나뉘어 있습니다.
(1) 자바스크립트
자바스크립트는 입력하기 버튼을 눌렀을 때 필수항목을 입력했는지 체크하는 기능과 편집기용 자바스크립트를 처리하는 부분이 있습니다.
<style type="text/css">
.mailForm_bgLeft{
    background-color:#EBEDFA;
}
.mailForm_rightTd{
    padding-left:5px;
}
.mailForm_txt1{
    border: 1px solid #D4D0C8;
}
body,td,th {
font-size: 12px;
}
</style>
<script language="javascript">
<!--
function check_formmailWriteForm (form){
    if (!form.name.value){
        alert('성명을 입력해 주세요.');
        form.name.focus();
        return false;
    }
    else if (!form.email.value){
        alert('이메일을 입력해 주세요.');
        form.email.focus();
    return false;
    }
    else if (!form.title.value){
        alert('제목을 입력해 주세요.');
        form.title.focus();
        return false;
    }
    else if (!form.imagecode.value){
        alert('이미지에 나온 숫자나 문자를 입력해 주세요.');
        form.imagecode.focus();
        return false;
    }
    else if (form.imagecode.value!=form.check_imagecode.value){
    alert('스팸방지 코드가 맞지 않습니다.');
        form.imagecode.value='';
    form.imagecode.focus();
    return false;
    }
    window.contentsEditor.contentSameCheck();     //편집기 라이브러리에서 사용
    return true;
}
//-->
</script>
(2) HTML
HTML 태그 부분은 전체 디자인을 관리하는 부분입니다. HTML을 작성할 때는 <table> 태그부터 시작하고 폼에 필요한 태그들을 넣고 </table>태그를 닫습니다.
아래 붉게 처리한 소스는 폼메일에서 사용하는 메소드이므로 반드시 입력해야 합니다.
<table width="682" border="0" cellpadding="0" cellspacing="0" align="center"><tr>
    <td><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/top_bg01.gif" border="0"></td></tr>
<tr>
    <td>
        <table width="682" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td bgcolor="#f3f3f3" width="3"></td>
            <td bgcolor="#e4e4e4" width="1"></td>
            <td>
                <form name="formmailWriteForm" action="{formmail_formAction}" method="post" 
                enctype="multipart/form-data" onsubmit="return check_formmailWriteForm(this)" style="margin:0 0 0 0;">

                {input_type_hidden}
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td rowspan="20" width="28"></td>
                    <td colspan="2" height="5"></td>
                    <td rowspan="20" width="25"></td></tr>
                <tr>
                    <td width="90" height="35" style="padding-left:15px;color:#7a7a7a;font-size:12px;">성  명</td>
                    <td width="531"><input type="text" name="name" size="18" maxlength="30" class="mailForm_txt1"></td></tr>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td height="35" style="padding-left:15px;color:#7a7a7a;font-size:12px;">이 메 일</td>
                    <td><input type="text" name="email" size="35" maxlength="50" class="mailForm_txt1"></td></tr>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td height="35" style="padding-left:15px;color:#7a7a7a;font-size:12px;">제 목</td>
                    <td><input type="text" name="title" size="50" maxlength="200" class="mailForm_txt1"></td></tr>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td height="35" style="padding-left:15px;color:#7a7a7a;font-size:12px;">글쓰기 형식</td>
                    <td>{formmail_contentType}</td></tr>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td height="35"  colspan="2" style="padding-left:15px;color:#7a7a7a;font-size:12px;">내 용</td>
                <tr>
                    <td height="303"  colspan="2" valign="top">{formmail_content}</td>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td height="35" style="padding-left:15px;color:#7a7a7a;font-size:12px;">첨부파일</td>
                    <td>{formmail_file}</td></tr>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td height="35" style="padding-left:15px;color:#7a7a7a;font-size:12px;">{spamValidate}</td>
                    <td><input type="text" name="imagecode" size="8" class="mailForm_txt1" maxlength="5">
                    <div style="font-size:11px; color:#AFAFAF;margin-left:3px;display:inline">(스팸글 방지를 위하여 이미지에 나온 숫자나 문자를 입
                      력해 주세요.)</div></td></tr>
                <tr>
                    <td colspan="2"><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bg_01.gif" border="0"></td></tr>
                <tr>
                    <td colspan="4" height="50" align="center" valign="bottom">
                        <input type="image" src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bnt_submit.gif" border="0" />
                        <a href="javascript:;" onclick="formmailWriteForm.reset();">
                        <img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/bnt_reset.gif" style="margin-left:20px;" 
                        border="0"></a></td></tr>
                </table>
                </form>
            </td>
            <td bgcolor="#e4e4e4" width="1"></td>
            <td bgcolor="#f3f3f3" width="3"></td></tr>
        </table>
    </td></tr>
<tr>
    <td><img src="/~AsaProgram/module/formmail/image/template/utf8_ko/question/buttom_bg01.gif" border="0"></td></tr>
</table>
3. 스킨 적용하기
(1) 사용할 수 있는 메소드
번호 메소드 설명
1 {formmail_formAction} 메일 발송 파일의 경로를 자동으로 입력해 줍니다.
2 {input_type_hidden} 숨김형태로 전송하는 정보입니다.
3 {formmail_contentType} 글쓰기 형태를 선택할 수 있게 해주는 radio 버튼입니다.
4 {formmail_content} 편집기 기능이 출력됩니다.
5 {formmail_file} 파일업로드 기능이 출력됩니다.
6 {spamValidate} 스팸방지 이미지가 노출됩니다.
(2) 사용자 정의 필드 추가하기
기본 제공 폼메일에 추가로 입력받고 싶은 필드를 추가하려면 HTML에서 추가하면 됩니다.
① HTML 소스 수정
사용자 정의 필드를 추가하기 위하여 샘플 파일을 수정합니다. 먼저 이미지와 backgound 이미지 경로를 수정합니다.
제품명이라는 사용자 정의 필드를 추가합니다. 사용자 정의 필드로 정의하기 위하여 input box의 이름은 _detail_product_name로 지정합니다.
사용자 정의 필드 타이틀을 지정하는 hidden tag를 추가합니다. value로 지정한 이름은 메일의 제목으로 사용됩니다.
<input type="hidden" name="_detailTitle_product_name" value="제품명">
<style type="text/css">
.mailForm_txt1{
    border: 1px solid #cdcdce;
    height: 19px;
}
body,td,th {
    font-size: 12px;
}
</style>
<script language="javascript">
<!--
function check_formmailWriteForm (form){
    if (!form.name.value){
        alert('성명을 입력해 주세요.');
        form.name.focus();
        return false;
    }
    else if (!(form.email1.value && form.email2.value)){
        alert('이메일을 입력해 주세요.');
        if (!form.email1.value){
            form.email1.focus();
        }
        else{
            form.email2.focus();
        }
        return false;
    }
    else if (!form.title.value){
        alert('제목을 입력해 주세요.');
        form.title.focus();
        return false;
    }
    else if (!form.imagecode.value){
        alert('이미지에 나온 숫자나 문자를 입력해 주세요.');
        form.imagecode.focus();
        return false;
    }
    else if (form.imagecode.value!=form.check_imagecode.value){
        alert('스팸방지 코드가 맞지 않습니다.');
        form.imagecode.value='';
        form.imagecode.focus();
        return false;
    }

    form.email.value=form.email1.value+"@"+form.email2.value;
    form.email1.disabled = true;
    form.email2.disabled = true;
    form.email3.disabled = true;

    window.contentsEditor.contentSameCheck();        //편집기 라이브러리에서 사용
    return true;

}

function changeEmail(form,str){
    if(form.email3.value=='user_write'){
        form.email2.value = '';
        form.email2.focus();
    }
    else{
        form.email2.value = str;
    }
}

//-->
</script>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
    <td>
        <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="105" height="2" bgcolor="#585858"></td>
            <td width="556" bgcolor="#7fa5cc"></td>
        </tr>
        </table>

        <form name="formmailWriteForm" action="{formmail_formAction}" method="post" enctype="multipart/form-data" onsubmit="return check_formmailWriteForm(this)" style="margin:0 0 0 0;">
        {input_type_hidden}
        <input type="hidden" name="email">
        <table border="0" cellpadding="0" cellspacing="0" style="margin:8 0 0 0;">
        <tr>
            <td width="105"><img src="/_asapro2/formmail/skin/user_qna/image/name.gif" border="0"></td>
            <td width="556"><div style="padding:0 0 0 5;"><input type="text" name="name" maxlength="20" class="mailForm_txt1" style="width:370px;"></div></td>
        </tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td colspan="2" height="1" background="/_asapro2/formmail/skin/user_qna/image/bg_line.gif"></td></tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td><img src="/_asapro2/formmail/skin/user_qna/image/email.gif" border="0"></td>
            <td style="padding:0 0 0 5;"><input type="text" name="email1" maxlength="20" class="mailForm_txt1" style="width:104px;"><span style="font-size:10px;color:#656565;margin:0 3 0 3;">@</span><input type="text" name="email2" maxlength="20" class="mailForm_txt1" style="width:104px;"> 
            <select name="email3" style="font-size:11px;color:#656565;width:140px;height:16px;margin:0 0 0 2;" onchange="changeEmail(this.form, this.value);">
                <option value="user_write">직접입력</option>
                <option value="naver.com">naver.com</option>
                <option value="daum.net">daum.net</option>
                <option value="hanmail.net">hanmail.net</option>
                <option value="nate.com">nate.com</option>
                <option value="yahoo.co.kr">yahoo.co.kr</option>
                <option value="paran.com">paran.com</option>
                <option value="empal.com">empal.com</option>
                <option value="hotmail.com">hotmail.com</option>
                <option value="korea.com">korea.com</option>
                <option value="lycos.co.kr">lycos.co.kr</option>
                <option value="dreamwiz.com">dreamwiz.com</option>
                <option value="hanafos.com">hanafos.com</option>
                <option value="chol.com">chol.com</option>
                <option value="gmail.com">gmail.com</option>                <option value="empas.com">empas.com</option>
            </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td colspan="2" height="1" background="/_asapro2/formmail/skin/user_qna/image/bg_line.gif"></td></tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td><img src="/_asapro2/formmail/skin/user_qna/image/subject.gif" border="0"></td>
            <td style="padding:0 0 0 5;"><input type="text" name="title" maxlength="100" class="mailForm_txt1" style="width:370px;"></td>
        </tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td colspan="2" height="1" background="/_asapro2/formmail/skin/user_qna/image/bg_line.gif"></td></tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td><img src="/_asapro2/formmail/skin/user_qna/image/product_name.gif" border="0"></td>
            <td style="padding:0 0 0 5;"><input type="text" name="_detail_product_name" maxlength="100" class="mailForm_txt1" style="width:370px;"><input type=
"hidden" name="_detailTitle_product_name" value="제품명"></td>
        </tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td colspan="2" height="1" background="/_asapro2/formmail/skin/user_qna/image/bg_line.gif"></td></tr>
        <tr>
            <td colspan="2" height="5"></td></tr>

        <tr>
            <td><img src="/_asapro2/formmail/skin/user_qna/image/write_type.gif" border="0"></td>
            <td style="padding:0 0 0 5;">{formmail_contentType}</td>
        </tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td colspan="2" height="1" background="/_asapro2/formmail/skin/user_qna/image/bg_line.gif"></td></tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td colspan="2" height="398" style="padding:5 0 0 0;" valign="top">
                <table width="661" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>{formmail_content}</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="5"></td></tr>
        <tr>
            <td valign="top"><img src="/_asapro2/formmail/skin/user_qna/image/file.gif" border="0"></td>
            <td style="padding:0 0 0 5;">{formmail_file}</td>
        </tr>
        <tr>
            <td colspan="2" height="8"></td></tr>
        <tr>
            <td>
                <table cellspacing="1"nbsp;cellpadding="0" border="0" bgcolor="#c6c6c6">
                <tr>
                    <td bgcolor="#FFFFFF">{spamValidate}</td></tr>
                </table>
            </td>
            <td style="padding:0 0 0 5;"><input type="text" name="imagecode" maxlength="5" class="mailForm_txt1" style="width:148px;"><div style="font-size:12px; color:#AFAFAF;margin-left:3px;display:inline">(스팸글 방지를 위하여 이미지에 나온 숫자나 문자를 입력해 주세요.)</div></td>
        </tr>
        </table>
        <div align="center" style="padding:24 0 0 0;"><input type="submit" value="입력하기"><input type="button" value="취소하기" onclick="formmailWriteForm.reset();" style="margin-left:4px;"></div>
        </form>
    </td>
</tr>
</table>

사이트명 : 코비스 | 회사명 : (주)아사달 | 대표이사 : 서창녕, 심재춘 | 대표전화 : 070-7510-3007 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ kobis.net All rights Reserved.
페이지 맨 위로 이동하기