HTML로 코딩 하면서 가장 어렵고 까다로운 부분이 form 태그 부분입니다. form안에는 input 태그와 label 태그를 이용해서 양식에 들어갈 입력란을 만들고 양식의 내용이 어떤 것이냐에 따라서 text, checkbox, radio, textarea, button, 등 여러가지 형태로 만들어집니다. 만들어 놓고 이를 레이아웃하여 정렬하는 것도 어렵죠. 그래서 전통적인 테이블 레이아웃을 많이 사용합니다. 테이블 레이아웃이란 table 태그를 이용해서 tr, td로 셀을 만들고 셀 안에 들어갈 것을 배치합니다. 이렇게 만들어진 레이아웃은 수정을 하려면 아주 어렵습니다. 일정한 폭이 정해져 있어서 반응형 디자인에서는 사용할 수도 없습니다. 그래서 웹표준에서는 테이블 레이아웃을 사용하지 말것을 권장하고 있습니다. 테이블 태그는 테이블 형태의 데이터, 예를들면 통계표 같은 것에만 사용해야합니다.
워드프레스 젯팩 플러그인의 컨택트 폼은 이러한 어려운 폼을 간단하게 만들어주며 페이지나 포스트에 설치하기만 하면 바로 사용할 수 있습니다. 그 기능이란 예를 들어 블로그나 사이트의 방문자가 어떤 사항에 대해서 자세한 상담을 원할 때 폼 양식에 자신의 정보를 입력하고 전송 버튼을 클릭하면 사이트 관리자에게 이메일로 발송되는 동시에 관리자 화면에서도 열람할 수 있도록 하고 있습니다.
이러한 컨택트 폼은 여러가지 플러그인이 있지만 워드프레스 젯팩 플러그인에 포함된 컨택트 폼이 가장 사용하기 편리합니다. 이번 글에서는 워드프레스 젯팩 플러그인의 컨택트 폼 사용법에 대해 알아보고 부트스트랩을 이용해서 정렬하고 반응형 디자인에 적용하는 방법을 알아봅니다.
컨택트 폼은 글의 마지막에도 삽입할 수 있지만 주로 사용하는 곳이 페이지이므로 상담신청이라는 페이지를 하나 만듭니다. 제목을 입력하고 텍스트 편집기 우측 상단에 있는 HTML탭을 클릭한 다음, 좌측 상단에 있는 "사용자 정의 양식 추가" 아이콘을 클릭합니다. 이 아이콘이 안보인다면 워드프레스 젯팩 플러그인 사용하기 시리즈의 첫번째 글을 참고해서 설치하시기 바랍니다.
폼 생성기 팝업창이 나타나면 좌측에는 이미 만들어진 폼이 있고 우측에는 설명이 있습니다. 폼의 하단에서 "새 필드 추가하기" 링크를 클릭하면 우측에 수정할 수 있도록 입력란이 나타납니다. 좌측의 폼에서 각 필드에 마우스를 올리면 "이동하기"와 "편집" 링크가 나타납니다. 이동하기에 마우스를 올리고 클릭 드래그하면 위치를 변경할 수 있습니다. 여기서는 법률회사의 상담신청 양식을 만들 것이므로 우측의 라벨의 새 입력란에 "생년월일"을 입력합니다. 막연히 "생년월일"만 입력하면 사용자가 어떤 형식으로 입력할지 생각해야하므로 예를 넣어 주는 것이 좋습니다. 그래서 "생년월일(예:960101)"로 입력하고 필드형태는 텍스트를 선택합니다. 이 필드형태를 필수로 항목으로 하려면 "필수인가요?"에 체크합니다.
다시 "새 필드 추가하기" 링크를 클릭하고 이번에는 라벨에 "휴대폰(예:010-1234-5678)"로 입력하고 필드형태는 텍스트로 선택, "필수인가요?"에 체크합니다.
"새 필드 추가하기"를 선택하고 라벨에 "교통사고"를 입력한 다음, 이번에는 필드형태를 체크박스로 선택합니다. 나머지 두개의 "채권추심", "산재"도 마찬가지로 체크박스로 만들고나면 "새 필드 추가하기" 링크가 안보입니다. "이 폼을 내 글에 추가하기" 버튼을 클릭하고 다시 폼 생성기로 들어와서 계속 추가할 수 있지만 텍스트 편집기에서 편집할 수 있으므로 여기서는 아래처럼 배치만 합니다.
처음 만든 필드를 클릭 이동하면 그 아래 있는 필드로 같이 따라갑니다. "이 폼을 내 글에 추가하기" 버튼을 클릭합니다. 폼 생성기 탭 우측에 있는 "이메일 통지" 탭을 클릭하면 받는 사람의 이메일과 제목을 만들 수 있으며 설정하지 않으면 글작성자의 이메일로 통보됩니다.
텍스트 편집기에 각 필드가 좌우로 정렬되어 편집하기에 헷갈리므로 위처럼 대괄호를 기준으로 엔터키를 쳐서 위아래로 정렬하면 보기도 좋고 편집도 편리합니다. 편집하자면 편집기의 화면이 위아래로 공간이 많아야 하므로 주메뉴에서 설정-->쓰기에 마우스를 올리고 우클릭하여 "새 탭에서 링크 열기"를 선택하면 글 쓰기 상자의 크기를 설정할 수 있는 화면이 나옵니다. 50줄로 입력하고 저장한 다음 다시 이 페이지로 돌아와서 새로고침하면 높이가 늘어납니다.
보통 HTML 코드는 각진 괄호( < > )를 사용하는데 위에서 보면 대괄호를 사용합니다. 이것은 워드프레스에서 사용하는 숏코드(Shortcode)로서 워드프레스 함수에 의해 만들어집니다.
위 상태에서 실제로 작동이 되는지 시험해보겠습니다. 우선 우측의 공개하기 메타박스에서 공개하기 버튼을 클릭하고 블로그 화면으로 가면 메뉴가 생성돼 있습니다. 이전 글에서 소개한 테마를 사용하는 경우, 이 테마는 사용자 정의 메뉴를 사용하므로 메뉴에 자동으로 만드어지지 않습니다. 외모-->메뉴로 가서 페이지 메타박스에서 지금 만들어진 상담신청을 메뉴에 추가해야합니다.
메뉴에서 상담신청을 클릭하면 위처럼 나타납니다. 각 입력란에 입력하고 전송 버튼을 클릭합니다.
발송 후에 위처럼 메시지가 나옵니다.
주 메뉴에서 피드백을 선택하면 위처럼 나옵니다.
이메일을 확인하면 메시지가 도착해 있습니다.
필드 추가 및 편집하기
위에서 만든 양식에 다른 필드를 추가하려면 다시 폼 생성기로 들어가서 생성하면 이미 만들어진 폼에 추가되지만 이미 있는 폼을 복사해서 변경해도 됩니다.
주소란을 만들려면 주소와 같은 것은 글자에 해당하므로 input type이 text입니다. 그래서 생년월일 부분을 복사해서 빈줄을 만들고 붙여넣은 다음 label 부분을 수정합니다. 같은 방법으로 "이혼"과 "의료사고"를 "산재"에서 복사해서 붙여넣고 글자를 수정합니다. 이처럼 필드의 형태는 각각 다른 type를 사용합니다.
위와같이 필드를 늘리다보면 위아래로 아주 긴 양식이 돼서 폼이 보기 좋지 않습니다. 그래서 좌우로 배치하는 것이 좋죠. 하지만 CSS로 수정한다는 것이 여간 복잡한 것이 아닙니다. 필요하신 분을 위해 작업해보기로 합니다. 이전 글에서 소개한 테마는 트위터 부트스트랩으로 만들어진 것이므로 부트스트랩의 코드를 사용하면 CSS를 많이 추가하지 않고도 가능합니다.
우선 부트스트랩에서 위아래로 배열된 것을 좌우로 정렬하려면 다음과 같은 형태의 HTML로 코딩돼야합니다. 트위터 부트스트랩에 대해서는 이곳을 참고하시고 제 블로그의 메뉴에서 부트스트랩을 선택하면 번역이 진행되고 있습니다. 아래 화면은 메뉴에서 부트스트랩-구조-그리드시스템에 있는 항목입니다.
위 부트스트랩 코드를 폼의 한줄에 적용하면 다음과 같습니다.
위처럼 입력하고 미리보기를 하면 다음과 같이 두개의 필드가 좌우로 정렬됩니다.
그러면 나머지 부분도 정렬해봅니다.
좌우로 정렬할 부분만 부트스트랩 코드를 삽입하면 됩니다. 체크박스 그룹은 span2로 설정하고 상단에 h4 태그로 관심사항을 입력합니다. 여기까지 하면 아래처럼 원하는대로 정렬돼 나옵니다.
그런데 문제는 이것이 반응형 디자인이다보니까 화면을 축소했을 때 위 필드들이 반응하지 않고 크기가 그대로 유지되어 레이아웃이 아래처럼 엉망이 됩니다.
하지만 더 줄이다보면 아래처럼 위아래로 배치됩니다. 그러니 위처럼 나오는 것을 수정해줘야합니다. 이것은 이미 테마에 설정돼 있는 미디어쿼리를 이용하면 해결됩니다.
미디어쿼리는 CSS3의 규칙으로 화면 사이즈에 맞도록 콘텐츠가 나타나도록 하는 기능을 하는 모바일 웹디자인에서 필요한 것입니다. 테마에는 아래처럼 여러 개의 화면 사이즈를 설정해놓고 각 사이즈에 해당하는 CSS를 입력하면 해당 CSS명령이 적용됩니다.
@media (max-width: 479px) {
}
@media (min-width: 480px) and (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (min-width: 980px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}
미디어쿼리에 관한 내용도 부트스트랩에 정의되 있습니다. 그러면 처음으로 화면이 줄어드는 부분이 위의 아래에서 두번째이고 그 다음으로 줄어드는 부분이 세번째입니다. 이 구간에 대해 필드의 사이즈를 줄어들게 설정하면 됩니다.
줄어든 상태에서 요소검사를 하면 span4의 폭은 256픽셀입니다.
반면에 input 필드의 폭은 300픽셀이라서 부모요소인 span4를 초과합니다. 우측의 CSS 창에서 .contact-form input[type="text"]부분을 복사합니다.
테마-->편집기로 들어가서 미디어쿼리 설정부분에서 해당 사이즈에 맞는 부분에 붙여넣고 width를 수정합니다. 아래부터 240픽셀을 입력하고 !important를 추가합니다. 이것은 우선적용하도록 하는 CSS 규칙입니다. 그 다음 사이즈는 170픽셀로 입력합니다. 파일 업데이트 버튼을 클릭하고 블로그 화면에서 새로고침하면 줄어들어서 나타나고 화면 폭의 변화에 따라서 크기가 달라집니다.
처음으로 줄었을 때의 화면입니다.
그 다음 사이즈의 화면입니다.
아래는 위에서 사용한 코드입니다.
[contact-form].txt데모 사이트 --> http://webdesigncss3.com/?page_id=2699
