고객문의폼을 통해 db를 수집

고객문의폼을 통해 db를 수집하려면 워드프레스 에서 어떻게 설정하는게 좋아? 일단 플러그인 설치방법말고 알려주고 방법이 없으면 추천 플러그인을 찾아보려고 합니다.

워드프레스에서 고객문의 폼을 통해 DB에 정보를 수집하려면, 반드시 다음 요소가 필요합니다:

✅ 핵심 구성요소

구성 요소역할

HTML 폼	사용자 입력 인터페이스
처리 스크립트	입력값을 수신하여 DB로 저장
DB 테이블	데이터를 저장할 워드프레스 내 테이블

✅ 플러그인 없이 고객폼 DB 저장하는 기본 구조

1. 커스텀 HTML 폼 삽입 (페이지에 삽입 또는 숏코드)

html

Copy

2. 처리 코드 (functions.php 또는 Code Snippets 플러그인에 삽입)

php

Copy

add_action('admin_post_nopriv_save_customer_inquiry', 'save_customer_inquiry'); add_action('admin_post_save_customer_inquiry', 'save_customer_inquiry'); function save_customer_inquiry() { global $wpdb; $table_name = $wpdb->prefix . 'customer_inquiries'; $name = sanitize_text_field($_POST['name']); $email = sanitize_email($_POST['email']); $message = sanitize_textarea_field($_POST['message']); $wpdb->insert($table_name, [ 'name' => $name, 'email' => $email, 'message' => $message, 'created_at' => current_time('mysql') ]); wp_redirect(home_url('/문의완료/')); exit; }

3. DB 테이블 생성 (한 번만 실행)

php

Copy

function create_customer_inquiry_table() { global $wpdb; $table_name = $wpdb->prefix . 'customer_inquiries'; $charset_collate = $wpdb->get_charset_collate(); $sql = "CREATE TABLE $table_name ( id mediumint(9) NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL, email varchar(100) NOT NULL, message text NOT NULL, created_at datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) $charset_collate;"; require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); dbDelta($sql); } register_activation_hook(__FILE__, 'create_customer_inquiry_table');

✅ 결과 요약

사용자는 HTML 폼에 입력 → admin-post.php로 전송
워드프레스는 functions.php에서 해당 요청을 받아 DB에 저장
데이터는 wp_customer_inquiries 테이블에 저장됨
완료 후 /문의완료/ 페이지로 이동 가능

✅ 플러그인 없이 가능할까?

가능하지만 아래 조건이 있습니다:

조건상태

PHP 코드 편집 가능 여부	✅
DB 구조 이해도	중급 이상
관리자에서 데이터 확인 UI	❌ 별도 개발 필요

❗️대안: 플러그인 추천 (UI 포함)

플러그인특징

Fluent Forms	DB 자동 저장 + 응답 확인 UI
WPForms (Pro)	쉬운 인터페이스 + CSV 내보내기
Formidable Forms	DB 기반 구조화에 강함
Contact Form 7 + Flamingo	가볍고 무료 + Flamingo로 DB 저장 가능

워드프레스 DB에 직접 데이터를 삽입하거나 테이블을 만들면,
실수 시 다음과 같은 문제가 발생할 수 있습니다:

⚠️ 우려되는 문제점

위험요소설명

기존 테이블과 이름 충돌	같은 테이블 이름을 썼다면 덮어쓰기 위험
wp_options 등 핵심 테이블 오염	핵심 테이블에 잘못된 INSERT/UPDATE 시 전체 사이트 영향
삭제/실패 시 복구 불가능	되돌리기 기능 없음 (SQL은 무조건 반영됨)
잘못된 쿼리로 사이트 오류	wp-config.php 내 오류 표시 켜져 있으면 화면이 하얗게 될 수도 있음

✅ 안전하게 개발하는 3가지 원칙

1. 항상 별도 테이블 생성 (prefix + custom 명명)

php

Copy

$table_name = $wpdb->prefix . 'customer_inquiries';

→ 기본 워드프레스 테이블(wp_posts, wp_options, wp_users)과 겹치지 않도록

2. dbDelta() 사용 시 DROP 없이 실행됨

CREATE TABLE을 dbDelta()로 실행하면 기존 테이블을 덮어쓰기하지 않음
→ 없는 경우에만 생성하고, 필드 변경만 업데이트

3. 에디터가 아닌 Code Snippets 플러그인 사용

functions.php에 직접 코드 쓰기보다,
Code Snippets 플러그인을 사용하면:

코드를 “임시 활성화” 가능
오류 발생 시 자동 비활성화
사이트 전체가 먹통 되는 것 방지

✅ 복구가 필요한 상황을 대비하려면?

🔄 되돌릴 수 있는 준비 방법

DB 백업 필수
- phpMyAdmin 또는 Cloudways → Database Manager → Export 탭에서 전체 DB 백업
- 또는 UpdraftPlus, All-in-One WP Migration 같은 플러그인 사용
변경 사항 최소화
- 기존 테이블 수정이 아닌 새 테이블 생성만 할 것
- UPDATE, DELETE 쿼리는 철저히 검토
SQL 로그 남기기
- $wpdb->insert()나 직접 쿼리 전 로그 기록 추가해 문제 추적 가능

✅ 추천 개발 순서

Snippet 또는 functions.php에 dbDelta() 코드 작성
wp_customer_inquiries 테이블이 생성됐는지 phpMyAdmin에서 확인
샘플 데이터를 1건만 입력해본 후 구조와 내용 확인
이상 없으면 폼 연결

💬 정리하면:

별도 테이블 쓰면 기존 워드프레스 데이터엔 영향 없습니다
코드 수정은 Snippets 플러그인 통해 시도하세요
항상 DB 백업을 먼저 받고 시작하세요

원하시면 실전 예제 백업 SQL / 복원 SQL 샘플도 드릴 수 있어요.
→ “실패 시 복구 SQL도 만들어줘”라고 말씀해주세요!

You said:

그럼 플러그인으로 고객문의폼을 만들면 db영향없나? 무료플러그인 추천해줘

ChatGPT said:

네, 정확히 말씀드리자면:

✅ 플러그인으로 고객 문의 폼을 만들면 워드프레스 핵심 DB에는 영향이 없습니다.

✅ 이유 설명

대부분의 문의폼 플러그인은 다음과 같은 방식으로 동작합니다:

항목설명

DB 저장 위치	플러그인 전용 테이블(예: wp_fluentform_submissions) 사용
워드프레스 핵심 테이블 영향	❌ 없음 (wp_posts, wp_users 등 수정하지 않음)
제거 시 데이터	일부 플러그인은 삭제해도 DB에 데이터 남아 있음 (옵션 제공)

✅ 무료 플러그인 추천 TOP 3

1. Fluent Forms (Free)

DB에 자동 저장
기본 필드 구성 다양
제출 내용 관리자 화면에서 조회 가능
이메일 알림 설정 가능

DB 영향: 전용 테이블에 저장 (wp_fluentform_submissions) → 안전

🔗 https://wordpress.org/plugins/fluentform/

2. WPForms Lite

쉬운 드래그앤드롭 빌더
메일 알림 기능 포함
DB에는 저장하지 않지만, 이메일로만 받는 경우에 적합
DB 저장은 Pro 버전 필요

DB 영향: 기본은 없음 (Lite는 이메일 기반 처리)

🔗 https://wordpress.org/plugins/wpforms-lite/

3. Contact Form 7 + Flamingo (DB 저장용)

Contact Form 7 단독 사용 시 이메일 전송만
Flamingo를 함께 설치하면 DB에 저장 가능
초경량 + 유연한 커스터마이징

DB 영향: wp_flamingo_inbound, wp_flamingo_contacts 테이블 생성 → 안전

🔗 https://wordpress.org/plugins/contact-form-7/
🔗 https://wordpress.org/plugins/flamingo/

✅ 정리 추천

목적플러그인 추천

DB 저장 + 관리자에서 보기	Fluent Forms (Free)
단순하고 가벼운 문의폼	WPForms Lite
이메일 + DB 저장 둘 다 원하는 경우	Contact Form 7 + Flamingo

완전 무료면서 DB 저장이 가능한 고객문의 폼 플러그인을 찾고 계시다면,
가장 안전하고 강력한 선택은 바로:

✅ Fluent Forms (Free 버전)

🔹 요약

항목설명

✔ DB 저장	O (wp_fluentform_submissions 테이블 자동 생성)
✔ 관리자 조회	O (제출 내용 관리자 화면에서 확인 가능)
✔ 이메일 알림	O
✔ 조건부 필드	O
❌ 파일 업로드	X (Pro 전용)
💰 가격	100% 무료
💬 한글지원	매우 양호

🔗 플러그인 페이지

✅ 설치 후 기본 사용법

관리자 > 플러그인 > Fluent Forms 설치 및 활성화
Fluent Forms > New Form 클릭
기본 필드(이름, 이메일, 메시지 등) 선택
Save Form → Embed 클릭
[fluentform id="1"] 숏코드 복사
원하는 페이지/글에 붙여넣기

✅ DB 확인 위치

워드프레스 관리자 > Fluent Forms > Entries
DB에서는 wp_fluentform_submissions 테이블에 저장

✅ 보안/호환성

Cloudways, Nginx, LiteSpeed 등 모두 호환
캐시, SMTP, 보안 플러그인과 충돌 적음
GDPR 대응 기본 포함 (동의 체크박스)

그럼 **Fluent Forms (무료 버전)**으로 DB 저장이 되는 기본 고객 문의폼 구성을 바로 드릴게요.

✅ 1. 기본 필드 구성 예시

이름 (필수)
이메일 (필수)
문의 내용 (필수)
제출 버튼

✅ 2. 숏코드용 HTML + 필드 구성 (자동 생성됨)

Fluent Forms 설치 후:

관리자 > Fluent Forms > 새 폼 만들기
Blank Form > 필드 추가
- Name → Email → Text Area
저장 후 숏코드 복사:

plaintext

Copy

[fluentform id="1"]

이 코드를 원하는 페이지/글/위젯에 붙여넣기

✅ 3. 관리자에서 제출 내용 확인

메뉴: Fluent Forms > Entries
각 폼별 제출 내역이 리스트 형태로 정리됨
엑셀로 내보내기 가능

✅ 4. DB 직접 확인 (선택)

테이블명: wp_fluentform_submissions
Cloudways > Database Manager → 테이블 검색
제출된 데이터 그대로 확인 가능

그럼 이어서 Fluent Forms 무료버전으로 이메일 자동응답 설정하는 방법까지 깔끔하게 정리해드릴게요.

✅ Fluent Forms 무료로 이메일 자동응답 설정하는 방법

1. 폼 편집으로 이동

워드프레스 관리자 > Fluent Forms > All Forms
해당 폼의 Edit (편집) 클릭

2. 이메일 알림 설정

상단 탭에서 Settings & Integrations (설정 및 통합) 클릭
좌측 메뉴에서 Email Notifications 선택

3. 관리자 알림 설정 (기본값)

To: 사이트 관리자 이메일
Subject: 예) “새 문의가 도착했습니다”
Body: 필드 값 포함해서 자동 작성 가능
(예: Name: {inputs.name}, Email: {inputs.email} 등)

4. 사용자 자동응답 이메일 추가

Add Notification > 사용자용 알림 추가 클릭

예시 설정값:

항목값

Name	사용자 자동응답
Send To	{inputs.email}
Subject	"문의가 접수되었습니다. 감사합니다."
Message	안녕하세요, {inputs.name}님. 문의주셔서 감사합니다. 등 원하는 문구

5. 저장 및 테스트

폼에 샘플 입력 후 제출
관리자는 관리자용 알림 수신
사용자는 자동응답 메일 수신 확인

좋습니다! 아래는 Fluent Forms 무료버전을 사용해
고객문의 폼 + DB저장 + 이메일 자동응답 + GDPR 동의 + 제출 후 리디렉션까지 완성하는 전체 구성 가이드입니다.

✅ 전체 기능 구성 목표

항목구현 여부

✔ DB 저장	O
✔ 관리자 이메일 알림	O
✔ 사용자 자동응답 메일	O
✔ GDPR 동의 체크박스	O
✔ 제출 후 감사 페이지 리디렉션	O
✔ CSV/Excel 내보내기	O

✅ STEP 1: 폼 만들기

워드프레스 > Fluent Forms > 새 폼 만들기
빈 폼 선택 (Blank Form)

기본 필드 구성

Name (이름)
Email (이메일)
Text Area (문의내용)
Checkbox (GDPR 동의)
- Label: 개인정보 수집 및 이용에 동의합니다
- 필수로 설정 (Required 체크)

✅ STEP 2: 제출 후 리디렉션 설정

Settings & Integrations > Confirmation Settings
Show a message 대신 → Redirect to a custom URL 선택
예: https://yourdomain.com/thanks 로 설정

→ 완료 후 해당 주소에 "문의 감사합니다" 페이지 직접 제작

✅ STEP 3: 이메일 알림 설정

① 관리자용 알림

Settings & Integrations > Email Notifications > 기본 알림 사용
받는 사람(To): 관리자의 이메일 주소
제목: 새 문의 도착
본문:

plaintext

Copy

이름: {inputs.name} 이메일: {inputs.email} 내용: {inputs.textarea}

② 사용자 자동응답 메일 설정

Add Notification 클릭 → 사용자 자동응답 추가

항목값

이름	사용자 자동응답
To	{inputs.email}
제목	문의 접수 확인 메일입니다
메시지	안녕하세요 {inputs.name}님, 문의를 잘 받았습니다. 빠른 시일 내 답변드리겠습니다.

✅ STEP 4: DB 저장 위치 확인

워드프레스 관리자 > Fluent Forms > Entries
→ 각 제출 내역 확인 가능
→ 필터 및 엑셀(CSV) 다운로드 가능

✅ STEP 5: CSV / Excel 다운로드

Fluent Forms > Entries > Export as CSV 클릭
→ 자동 저장된 DB 데이터를 파일로 백업 가능

✅ STEP 6: 폼 삽입 방법

저장 후 나온 숏코드 복사: 예) [fluentform id="1"]
페이지나 글, 사이드바 등에 붙여넣기

✅ 추가 팁

항목설명

GDPR 체크 안하면 제출 막기	GDPR 체크박스에 "Required" 설정
메일 안 올 경우	WP Mail SMTP 플러그인 함께 설치 권장
제출 시 로딩 스피너 표시	기본 포함됨
자동응답 메일 스타일 변경	HTML 편집 가능

✅ Fluent Forms 문의폼 완성 체크리스트

폼 생성 및 필드 구성
GDPR 동의 체크박스 추가
이메일 알림 (관리자 + 사용자 자동응답) 설정
제출 후 리디렉션 URL 설정
DB 저장 확인 (Entries에서 확인 가능)
[fluentform id="1"] → 원하는 위치에 삽입
이메일 발송 테스트
CSV 백업 테스트

💡 추가 추천 작업

WP Mail SMTP 플러그인 설치 → 이메일 누락 방지
감사 페이지 따로 제작 → /thanks 페이지 추가
reCAPTCHA V3 설정 → 스팸방지
페이지 전체 넓이에 맞게 폼 스타일 CSS 적용 (원하시면 드려요)

아래는 Fluent Forms(무료버전 기준)에 적용 가능한 reCAPTCHA 스팸 방지 기능 추가와
모바일에서 폼이 보기 좋게 반응형으로 표시되는 CSS 코드를
한 번에 복사 가능하도록 구성해 드립니다.

✅ 1. Google reCAPTCHA 설정 (v2 또는 v3)

① Google reCAPTCHA 키 발급

아래 링크로 이동
https://www.google.com/recaptcha/admin/create
사이트 이름 입력
reCAPTCHA 유형 선택
- v2 ("I'm not a robot" 체크박스)
- v3 (자동 감지, UI 없음)
도메인 입력: 예) knowwhereai.com
사이트 키와 비밀 키 생성

② Fluent Forms에 키 등록

워드프레스 관리자 > Fluent Forms > Global Settings
좌측 메뉴: reCAPTCHA Settings
위에서 발급받은 사이트 키 / 비밀 키 입력
사용하는 버전 선택 (v2 또는 v3) 후 저장

③ 폼에 적용하기

reCAPTCHA v2 사용 시
→ 폼 편집 > 필드에서 reCAPTCHA 필드 삽입
v3 사용 시
→ 필드 삽입 없이 모든 폼에 자동 적용됨

✅ 2. 폰에서 보기 좋은 Fluent Forms 전용 CSS

css

Copy

/* ✅ Fluent Forms 모바일 최적화 CSS */ .ff-el-group { margin-bottom: 16px; } .ff-el-input--label { font-size: 16px; font-weight: 600; margin-bottom: 6px; display: block; } .ff-el-form-control { width: 100% !important; padding: 12px 14px; font-size: 16px; border-radius: 6px; border: 1px solid #ccc; box-sizing: border-box; } .ff-btn-submit { background: linear-gradient(135deg, #3a7cff, #70c2ff); border: none; color: white; font-weight: bold; padding: 14px 20px; border-radius: 30px; font-size: 16px; cursor: pointer; width: 100%; transition: all 0.3s ease; } .ff-btn-submit:hover { background: linear-gradient(135deg, #5bb4ff, #4086ff); transform: scale(1.03); }

적용 위치:
워드프레스 > 외모 > 사용자 정의하기 > 추가 CSS에 붙여넣기

이렇게 설정하면:

스팸방지 + 자동 제출 차단
모바일에서도 넓게, 예쁘게 정렬
Fluent Forms 무료버전에서도 완전 대응 가능

반응형 + 감성 카드 스타일 디자인을
Fluent Forms 폼 전체에 적용 가능한 CSS로 구성해드릴게요.

이 스타일은 "카드 형태로 정돈된 문의폼",
즉 배경 흰색, 그림자, 부드러운 곡선, 간결한 입력창으로 구성됩니다.

✅ Fluent Forms 감성 카드 스타일 CSS (복사용)

css

Copy

/* ✅ 폼 전체를 카드 형태로 감싸기 */ .ff_form_wrapper { max-width: 540px; margin: 40px auto; padding: 30px; background: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } /* ✅ 필드 간격 및 라벨 스타일 */ .ff-el-group { margin-bottom: 20px; } .ff-el-input--label { font-size: 16px; font-weight: 600; margin-bottom: 8px; display: block; color: #333; } /* ✅ 입력 필드 꾸미기 */ .ff-el-form-control { width: 100% !important; padding: 12px 16px; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; background-color: #f9f9f9; transition: border-color 0.3s ease; } .ff-el-form-control:focus { border-color: #3a7cff; background-color: #fff; outline: none; } /* ✅ 제출 버튼 꾸미기 */ .ff-btn-submit { background: linear-gradient(135deg, #3a7cff

고객문의폼을 통해 db를 수집

✅ 핵심 구성요소

✅ 플러그인 없이 고객폼 DB 저장하는 기본 구조

1. 커스텀 HTML 폼 삽입 (페이지에 삽입 또는 숏코드)

2. 처리 코드 (functions.php 또는 Code Snippets 플러그인에 삽입)

3. DB 테이블 생성 (한 번만 실행)

✅ 결과 요약

✅ 플러그인 없이 가능할까?

❗️대안: 플러그인 추천 (UI 포함)

⚠️ 우려되는 문제점

✅ 안전하게 개발하는 3가지 원칙

1. 항상 별도 테이블 생성 (prefix + custom 명명)

2. dbDelta() 사용 시 DROP 없이 실행됨

3. 에디터가 아닌 Code Snippets 플러그인 사용

✅ 복구가 필요한 상황을 대비하려면?

🔄 되돌릴 수 있는 준비 방법

✅ 추천 개발 순서

✅ 이유 설명

✅ 무료 플러그인 추천 TOP 3

1. Fluent Forms (Free)

2. WPForms Lite

3. Contact Form 7 + Flamingo (DB 저장용)

✅ 정리 추천

✅ Fluent Forms (Free 버전)

🔹 요약

✅ 설치 후 기본 사용법

✅ DB 확인 위치

✅ 보안/호환성

✅ 1. 기본 필드 구성 예시

✅ 2. 숏코드용 HTML + 필드 구성 (자동 생성됨)

✅ 3. 관리자에서 제출 내용 확인

✅ 4. DB 직접 확인 (선택)

✅ Fluent Forms 무료로 이메일 자동응답 설정하는 방법

1. 폼 편집으로 이동

2. 이메일 알림 설정

3. 관리자 알림 설정 (기본값)

4. 사용자 자동응답 이메일 추가

5. 저장 및 테스트

✅ 전체 기능 구성 목표

✅ STEP 1: 폼 만들기

기본 필드 구성

✅ STEP 2: 제출 후 리디렉션 설정

✅ STEP 3: 이메일 알림 설정

✅ STEP 4: DB 저장 위치 확인

✅ STEP 5: CSV / Excel 다운로드

✅ STEP 6: 폼 삽입 방법

✅ 추가 팁

✅ Fluent Forms 문의폼 완성 체크리스트

✅ 1. Google reCAPTCHA 설정 (v2 또는 v3)

① Google reCAPTCHA 키 발급

② Fluent Forms에 키 등록

③ 폼에 적용하기

✅ 2. 폰에서 보기 좋은 Fluent Forms 전용 CSS

✅ Fluent Forms 감성 카드 스타일 CSS (복사용)

티스토리툴바