Quform을 이용한 Contact form 만들기

 Quform을 이용한 Contact form 만들기

일반적으로 워드프레스의 입력폼 플러그인은 Contact form7을 가장 많이 이용하지만, 기본 기능외 응용하려면 다소 어려움이 있습니다. 여기서는 다양한 기능을 구현하기 위해 Quform이라는 유료플러그인($25)을 사이트에 적용시켜보도록 하겠습니다.

Quform는 워드프레스 사이트를 쉽고 빠르게 여러양식을 구축할수 있는 플러그인으로 복잡한 양식도 소스를 건드리지 않고 아주쉽게 자신이 원하는 폼으로 구현할 수 있습니다. 다시 말해 예약&접수 시스템을 가장 쉽게 체계화 할 수 있는 플러그인으로 보면 됩니다.

Quform1

<그림 – Quform 홈페이지 접속>

[Live Preview]를 클릭해서 보면 아래그림에서 보는 바와 같이 밝은배경, 어두운배경, 고객설문조사, 웨딩청첩장, 예약서비스, 멀티파일업로드, 팝업폼 등 다양한 형태의 픔으로 가능하다는 것을 보여주고 있습니다.

Quform2
<그림 – Quform 의 다양한 기능 예시 화면>

이제 실제로 결제와 설치를 진행해서 간단한 신청폼을 실제로 만들어 보도록 하겠습니다.
먼저 Quform 을 결제한 다음 파일을 다운받고 자신의 알림판>플러그인설치>에서 플러그인을 설치합니다. 그럼, 아래그림과 같이 알림판에 Quform 메뉴가 생긴 것을 확인할 수 있습니다.

Quform3
<그림 – Quform 메뉴 생성>

여기서 아래그림과 같이 [Quform] [Form Builder]를 클릭하면 새로운 창이 생깁니다.
그 다음에 빈 공란에 새로운 폼의 제목을 입력하면 됩니다.

Quform4
<그림 – Quform 폼 제목 입력하기>

그러면 아래와 같은 그림이 나타납니다. 다음으로는 우측에 있는 메뉴에 보면 [Popular]탭과 [More]탭이 있습니다.

Quform5
<그림 – Quform 기본 화면구성>

여기서 각 메뉴의 기능은 다음과 같습니다.
+ Single Line Text : 한칸짜리 박스
+ Paragraph Text : 많은글을 적을 수 있는 박스
+ Email Address : 이메일 주소 입력 박스
+ Dropdown Menu : 드롭다운 메뉴
+ Checkboxes : 여러 개중 한 개만 체크해야 하는 체크 박스
+ Mutiple Choice : 여러 개를 동시에 선택할 수 있는 박스
+ CAPTCHA : 스팸방지를 위해 숫자+단어를 입력시켜 스팸을 방지하기 위한 옵션
+ Group :여러폼을 묶어서 그룹으로 설정이 가능한 기능
+ Preview : 작업 중간중간에 미리보기를 할 수 있는 기능

Quform 기본화면 왼쪽 상단에 있는 [Settings]를 클릭합니다. 그러면 아래와 같이 기본설정을 할 수 있는 화면이 나옵니다.

Quform6
<그림 – 생성할 폼의 기본설정>

여기서의 설정값은 생성할 폼에 대한 설명하는 부분과 아래에 Successful submit options는
폼양식에 맞게 입력을 완료했을 때 알려주는 메시지 내용을 어떤 내용으로 적을 것인지 정하는 곳입니다.

자, 그럼 이제 설정이 다 끝났고, 마지막으로 페이지에서 새로운 페이지를 생성한 다음
[업로드/넣기] 우측에 있는 [Quform]을 클릭 한 다음 자신이 만든 폼명을 선택해주면 됩니다.
Quform7

Quform8

<그림 – Quform 페이지에 등록 >

그런 다음 사이트에서 실제로 보면 아래와 같이 완료된 것을 확인할 수 있습니다.

Quform9
<그림- Quform으로 만든 폼 사이트에서 구현된 화면>

그리고 실제로 사이트에서 입력하면 입력된 결과를 아래 그림과 같이 [알림판] [Quform] [Entries]에서 확인할 수 있다.

Quform10
<그림- Quform Entries에서 실제 홈페이지에서 등록한 결과 확인>

Share the Post

About the Author

Comments

No comment yet.


Warning: strpos() expects parameter 1 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 190

Warning: preg_match() expects parameter 2 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 201
Leave a Reply

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

장바구니

  • 장바구니에 상품이 없습니다.

로그인