contact form게시판 입력필드에 html로 다중셀렉트폼 코드를 넣었는데 메일에 표시되는방법

contact form게시판을 사용하는데 셀렉트폼이 다중셀렉트폼을 사용해야해서

다른 게시글에 있는 https://huskdoll.tistory.com/497 코드를 이용해서 입력필드-확장필드-html 을 사용해 코드를 넣었습니다.

게시판에는 표시가되지만, '메일'과 '관리자 페이지에서 게시판보기' 를 통해 문의 내용을 확인하면 html부분이 오지않습니다.

'메일'과 '관리자 페이지에서 게시판보기' 에 입력필드가 표시되는 방법 부탁드립니다....

 

아래 사진첨부합니다.

<입력필드추가사진>

https://imgur.com/TuhHWRA

<컨텍트폼게시판에 표시된 사진>

https://imgur.com/4TJVUBz

<메일에 표시된 사진>

https://imgur.com/OpxYfRM

 

<html에 사용한 코드내용>

<!--다중필드-->
1depth: <select name="mainCategory" style="width:200px">
        <option value="">전체</option>
    </select>
    2depth: <select name="subCategory" style="width:200px">
        <option value="">전체</option>
    </select>
    
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
 
$(document).ready(function() {
    
    //Main 카테고리를 선택 할때 마다 AJAX를 호출할 수 있지만 DB접속을 매번 해야 하기 때문에 main, sub카테고리 전체을 들고온다.
    
    //****************이부분은 DB로 셋팅하세요.
    //Main 카테고리 셋팅 (DB에서 값을 가져와 셋팅 하세요.)
    var mainCategoryArray = new Array();
    var mainCategoryObject = new Object();
    
    mainCategoryObject = new Object();
    mainCategoryObject.main_category_id = "1";
    mainCategoryObject.main_category_name = "스포츠";
    mainCategoryArray.push(mainCategoryObject);
    
    mainCategoryObject = new Object();
    mainCategoryObject.main_category_id = "2";
    mainCategoryObject.main_category_name = "공연";
    mainCategoryArray.push(mainCategoryObject);
    
    //Sub 카테고리 셋팅 (DB에서 값을 가져와 셋팅 하세요.)
    var subCategoryArray = new Array();
    var subCategoryObject = new Object();
    
    //스포츠에 해당하는 sub category 리스트
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "1";
    subCategoryObject.sub_category_id = "1"
    subCategoryObject.sub_category_name = "야구"    
    subCategoryArray.push(subCategoryObject);
    
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "1";
    subCategoryObject.sub_category_id = "2"
    subCategoryObject.sub_category_name = "농구"    
    subCategoryArray.push(subCategoryObject);
    
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "1";
    subCategoryObject.sub_category_id = "3"
    subCategoryObject.sub_category_name = "축구"    
    subCategoryArray.push(subCategoryObject);
    
    //공연에 해당하는 sub category 리스트
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "2";
    subCategoryObject.sub_category_id = "1"
    subCategoryObject.sub_category_name = "연극"    
    subCategoryArray.push(subCategoryObject);
    
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "2";
    subCategoryObject.sub_category_id = "2"
    subCategoryObject.sub_category_name = "뮤지컬"    
    subCategoryArray.push(subCategoryObject);
    
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "2";
    subCategoryObject.sub_category_id = "3"
    subCategoryObject.sub_category_name = "오페라"    
    subCategoryArray.push(subCategoryObject);
    
    subCategoryObject = new Object();
    subCategoryObject.main_category_id = "2";
    subCategoryObject.sub_category_id = "4"
    subCategoryObject.sub_category_name = "콘서트"    
    subCategoryArray.push(subCategoryObject);
    //****************이부분은 DB로 셋팅하세요.
    
    
    //메인 카테고리 셋팅
    var mainCategorySelectBox = $("select[name='mainCategory']");
    
    for(var i=0;i<mainCategoryArray.length;i++){
        mainCategorySelectBox.append("<option value='"+mainCategoryArray[i].main_category_id+"'>"+mainCategoryArray[i].main_category_name+"</option>");
    }
    
    //*********** 1depth카테고리 선택 후 2depth 생성 START ***********
    $(document).on("change","select[name='mainCategory']",function(){
        
        //두번째 셀렉트 박스를 삭제 시킨다.
        var subCategorySelectBox = $("select[name='subCategory']");
        subCategorySelectBox.children().remove(); //기존 리스트 삭제
        
        //선택한 첫번째 박스의 값을 가져와 일치하는 값을 두번째 셀렉트 박스에 넣는다.
        $("option:selected", this).each(function(){
            var selectValue = $(this).val(); //main category 에서 선택한 값
            subCategorySelectBox.append("<option value=''>전체</option>");
            for(var i=0;i<subCategoryArray.length;i++){
                if(selectValue == subCategoryArray[i].main_category_id){
                    
                    subCategorySelectBox.append("<option value='"+subCategoryArray[i].sub_category_id+"'>"+subCategoryArray[i].sub_category_name+"</option>");
                    
                }
            }
        });
        
    });
    //*********** 1depth카테고리 선택 후 2depth 생성 END ***********
        
});
</script>
<!--다중필드 끝-->

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    말씀하신 메일은 최신글 이메일 알림 기능을 말씀하시는 건지요?

    최신글 이메일 알림과 관리자 페이지에서 게시글 확인 시 입력 필드도 표시하시려면 코드를 수정해주셔야 할 듯합니다.

    추가하신 셀렉트 박스의 name을 kboard_option_메타키 이런 식으로 적용해주셔야

    입력 필드로 저장되고 게시글 본문 페이지에서 확인 가능합니다.

    document.php 파일에서 <?php echo $content->option->메타키?> 이런 식으로 사용하실 수 있습니다.

     

    게시글 본문 페이지를 표시하는 document.php 파일은

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/document.php 파일입니다.

     

    최신글 이메일 알림의 메일 내용은 kboard_latest_alerts_message 필터로 편집 가능합니다.

    kboard_latest_alerts_message 필터는

    /wp-content/plugins/kboard/class/KBContent.class.php 파일에서 확인해보실 수 있습니다.

    고맙습니다.

  • functions.php파일에 아래 코드를 넣었지만 아래 사진과같이 html입력필드의 셀렉트박스 내용이 불러와지지 않는데 해결방법 부탁드립니다...

    add_filter('kboard_latest_alerts_message', 'my_kboard_latest_alerts_message', 10, 2);
    function my_kboard_latest_alerts_message($mail_content, $content){
    	$mail_content = '이름 : '.$content->member_display . '<br>'.'<hr>'.'연락처 : '.$content->option->{'60b8334cd5eea'}. '<br>'.'<hr>'.'Email : '.$content->option->{'60b8333ad5ee9'}. '<br>'.'<hr>'.'test : '.$content->option->{'60b6f2744f226'}. '<br>'.'<hr>'.'문의내용 : '.$content->content. '<br>'.'<hr>';
    	return $mail_content;
    }

    <메일에 보낸 사진>

    https://imgur.com/nhYeZJs

    <문의 페이지 링크>

    http://bgf1.cafe24.com/?page_id=33

    <입력필드 사진>

    https://imgur.com/C4DzLEE

  • 올려주신 페이지 주소로 확인해보니

    셀렉트 박스의 name이 mainCategory, subCategory 이런 식으로 적용되어 있습니다.

    셀렉트 박스의 내용을 입력 필드로 저장하고 이메일로 보내시려면

    해당 name들을 kboard_option_메타키 이런 식으로 적용해주세요.

    고맙습니다.

  • kboard_option_메타키 를 이용해 코드를 수정했는데 오지않습니다.

    혹시 어느부분을 수정해야하나요?..

    *입력필드(HTML)을 하나 더만들어서 메타키를 두개 만들었습니다. 코드는 동일하구요. 아래 사진첨부합니다.

    <!--다중필드-->
    1depth: <select name="kboard_option_{60b6f2744f226?}" style="width:200px">
            <option value="">전체</option>
        </select>
        2depth: <select name="kboard_option_{60b884f13d33f?}" style="width:200px">
            <option value="">전체</option>
        </select>
        
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
     
    $(document).ready(function() {
        
        //Main 카테고리를 선택 할때 마다 AJAX를 호출할 수 있지만 DB접속을 매번 해야 하기 때문에 main, sub카테고리 전체을 들고온다.
        
        //****************이부분은 DB로 셋팅하세요.
        //Main 카테고리 셋팅 (DB에서 값을 가져와 셋팅 하세요.)
        var mainCategoryArray = new Array();
        var mainCategoryObject = new Object();
        
        mainCategoryObject = new Object();
        mainCategoryObject.main_category_id = "1";
        mainCategoryObject.main_category_name = "2021년 계약직 직영점장 채용(영남권)";
        mainCategoryArray.push(mainCategoryObject);
        
        mainCategoryObject = new Object();
        mainCategoryObject.main_category_id = "2";
        mainCategoryObject.main_category_name = "[BGF리테일] 영남권 점포개발 경력사원 수시 채용";
        mainCategoryArray.push(mainCategoryObject);
        
        mainCategoryObject = new Object();
        mainCategoryObject.main_category_id = "3";
        mainCategoryObject.main_category_name = "[BGF리테일] 2021년 경력사원 수시 채용";
        mainCategoryArray.push(mainCategoryObject);
        
        mainCategoryObject = new Object();
        mainCategoryObject.main_category_id = "4";
        mainCategoryObject.main_category_name = "[BGF리테일] 2021년 계약직 직영점장 채용(영남권)";
        mainCategoryArray.push(mainCategoryObject);
        
        //Sub 카테고리 셋팅 (DB에서 값을 가져와 셋팅 하세요.)
        var subCategoryArray = new Array();
        var subCategoryObject = new Object();
        
        //스포츠에 해당하는 sub category 리스트
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "1";
        subCategoryObject.sub_category_id = "1"
        subCategoryObject.sub_category_name = "계약직-점포운영직-점포관리-영남권"    
        subCategoryArray.push(subCategoryObject);
        
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "1";
        subCategoryObject.sub_category_id = "2"
        subCategoryObject.sub_category_name = "농구"    
        subCategoryArray.push(subCategoryObject);
        
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "1";
        subCategoryObject.sub_category_id = "3"
        subCategoryObject.sub_category_name = "축구"    
        subCategoryArray.push(subCategoryObject);
        
        //공연에 해당하는 sub category 리스트
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "2";
        subCategoryObject.sub_category_id = "1"
        subCategoryObject.sub_category_name = "경력-점포개발직군-SP-영남권"    
        subCategoryArray.push(subCategoryObject);
        
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "2";
        subCategoryObject.sub_category_id = "2"
        subCategoryObject.sub_category_name = "뮤지컬"    
        subCategoryArray.push(subCategoryObject);
        
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "2";
        subCategoryObject.sub_category_id = "3"
        subCategoryObject.sub_category_name = "오페라"    
        subCategoryArray.push(subCategoryObject);
        
        subCategoryObject = new Object();
        subCategoryObject.main_category_id = "2";
        subCategoryObject.sub_category_id = "4"
        subCategoryObject.sub_category_name = "콘서트"    
        subCategoryArray.push(subCategoryObject);
        //****************이부분은 DB로 셋팅하세요.
        
        
        //메인 카테고리 셋팅
        var mainCategorySelectBox = $("select[name='kboard_option_{60b6f2744f226?}']");
        
        for(var i=0;i<mainCategoryArray.length;i++){
            mainCategorySelectBox.append("<option value='"+mainCategoryArray[i].main_category_id+"'>"+mainCategoryArray[i].main_category_name+"</option>");
        }
        
        //*********** 1depth카테고리 선택 후 2depth 생성 START ***********
        $(document).on("change","select[name='kboard_option_{60b6f2744f226?}']",function(){
            
            //두번째 셀렉트 박스를 삭제 시킨다.
            var subCategorySelectBox = $("select[name='kboard_option_{60b884f13d33f?}']");
            subCategorySelectBox.children().remove(); //기존 리스트 삭제
            
            //선택한 첫번째 박스의 값을 가져와 일치하는 값을 두번째 셀렉트 박스에 넣는다.
            $("option:selected", this).each(function(){
                var selectValue = $(this).val(); //main category 에서 선택한 값
                subCategorySelectBox.append("<option name='kboard_option_60b6f2744f226' value=''>전체</option>");
                for(var i=0;i<subCategoryArray.length;i++){
                    if(selectValue == subCategoryArray[i].main_category_id){
                        
                        subCategorySelectBox.append("<option name='kboard_option_60b884f13d33f' value='"+subCategoryArray[i].sub_category_id+"'>"+subCategoryArray[i].sub_category_name+"</option>");
                        
                    }
                }
            });
            
        });
        //*********** 1depth카테고리 선택 후 2depth 생성 END ***********
            
    });
    </script>
    <!--다중필드 끝-->

    <메타키 사진>

    https://imgur.com/4soD8ri

     

  • 안녕하세요.

    셀렉트 박스의 name은 HTML 필드의 메타키와는 다르게 별도로 설정해주셔야 합니다.

    그리고 name에는 특수문자가 들어가지 않게 적용해주세요.

    특수문자가 들어갈 경우 예상치 못한 문제가 생길 수 있습니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기