워드프레스 Quform과 케이보드 연동: 이미지 표시

워드프레스는 Contact Form 7, WPForms 등 다양한 컨택트 폼 플러그인이 있습니다. Quform은 유료 컨택트 폼 플러그인으로 꼭 필요한 기능만 있어서 저는 이 플러그인을 워드프레스 블로그에 사용하고 있습니다. Contact Form 7과 Quform으로 만든 컨택트 폼을 통해 제출된 데이터를 케이보드 게시판에 게시물로 등록되도록 연동할 수 있습니다.

최근 Quform에서 등록한 데이터 중 이미지들을 케이보드 게시판에 표시하는 작업을 맡았습니다. Contact Form 7의 경우 무료 플러그인이지만 이미지 업로드 시 저장이 되지 않고 이메일로만 발송됩니다. 그렇기 때문에 이미지를 전달하는 용도로는 Contact Form 7이 적합하지 않을 수 있습니다. Quform에서는 첨부된 이미지 파일을 서버에 저장할 수 있으므로 Quform 문의 폼에 이미지를 업로드하고 이미지를 케이보드 게시판에 표시하는 것이 가능합니다.

워드프레스 Quform과 케이보드 연동: 이미지 표시

위의 그림과 같이 Quform 컨택트 폼에서 각 필드에 사진을 최대 5장까지 첨부하고, 그 사진들을 케이보드 게시글에서 각 필드에 그리드 레이아웃으로 표시해야 하는 작업을 맡았습니다.

또한, 개별 이미지를 클릭하면 모달 이미지로 표시되도록 했습니다.

각 필드에 하나씩만 업로드할 수 있다면 어렵지 않게 작업이 가능하지만 각 필드에 최대 5개까지 이미지를 업로드할 수 있어서 고려해야 할 사항이 조금 많아졌습니다.

Quform에서는 업로드 필드에 업로드 가능한 파일 개수를 지정할 수 있습니다.

워드프레스 Quform 플러그인: 다중 파일 업로드 허용하기 - 워드프레스 정보꾸러미

파일 업로드 필드의 데이터 타입 및 배열 키값을 다음 글에서 확인할 수 있습니다.

워드프레스 Quform 플러그인 파일 업로드 필드의 데이터 타입 및 배열 키값 - 워드프레스 정보꾸러

정리하면 다음과 같습니다.

키값	입력값 예시	비고
url	https://www.example.com/path-to-file/file-name.jpg	파일 URL
filename	file-name.jpg	파일명
path	/home/example.com/public_html/path-to-file/file-name.jpg	경로
type	image/jpg	파일 타입
size	12345	파일 크기

파일 데이터는 다음과 같은 코드를 사용하여 가져올 수 있습니다.

$file = $form->getValue('quform_1_23');

첫 번째 첨부 파일은 $file[0]이 됩니다. 그러면 첫 번째 첨부 파일의 URL은 다음과 같이 됩니다.

$file[0][url]

각 필드에 첨부 파일이 1개에서 최대 5개가 존재합니다. 이런 경우 다음과 비슷한 함수를 만들어서 각 필드에 대하여 이미지를 표시하는 코드를 만들 수 있습니다.

function generateImageHTML($fileData) {
    $html = "";
    foreach ($fileData as $index => $urlData) {
        $html .= '<a href="#" class="img-popup" data-src="' . $urlData['url'] . '">';
        $html .= '<img class="store' . ($index + 1) . '" src="' . $urlData['url'] . '" alt="Image ' . ($index + 1) . '"/>';
        $html .= '</a>';
    }
    return $html;
}

호출은 다음 같은 코드를 사용할 수 있습니다.

$fileData1 = $form->getValue('quform_field1');
$fileData2 = $form->getValue('quform_field2');
//...
// Field 1
$main_content .= generateImageHTML($fileData1);
// Field 2
$main_content .= generateImageHTML($fileData2);

상기 코드를 상황에 맞게 적절히 응용할 수 있습니다.

이미지를 모달 팝업으로 표시하는 것은 자바스크립트로 구현이 가능합니다.

Quform에서 케이보드 연동 소스는 다음 글을 참고하세요:

워드프레스 Quform과 케이보드 게시판 연동 소스 코드 - 워드프레스 정보꾸러미

참고

https://avada.tistory.com/2922

워드프레스 Quform 문의폼: 전화번호 필드를 3개로 분리하기

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2335

워드프레스 GeneratePress 테마 라이선스 (+요금제)