워드프레스 일기의 큐폼 4

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

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

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

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