개인정보동의서 내용을 (1)팝업창으로 띄우거나 (2)클릭하면 펼쳐지는 방식 문의

스레드봇님, 안녕하세요?

콘택트폼을 사용하면서 '개인정보 제공 및 활용 동의서'  항목을 추가해서 이용하고 있습니다.

클라이언트가 요청하기를 '개인정보 제공 및 활용 동의서'를 그대로 보여주게 되면

너무 많은 공간을 사용하게 되니까, 클릭하면 팝업창으로 뜨든지 아니면

동의서 내용을 감추었다가 클릭하면 펼쳐지게 하는 방식으로 했으면 좋겠다는

의견을 제시해 왔습니다.

 

혼자서 해결하려고 했다가....

코스모스팜의 다른 이용자들에게도 유용한 기능일 것 같아서

게시판을 통해서 문의드립니다.

 

현재 제가 사용하고 있는 코드는 아래와 같습니다. (차일드 테마의 functions.php에 저장되어 있음)

 

(코드)

/* 동의서 양식  */
add_filter('kboard_get_template_field_html', 'my_kboard_get_template_field_html', 10, 4);
function my_kboard_get_template_field_html($field_html, $field, $content, $board){
    if($field['field_type'] == 'agree_checkbox'){
        ob_start();
        ?>
        <div class="kboard-attr-row meta-key-<?php echo esc_attr($field['meta_key'])?> required">
            <label class="attr-name agree-title" for="agree_checkbox">
                <p class="field-name"><?php echo esc_html($field['field_name'] ? $field['field_name'] : $field['field_label'])?></p>
            </label>
            <div class="attr-value agree-content" style="margin:0;">
                <div class="privacy-announce" style="margin: 0; padding: 8px 20px 0px 10px; height: auto; line-height: 20px; background-color: #f2f2f2; overflow-y: auto;">
                    <ol>
                        <li><strong>수집 목적</strong> : 회원가입 및 서비스 신청 등과 관련된 상담안내</li>
                        <li><strong>수집 항목</strong> : 이름 ,전화번호, IP (자동수집)</li>
                        <li><strong>보유 및 이용기간</strong> : 상담 및 해당 업무 종료 후 1년 이내 파기</li>
                    </ol>
                    <p style="font-size: 14px; padding-left: 20px; padding-bottom: 12px; line-height: 20px; color: #1d9dee;">※ 개인정보 수집 및 이용에 대해서 거부할 수 있으며, 거부 시에는 가입 및 상담 등의 안내 서비스를 받으실 수 없습니다.</p>
                </div>
                <div style="text-align:center;">
                    <input type="hidden" class="required" name="kboard_option_<?php echo esc_attr($field['meta_key'])?>" value="1">
                    <label><input type="checkbox" class="required" name="kboard_option_<?php echo esc_attr($field['meta_key'])?>" value="1"> 개인정보이용 동의</label>
                </div>
            </div>
        </div>
        <?php
        $field_html = ob_get_clean();
    }
    return $field_html;
}

 

감사합니다^^

 

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

    올려주신 코드를 활용해서 체크박스가 체크되기 전에는 표시하지 않고

    체크박스에 체크가 되면 표시되도록 코드를 수정해봤습니다.

    아래의 코드를 활용해보시겠어요?

    add_filter('kboard_get_template_field_html', 'my_kboard_get_template_field_html', 10, 4);
    function my_kboard_get_template_field_html($field_html, $field, $content, $board){
    	
    	if($field['field_type'] == 'agree_checkbox'){
    		ob_start();
    		?>
    		<div class="kboard-attr-row meta-key-<?php echo esc_attr($field['meta_key'])?> required">
    			<label class="attr-name" for="agree_checkbox" style="display:none">
    				<span class="field-name"><?php echo esc_html($field['field_name'] ? $field['field_name'] : $field['field_label'])?></span>
    			</label>
    			<div class="attr-value" style="margin:0;">
    				<div class="kboard-agree-checkbox-content" style="margin: 20px 0; padding: 10px; height: 100px; background-color: #f2f2f2; overflow-y: auto;">
    					<p>정보통신망법 규정에 따라 OOO에 회원가입 신청하시는 분께 수집하는 개인정보의 항목, 개인정보의 수집 및 이용목적, 개인정보의 보유 및 이용기간을 안내 드리오니 자세히 읽은 후 동의하여 주시기 바랍니다.</p>
    					<p>1. 수집하는 개인정보</p>
    					<p>2. 수집한 개인정보의 이용</p>
    					<p>3. 개인정보의 파기</p>
    				</div>
    				<div style="text-align:center;">
    					<input type="hidden" class="required" name="kboard_option_<?php echo esc_attr($field['meta_key'])?>" value="1">
    					<label><input type="checkbox" class="required" name="kboard_option_<?php echo esc_attr($field['meta_key'])?>" onclick="kboard_show_agree_checkbox()" value="1"> 개인정보 제공 및 활용에 동의합니다.</label>
    				</div>
    			</div>
    		</div>
    		<style>
    		#kboard-default-editor .kboard-attr-row .attr-value .kboard-agree-checkbox-content { display: none; }
    		#kboard-default-editor .kboard-attr-row .attr-value .kboard-agree-checkbox-content.show { display: block; }
    		</style>
    		<script>
    		function kboard_show_agree_checkbox(){
    			if(jQuery('.kboard-agree-checkbox-content').hasClass('show')){
    				jQuery('.kboard-agree-checkbox-content').removeClass('show');
    			}
    			else{
    				jQuery('.kboard-agree-checkbox-content').addClass('show');
    			}
    		}
    		</script>
    		<?php
    		$field_html = ob_get_clean();
    	}
    	
    	return $field_html;
    }

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기