워드프레스 QuForm과 KBoard 완전 연동 가이드

워드프레스에서 QuForm으로 받은 데이터를 KBoard 게시판으로 자동 전송하는 방법을 단계별로 알아보겠습니다. 조건부 필드 설정부터 실제 연동 플러그인 작성까지 실무에서 바로 활용할 수 있는 완전한 가이드입니다.

조건부 필드 설정하기

요구사항

첫 번째 선택 필드: 시/도 선택 (서울, 부산, 대구 등)
두 번째 선택 필드: 각 시/도에 맞는 구/군이 조건부로 노출
최종 선택된 구/군명을 별도 텍스트 필드에 자동 입력

QuForm 설정

시/도 선택 필드 생성 (예: ID 2_85)
각 시/도별 구/군 선택 필드들 생성 (예: ID 2_114, 2_134, 2_133 등)
조건부 로직 설정: 시/도 선택에 따라 해당 구/군 필드만 노출
최종 값 저장용 텍스트 필드 생성 (예: ID 2_145)

JavaScript로 필드값 자동 입력

HTML 구조 파악

먼저 개발자 도구(F12)로 QuForm의 실제 HTML 구조를 확인합니다:

<!-- 조건부 선택 필드 -->
<div class="quform-element quform-element-select quform-element-2_114">
    <select name="quform_2_114">...</select>
</div>

<!-- 텍스트 입력 필드 -->
<input type="text" name="quform_2_145" class="quform-field-2_145">

JavaScript 코드

QuForm의 Form Settings → JavaScript 섹션에 다음 코드를 추가합니다:

jQuery(document).ready(function($) {
    $(document).on('change', '.quform-element select', function() {
        var $element = $(this).closest('.quform-element');
        var elementClass = $element.attr('class');
        
        console.log('변경된 요소:', elementClass);
        
        // 구/군 선택 필드 클래스들
        var districtFields = [
            'quform-element-2_114', 'quform-element-2_134', 'quform-element-2_133',
            'quform-element-2_132', 'quform-element-2_131', 'quform-element-2_130',
            'quform-element-2_129', 'quform-element-2_128', 'quform-element-2_127',
            'quform-element-2_126', 'quform-element-2_125', 'quform-element-2_124',
            'quform-element-2_123', 'quform-element-2_122', 'quform-element-2_121',
            'quform-element-2_120', 'quform-element-2_119'
        ];
        
        // 현재 변경된 필드가 구/군 필드인지 확인
        var isDistrictField = districtFields.some(function(fieldClass) {
            return elementClass.includes(fieldClass);
        });
        
        if (isDistrictField) {
            var selectedText = $(this).find('option:selected').text();
            console.log('선택된 텍스트:', selectedText);
            
            // 유효한 값이 선택된 경우에만 텍스트 필드에 입력
            if (selectedText && selectedText !== '구/군' && selectedText.trim() !== '') {
                $('input[name="quform_2_145"]').val(selectedText);
                console.log('텍스트 필드에 입력 완료:', selectedText);
            }
        }
    });
});

핵심 포인트

이벤트 델리게이션: 조건부로 생성되는 필드도 감지할 수 있도록 $(document).on() 사용
클래스 기반 식별: QuForm의 quform-element-{필드ID} 클래스 패턴 활용
정확한 셀렉터: QuForm의 실제 name 속성 형식 quform_{필드ID} 사용

QuForm to KBoard 연동 플러그인 작성

플러그인 파일 생성

/wp-content/plugins/quform-to-kboard/quform-to-kboard.php 파일을 생성합니다:

<?php
/*
Plugin Name: Quform to Kboard
Description: Theme plugin
Version: 1.0
*/

function my_quform_process(array $result, Quform_Form $form)
{
    global $wpdb;
    
    // 폼 데이터 가져오기
    $contact_name = $form->getValue('quform_2_104'); //이름
    $contact_tel = $form->getValue('quform_2_75'); // 전화번호
    $contact_20 = $form->getValue('quform_2_85'); // 지역(시/도)
    $contact_21 = $form->getValue('quform_2_145'); // 지역(구/군)
    $contact_22 = $form->getValue('quform_2_139'); // 성별
    $contact_23 = $form->getValue('quform_2_138'); // 나이
                                                   
    $current_date = date("YmdHis", current_time('timestamp'));
    
    // HTML 테이블 형태로 컨텐츠 생성
    $main_content = '<table width="100%" border="1" cellspacing="0" cellpadding="6" BORDERCOLOR="#E8E8E8">
          <tr>
        <td width="23%">1. 이름</td>
        <td width="77%">' . $contact_name . '</td>
      </tr>    
      <tr>
        <td width="23%">2. 전화번호</td>
        <td width="77%">' . $contact_tel . '</td>
      </tr>
     <tr>
        <td width="23%">3. 지역(시/도)</td>
        <td width="77%">' . $contact_20 . '</td>
      </tr>
      <tr>
        <td width="23%">4. 지역(구/군)</td>
        <td width="77%">' . $contact_21 . '</td>
      </tr>
      <tr>
       <td width="23%">5. 성별 </td>
        <td width="77%">' . $contact_22 . '</td>
      </tr>
      <tr>
        <td width="23%">6. 나이 </td>
        <td width="77%">' . $contact_23 . '</td>
      </tr>
    </table>';
    
    $contact_title = $contact_name . '님의 상담 신청';
    $table_name2 = $wpdb->prefix . "kboard_board_option";
    $table_name = $wpdb->prefix . "kboard_board_content";
    
    // KBoard 게시글 삽입
    $result = $wpdb->insert( $table_name, array( 
        'board_id' => 1, 
        'member_display' => $contact_name, 
        'password' => $contact_tel, 
        'title' => $contact_title, 
        'content' => $main_content, 
        'parent_uid' => 0, 
        'category1' => '', 
        'date' => $current_date, 
        'update' => $current_date, 
        'member_uid' => 0, 
        'comment' => 0, 
        'vote' => 0, 
        'like' => 0, 
        'unlike' => 0, 
        'secret' => 1, 
        'view' => 0, 
        'thumbnail_file' => '', 
        'thumbnail_name' => '', 
        'category2' => '상담중', 
        'search' => 1, 
        'notice' => 0, 
        'status' => '' 
    ) );
    
    // 추가 옵션 데이터 저장
    $content_uid = $wpdb->insert_id;
    $wpdb->insert( $table_name2, array( 'content_uid' => $content_uid, 'option_key' => 'contact_tel', 'option_value' => $contact_tel ) ); 
    $wpdb->insert( $table_name2, array( 'content_uid' => $content_uid, 'option_key' => 'contact_sido', 'option_value' => $contact_20 ) ); 
    $wpdb->insert( $table_name2, array( 'content_uid' => $content_uid, 'option_key' => 'contact_gugun', 'option_value' => $contact_21 ) ); 
    $wpdb->insert( $table_name2, array( 'content_uid' => $content_uid, 'option_key' => 'contact_gender', 'option_value' => $contact_22 ) ); 
    $wpdb->insert( $table_name2, array( 'content_uid' => $content_uid, 'option_key' => 'contact_age', 'option_value' => $contact_23 ) ); 
    
    return $result;
}

// QuForm ID가 2인 경우의 훅
add_filter('quform_post_process_2', 'my_quform_process', 10, 2);
?>

핵심 개념

QuForm 훅 시스템: quform_post_process_{폼ID} 형태로 각 폼별 훅 제공
KBoard 테이블 구조:
- wp_kboard_board_content: 메인 게시글 데이터
- wp_kboard_board_option: 추가 메타 데이터
데이터 보안: 실제 운영환경에서는 sanitize_text_field() 등으로 데이터 정제 필요

주요 문제점과 해결방법

1. 플러그인 저장 오류

문제: PHP 구문 오류로 인한 플러그인 활성화 실패

원인과 해결:

// ❌ 잘못된 코드 (Boolean 값)
'secret' => true,
'category1' => false,

// ✅ 올바른 코드
'secret' => 1,
'category1' => '',

2. QuForm 훅이 실행되지 않음

문제: 폼 제출해도 KBoard에 데이터가 전송되지 않음

원인: QuForm ID와 훅 ID 불일치

// QuForm ID가 2인데 훅은 1을 사용한 경우
add_filter('quform_post_process_1', 'my_quform_process', 10, 2); // ❌

// 올바른 훅 사용
add_filter('quform_post_process_2', 'my_quform_process', 10, 2); // ✅

3. JavaScript가 작동하지 않음

문제: 조건부 필드 값이 텍스트 필드에 자동 입력되지 않음

해결방법:

개발자 도구로 실제 HTML 구조 확인
이벤트 델리게이션 사용: 동적 생성 필드 감지
console.log()로 디버깅: 각 단계별 실행 여부 확인

4. 히든 필드 관련 이슈

문제: 히든 필드에 JavaScript로 값 입력이 안 됨

해결방법:

먼저 일반 텍스트 필드로 테스트
작동 확인 후 CSS로 숨기기:

.quform-element-2_145 {
    display: none !important;
}

디버깅 팁

1. 로그 파일 활용

// 디버깅용 로그 함수
function log_debug($message) {
    error_log(date('[Y-m-d H:i:s] ') . $message . "\n", 3, WP_CONTENT_DIR . '/debug.log');
}

// 사용 예
log_debug("폼 데이터: " . print_r($form_data, true));

2. 단계별 확인

QuForm 훅 실행 여부
폼 데이터 정상 수집 여부
KBoard 테이블 존재 여부
게시판 ID 존재 여부
데이터베이스 삽입 성공 여부

3. 브라우저 개발자 도구 활용

Console: JavaScript 오류 및 로그 확인
Network: AJAX 요청 확인
Elements: 실제 HTML 구조 및 필드 ID 확인

실무 활용 팁

1. 보안 강화

// 입력 데이터 정제
$contact_name = sanitize_text_field($form->getValue('quform_2_104'));
$contact_email = sanitize_email($form->getValue('quform_2_8'));

2. 에러 처리

try {
    $insert_result = $wpdb->insert($table_name, $data);
    if ($insert_result === false) {
        throw new Exception("DB 삽입 실패: " . $wpdb->last_error);
    }
} catch (Exception $e) {
    error_log("QuForm 연동 오류: " . $e->getMessage());
}

3. 코드 모듈화

// 헬퍼 함수로 분리
function generate_content_table($data) {
    $content = '<table>...';
    return $content;
}

결론

QuForm과 KBoard 연동은 워드프레스 실무에서 자주 요구되는 기능입니다. 이 가이드의 핵심은:

조건부 필드: JavaScript로 동적 필드값 처리
올바른 훅 사용: quform_post_process_{폼ID} 정확히 매칭
구문 오류 방지: Boolean 값 처리 주의
체계적 디버깅: 로그와 개발자 도구 적극 활용

이 방법들을 응용하면 QuForm의 다양한 필드 타입과 KBoard의 여러 기능을 연동하는 더 복잡한 시스템도 구축할 수 있습니다.

참고: 실제 운영환경에서는 데이터 검증, 에러 처리, 보안 강화 등을 추가로 고려해야 합니다.

워드프레스 QuForm과 KBoard 완전 연동 가이드

목차

조건부 필드 설정하기

요구사항

QuForm 설정

JavaScript로 필드값 자동 입력

HTML 구조 파악

JavaScript 코드

핵심 포인트

QuForm to KBoard 연동 플러그인 작성

플러그인 파일 생성

핵심 개념

주요 문제점과 해결방법

1. 플러그인 저장 오류

2. QuForm 훅이 실행되지 않음

3. JavaScript가 작동하지 않음

4. 히든 필드 관련 이슈

디버깅 팁

1. 로그 파일 활용

2. 단계별 확인

3. 브라우저 개발자 도구 활용

실무 활용 팁

1. 보안 강화

2. 에러 처리

3. 코드 모듈화

결론

댓글 남기기 답글 취소

목차

조건부 필드 설정하기

요구사항

QuForm 설정

JavaScript로 필드값 자동 입력

HTML 구조 파악

JavaScript 코드

핵심 포인트

QuForm to KBoard 연동 플러그인 작성

플러그인 파일 생성

핵심 개념

주요 문제점과 해결방법

1. 플러그인 저장 오류

2. QuForm 훅이 실행되지 않음

3. JavaScript가 작동하지 않음

4. 히든 필드 관련 이슈

디버깅 팁

1. 로그 파일 활용

2. 단계별 확인

3. 브라우저 개발자 도구 활용

실무 활용 팁

1. 보안 강화

2. 에러 처리

3. 코드 모듈화

결론

관련 게시물

워드프레스에서 비디오 시청 진행률 추적하기: JetEngine + Elementor 완벽 가이드

워드프레스 엘리멘터에서 전체동의 체크박스 기능 구현하기 (엠샵멤버스 플러그인 활용)

워드프레스 Taxonomy와 Term의 차이점

댓글 남기기 답글 취소