[워드프레스] 컨택트 폼에서 필드 미리 채우기

개요

워드프레스의 컨택트 폼 플러그인인 Contact Form 7이나 Quform에서 위의 그림과 같이 필드의 값을 미리 채울 수 있습니다. 위의 그림에서 (1)은 마우스를 가져다 대고 값을 입력하면 미리 채워진 글자가 사라지면서 새로 입력하는 내용이 입력되고 (2)는 필드의 값 자체가 입력되어 있어 마우스를 대면 입력된 값 뒤부터 입력이 가능하고 새로 값을 입력하려면 채워진 내용을 삭제한 후에 새로 입력해야 합니다.

Contact Form 7에서 필드 미리 채우기

Contact Form 7에서는 다음과 같은 형식으로 값을 미리 채울 수 있습니다.

<p>연락처 (필수)<br />
[tel* tel-268 placeholder "연락처"] </p>

<p>제목<br />
[text your-subject "문의입니다"] </p>

위와 같이 placeholder "연락처" 형식으로 입력하면 값이 미리 채워지지만 이 값은 필드의 값이 아닌 Placeholder 속성으로 채워집니다. 필드 값으로 미리 채우려면 "placeholder" 없이 [text your-subject "문의입니다"]와 같은 형식으로 입력하면 됩니다. 그러면 맨 위의 그림처럼 표시됩니다.

Quform에서 필드 미리 채우기

Quform에서는 각 필드의 Settings를 통해 값을 미래 채울 수 있습니다. 예를 들어, placeholder 속성을 지정하려면 아래 그림과 같이 "Settings"에서 Placeholder 옵션에 원하는 내용을 입력하면 됩니다.

값을 미리 지정하려면 Optional 탭을 눌러서 Default value에 값을 원하는 값을 입력하도록 합니다.

마치며

참고로 Contact Form 7의 경우 방문자가 고객이 웹을 통해 제출한 내용이 데이터베이스에 저장되지 않습니다. 간혹 이 때문에 중요한 문의 사항을 받지 못해 낭패를 당하는 경우를 봅니다. (예를 들어, Contact Form 7에서 이메일로 통지될 내용을 잘못 설정한 경우나 이메일이 전송되지 않는 문제가 발생하는 경우.)

이런 문제를 방지하려면 Quform과 같은 프리미엄 플러그인을 사용하거나 Contact Form에서 제출한 내용을 데이터베이스에 등록해주는 플러그인을 사용할 수 있습니다(참고). 또 다른 방법으로 입력한 내용을 KBoard와 연동시키면 보다 효과적으로 문의 사항을 관리할 수 있습니다. Flamingo라는 무료 플러그인도 있습니다. (하지만 보안상의 문제가 있는 것 같아서 이 플러그인을 설치했다가 삭제했습니다.) 여러 가지 방법 중에서 적당한 방법으로 컨택트 폼에서 발송한 내용을 데이터베이스에 저장하면 보다 안정적으로 관리할 수 있을 것 같습니다.