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

워드프레스에서 방문자로부터 문의, 의뢰 또는 피드백을 받고 싶은 경우 문의 폼 플러그인이나 워드프레스 테마에서 제공하는 문의 폼 기능을 사용할 수 있습니다. 무료 문의 폼 플러그인으로 Contact Form 7과 WPForms가 있으며 유료 컨택트 폼 플러그인으로 Quform 등이 있습니다. 아바다 테마 등 일부 테마에서는 자체적으로 문의 폼 기능을 제공하기도 합니다. 엘리멘터 페이지 빌더의 경우 Elementor Pro에서 Form 위젯을 제공합니다. Form 엘리먼트를 사용하면 별도의 컨택트 폼 플러그인을 설치할 필요 없이 자체 기능으로 웬만한 문의 양식을 만들 수 있습니다. https://avada.tistory.com/2462 워드프레스 엘리멘터 문의폼 위젯(Form 요소) 워드프레스에서 방문자나..

워드프레스에서 방문자나 고객으로부터 문의를 받고 싶은 경우 Contact Form 7이나 WPForms와 같은 문의폼 플러그인을 사용할 수 있습니다. 최근에는 테마나 페이지 빌더에 문의폼 기능을 추가하는 것이 추세 같습니다. 엘리멘터 페이지 빌더에서도 프로 버전에 Form 위젯이 탑재되어 별도의 컨택트 폼 플러그인을 사용하지 않고도 문의 양식을 추가할 수 있습니다. 워드프레스 엘리멘터 문의폼 위젯(Form 요소) 컨택트 폼 플러그인 vs. 테마/페이지 빌더에 탑재된 문의 폼 최근 들어서는 테마나 페이지 빌더에 컨택트 폼 기능을 내장하는 사례가 늘고 있습니다. 예를 들어, 베스트셀링 테마인 아바다 테마에서는 자체적으로 Avada Form이라는 문의폼 기능을 제공하고 있습니다. 테마나 페이지 빌더에 문의 폼..

워드프레스 컨택트 폼 플러그인 중 하나인 Gravity Forms를 사용한 문의 폼을 사용자가 제출한 후에 사용자가 입력한 내용을 사용자에게 표시하고 싶은 경우가 있을 수 있습니다. 예를 들어, 사용자가 입력한 정보에 따라 비용을 계산하는 견적서 양식을 만든 경우, 사용자가 모든 정보를 입력하고 "보내기"를 클릭했을 때 사용자가 입금해야 하는 비용 정보를 표시하고 싶은 경우가 있을 수 있습니다. 홍길동님, 신청서가 접수되었습니다. 다음 금액을 2일(영업일 기준) 이내에 입금해주시기 바랍니다. 입금할 금액: 50,000원 계좌: 샬라샬라... 밑줄 친 부분은 사용자가 입력한 데이터를 기반으로 정보를 가져와서 표시해야 합니다. 이런 경우 Gravity Forms에서는 Confirmation 설정에서 사용자가..

얼마 전에 컨택트 폼에서 2열로 필드를 표시하는 작업을 한 적이 있습니다. 비교적 쉽게 하려면 HTML 테이블을 이용하여 2열을 만들면 되지만, 이 경우 모바일에서는 반응형이 되지 않아서 단점이 있습니다. Div Table Generator 사이트를 활용하여 2컬럼으로 표시하는 것도 한 방법인 것 같습니다. 예: http://divtable.com/generator/ Contact Form 7 플러그인(무료)에서는 문의 양식을 만들 때 HTML 코드로 레이아웃을 짤 수 있습니다. 막코딩에 익숙한 경우 이 방법이 편할 것입니다. Contact Form에서 필드를 2열로 표시하기 (Quform) 만약 HTML과 CSS에 익숙하지 않으면 Quform 플러그인을 사용해도 괜찮을 것 같습니다. 위의 그림은 Div..

오늘 Quform으로 컨택트 폼을 만들었지만 메일이 발송되어도 스팸함으로 들어가거나 메일이 지연 발송되는 문제가 발생했습니다. 카페24에서 호스팅되는 워드프레스 사이트였는데, 동일한 상황에서 Siteground에서 호스팅되는 사이트에서는 아무런 문제 없이 메일이 제때에 잘 전송이 되네요. 이 문제를 해결하기 위해 SMTP를 지메일로 설정하여 메일을 전송하는 Easy WP SMTP 플러그인을 사용해보았습니다. 워드프레스 사이트에서 알림 이메일이 오지 않을 경우 메일은 제대로 전송이 되지만 다음과 같이 "차단된 로그인 시도 검토"라는 화면이 표시되네요.ㅠㅠ 카페24에 이 문제를 제기했는데 문제가 잘 해결될지 모르겠습니다. 참고: Quform 컨택트 폼 플러그인, 단계별로 양식을 입력할 수 있는 다중 페이지 ..

Contact Form 7은 워드프레스에서 인기 있는 무료 컨택트 폼 플러그인입니다. 이때까지 “on_sent_ok” 후크를 사용하여 양식 제출 후 이동할 URL을 쉽게 지정할 수 있었지만 이제 “on_sent_ok”를 입력하면 오류 메시지가 표시됩니다. on_sent_ok는 2017년 말까지만 사용되고 이후부터는 사용되지 않는다고 합니다. 이제부터는 대신 다음 스크립트를 페이지 템플릿에 추가하여 컨택트 폼 제출 후 다른 페이지나 URL로 리디렉션시킬 수 있습니다. 이제 조금 번거롭게 되었습니다. 양식 제출 후 동작을 쉽게 지정하려면 Quform을 사용해볼 수 있습니다. Quform에서는 매우 수월하게 양식 제출 후 동작을 지정할 수 있습니다. 참고: Contact Form 7에서 제출한 문의 글을 케이..

어제는 월말이어서 인보이스를 작성해야 하지만 다른 일로 바빠서 인보이스를 보내지 못했습니다. 해외에서는 인보이스를 받은 날로부터 날짜를 산정하여 결제를 해줍니다(보통 45일 혹은 익월 말). 그래서 인보이스를 보내지 못한 건은 결제가 1개월 정도 늦춰질 수 있습니다.ㅠㅠ 어제 컨택트 폼을 우리나라에서 많이 사용되는 형태로 바꾸는 작업을 했습니다. 위의 그림과 같이 페이지 하단에 빠른 상담 신청 폼이 표시되도록 했습니다. 디자인을 그래픽 파일로 클라이언트가 제공해주었습니다. 저는 HTML 코드로 적절히 표시되도록(즉, 가로로 표시) 하고 폼을 제출했을 때 케이보드 게시판에도 등록되도록 했습니다. 또, 사이드바에는 최근에 제출된 문의가 자동으로 위로 스크롤되는 기능을 추가했습니다. [자세히 보기]를 눌렀을 ..

오늘 Quform에서 케이보드 게시판으로 연동시키는 작업을 시도했지만 이상하게도 제대로 작동하지 않았습니다. 멀티사이트(Multisite)로 블로그가 설치되어 있어서 그런 것이 아닌가 추측해봅니다. (* 업데이트: Quform이 최근 버전 2로 업데이트되면서 많은 변화가 있었습니다. 그 때문에 기존 방식이 제대로 먹히지 않았던 것입니다. 새로운 방식으로 적용하면 가능합니다.) 그래서 어쩔 수 없이 Contact Form 7을 설치하여 컨택트 폼을 새로 만들어서 테스트해보니 잘 되네요. Contact Form 7은 멀티사이트를 완벽히 지원하는 것 같습니다. 개인용 폼과 단체용 폼 등 두 개의 폼을 만들고 Kboard 게시판도 두 개를 만들어서 연동시키는 작업이었습니다. 두 폼이 비슷해서 쉬울 줄 알았는데 ..