워드프레스 일기의 Quform 14

워드프레스 Quform 문의폼 플러그인 다음 우편번호 검색 기능 추가하기

워드프레스 문의폼 플러그인이나 케이보드 게시판 등에 다음 우편번호 검색 기능을 추가할 수 있습니다. Quform과 Contact Form 7 문의폼에 다음 우편번호 검색 기능을 추가하는 방법을 워드프레스 정보꾸러미 블로그에 소개한 적이 있습니다. 페이지 템플릿을 만들어서 자바스크립트 코드를 추가하는 방법으로 설명되어 있습니다. 페이지 템플릿을 만들어서 JS 코드를 추가하면 해당 페이지에서만 JS 코드가 로드되므로 사이트 전체에 미치는 영향을 최소화할 수 있습니다.며칠 전 워드프레스 알림판에 직접 JS 코드를 추가하여 구현하는 방식으로 Quform으로 만든 문의 페이지에 다음 우편번호 검색 버튼을 추가하는 작업을 진행했습니다. 방법 자체는 동일하고 JS 코드를 어떤 식으로 추가하는가에서 조금 차이가 있습니..

워드프레스 문의 폼을 모든 페이지 하단에 표시하는 방법

워드프레스 Quform 플러그인을 이용하여 문의 폼을 만들고, 방문자가 문의를 제출하면 Coolsms 서비스를 통해 문자가 함께 전송되도록 하는 작업을 맡았습니다. 동시에 Quform으로 만든 문의 폼을 모든 페이지의 하단에 표시되도록 하는 작업도 함께 수행했습니다. 테마나 사용하는 페이지 빌더에 따라 다양한 방식으로 모든 페이지 하단에 문의 폼을 표시할 수 있습니다.워드프레스 문의 폼을 모든 페이지 하단에 표시하는 방법무료 컨택트 폼 플러그인인 Contact Form 7이나 Forminator, 유료 컨택트 플러그인인 Quform 등을 사용하면 사용자가 문의를 제출할 때 동시에 문자로도 전송되도록 연동시킬 수 있습니다. (WPForms의 경우 유료 버전에서만 연동이 가능할 것입니다.)저는 CoolSMS..

워드프레스와 SMS 문자 발송 서비스 CoolSMS 연동 작업

얼마 전 클라이언트의 요청에 따라 워드프레스 Forminator 플러그인으로 만든 문의 폼을 통해 사용자가 문의를 제출하면 문의 유형에 따라 다른 문자 메시지를 고객사가 지정한 핸드폰 번호를 발송하도록 하는 작업을 진행했습니다. 문자 발송 서비스는 CoolSMS라는 업체를 이용하고 있었습니다. 쿨에스엠에스는 야놀자, 토스 등을 포함한 대기업, 금융권, 관공서, 대학교 및 스타트업의 많은 기업들이 이용하는 서비스라고 합니다. 세상에서 가장 안정적이고 빠른 메시지 발송 플랫폼 - 쿨에스엠에스손쉬운 결제 전용계좌, 신용카드, 계좌이체 등 국내 결제 뿐만 아니라 해용신용카드로 한번의 카드번호 등록으로 자동충전까지 지원합니다. 전용계좌, 신용카드, 계좌이체 등 다양한 결제 방식coolsms.co.kr워드프레스와 ..

카페24 워드프레스 홈페이지에서 메일 발송 시 HTML 소스 코드가 표시되는 문제

카페24를 이용하는 워드프레스 사이트에서 방문자들이 컨택트 폼을 통해 문의를 보낼 때 하이웍스 메일 서비스를 이용하는 이메일 계정에서 메일 원문이 표시되는 문제가 있을 수 있습니다. 10G 광아우토반 FullSSD+에서는 이런 문제가 나타나지 않았지만, 10G 광아우토판에서 매니지드 워드프레스 호스팅으로 이전한 후에 PHP 8.2 환경에서 이  문제가 발생하였습니다.카페24 워드프레스 홈페이지에서 메일 발송 시 HTML 소스 코드가 표시되는 문제카페24에서는 최근 10G 광아우토반 상품에 매니지드 워드프레스로 서비스 상품을 변경할 수 있는 옵션을 추가했습니다. 기존에는 상품을 변경하려면 계정을 새로 만들고 상품에 새로 가입해야 했지만, 이제는 카페24 서비스 관리 페이지에서 쉽게 10G 광아우토반과 매니..

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

워드프레스는 Contact Form 7, WPForms 등 다양한 컨택트 폼 플러그인이 있습니다. Quform은 유료 컨택트 폼 플러그인으로 꼭 필요한 기능만 있어서 저는 이 플러그인을 워드프레스 블로그에 사용하고 있습니다. Contact Form 7과 Quform으로 만든 컨택트 폼을 통해 제출된 데이터를 케이보드 게시판에 게시물로 등록되도록 연동할 수 있습니다. 최근 Quform에서 등록한 데이터 중 이미지들을 케이보드 게시판에 표시하는 작업을 맡았습니다. Contact Form 7의 경우 무료 플러그인이지만 이미지 업로드 시 저장이 되지 않고 이메일로만 발송됩니다. 그렇기 때문에 이미지를 전달하는 용도로는 Contact Form 7이 적합하지 않을 수 있습니다. Quform에서는 첨부된 이미지 파일..

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

워드프레스에는 다양한 무료 및 유료 문의폼 플러그인이 있습니다. Quform 플러그인은 유료 컨택트 폼 플러그인으로 꼭 필요한 기능이 탑재되어 많이 이용되고 있습니다. 제 워드프레스 블로그에도 이 플러그인이 설치되어 있습니다. 최근 Quform 문의폼에 다음 우편번호를 통합하고, 전화번호(모바일 번호)를 3개의 입력 상자로 받아서 하나로 병합하는 간단한 작업을 맡았습니다. 다음 전화번호 서비스를 워드프레스 컨택트 폼에 연동하는 방법은 다음 글을 참고해 보세요. 워드프레스 Contact Form 7/Quform에 우편번호 검색창 추가하기 - 워드프레스 정보꾸러미 작년에 다음 우편번호 API를 사용하여 워드프레스에 우편번호 검색창을 다는 방법에 대한 글을 작성한 적이 있습니다. 하지만 오늘 살펴보니 다음 우..

HTML5 number 타입 입력 필드에서 스핀 버튼을 숨기는 방법

입력 양식에서 입력 필드의 타입을 number로 지정할 경우 해당 필드를 선택하면 숫자를 높이거나 낮출 수 있는 스핀 버튼이 표시됩니다. 이 스핀 버튼(증감 버튼)은 CSS로 숨길 수 있습니다. HTML5 number 타입 입력 필드에서 스핀 버튼을 숨기는 방법 워드프레스 Quform에서 다음 우편번호 스크립트를 적용하여 우편번호를 검색하여 주소를 입력할 수 있는 작업을 진행했습니다. 추가로 전화번호 필드에 숫자만 입력이 가능하도록 설정했습니다. Quform 개발자가 제시하는 코드를 사용하여 해당 필드를 number 타입으로 변경했습니다. 텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기 텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 t..

IT & 기타/CSS 2022.11.18

텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기

텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 text input 필드의 타입을 number나 tel로 변경하는 것을 고려해볼 수 있습니다. input 타입을 nubmer로 변경하면 숫자만 입력 가능하고 tel로 설정하면 숫자와 하이픈(-)과 더하기 기호, 괄호 등 전화번호 입력에 필요한 숫자와 문자만 입력할 수 있습니다. text 타입을 그대로 두고 숫자만 입력 가능하도록 하거나 숫자와 하이픈(-)만 입력하도록 허용하려는 경우 아래의 자바스크립트나 jQuery 스크립트를 활용할 수 있습니다. 텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기 다음 자바스크립트를 적용하면 숫자와 대시(-)만 입력이 가능하게 됩니다. var userName..

워드프레스 문의폼: 선택 필드 옵션에 따라 다른 수신자에게 메일 전송하기

다음 그림과 같이 사용자가 선택하는 옵션에 따라 문의 내용을 다른 수신자에게 전송하고 싶은 경우가 있습니다. 가령, "영업" 관련 문의는 영업 담당자에게, "지원" 관련 문의는 고객지원 담당자에게 전송하는 것이 효율적일 것입니다. 워드프레스 문의폼: 선택 필드 옵션에 따라 다른 수신자에게 메일 전송하기 (다중 발송) 워드프레스 유료 컨택트 폼 플러그인인 Quform에서는 사용자가 선택하는 필드 값에 따라 다른 이메일 주소로 문의 데이터를 전송하도록 설정할 수 있습니다. 톱니바퀴 모양의 설정 아이콘(①)을 클릭하고 Notifications(알림) 탭(②)을 선택합니다. Enable conditional recipients(조건부 수신자 활성화) 옵션을 활성화합니다. 그런 다음, Add conditional..

워드프레스 Contact Form 7에서 첨부파일 추가 및 메일로 전송받기

워드프레스 Contact Form 7 플러그인에서 첨부 파일을 추가하려면 Form에서 "file"을 클릭하면 됩니다. 다음과 같은 형식으로 필드를 추가해도 됩니다. [file your-file filetypes:pdf|txt limit:2mb] Contact Form 7에서 첨부 파일은 서버에 저장되지 않기 때문에 이메일로 받아야 합니다. 이메일로 받으려면 Mail 탭의 File Attachments 부분에 [your-file] 형식으로 추가하도록 합니다. Contact Form 7에서 파일 첨부에 대한 내용은 Contact Form 7 문서("File Uploading and Attachment")를 참고해보세요. Contact Form 7 대신 유료 플러그인 Quform을 사용할 수도 있습니다. Qu..

워드프레스 2018.03.15