Zendesk お問い合わせフォームの説明欄を非表示にする

#Zendesk

入井啓太

2023.02.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、ゲームソリューショングループの入井です。

今回は、通常の設定画面からは非表示にできないZendeskのお問い合わせフォームの『説明』欄について、JavaScriptを使って非表示にする方法について書いていきます。

『説明』欄とは

Zendeskには、設定画面で簡単な入力作業を行うことで手軽にお問い合わせフォームを作成できる機能があります。『説明』欄は、各フォーム作成時にデフォルトで用意されている複数行テキスト入力用のフィールドです。

以下の画像のようにリッチテキスト形式で入力できるようになっており、項目名も自由に設定することができます。

『説明』欄は設定画面から非表示にはできない

この『説明』欄、ユーザーへの入力負荷を減らすために回答を選択肢オンリーにしたい場合など、フォームの用途によっては不要なケースもあります。しかし、フォームの設定画面を開いても、非表示にするための項目は入力が無効化されています。

こちらのマニュアルに記載のある通り、フォームの一部の項目は設定内容に制限がかかっています。

一部のシステムフィールドはシステム内部に組み込まれており、設定を変えられません。

この説明はチケットに付けられる最初のコメントになります。

恐らく、『説明』欄に値が無い状態でチケットが作成されると、最初のコメントが上手く作成できないなど、システム的な不具合が発生してしまうため、入力を強制しているのだと思われます。

Zendesk公式による非表示方法

とはいえ、お問い合わせフォームには必ず『説明』欄を表示させる必要があるかというとそうでもなく、回避策も公式によって紹介されています。

Zendeskにはフォーム等のデザインをHTML/CSS/JSを使ってカスタマイズする機能があり、それを活用して『説明』欄を非表示にする方法が上記のページで紹介されています。

非表示の理屈としては単純で、『説明』欄のHTMLをHide状態にすることでユーザーからは見えなくしているだけです。また、『説明』欄は何らかの値の入力が必須のため、ユーザーの代わりにスクリプトで固定テキストを渡しています。

jQueryを使用しない方法

公式で紹介されている方法でもやりたいことは実現できるのですが、外部のライブラリであるjQueryをCDNでインポートする必要があり、たまにインポートが上手くいかず『説明』欄が表示されてしまうことがありました。また、Zendesk公式的にはjQueryの動作はサポート外であるため、こちらで管理責任を負わなければいけないというのも難点です。

そのため、私の場合は以下のように標準のJavaScriptコードを配置することで同様の処理を実現できるようにしました。

const descriptionForm = document.getElementsByClassName('request_description'); // 説明欄を取得
if (descriptionForm.length > 0) {
  descriptionForm[0].style.display='none' // 説明欄非表示
  document.getElementById('request_description').value = "description"; // 説明欄に文字列をセット 
}

上記のコードを実行させた状態でお問い合わせフォームの送信を行うと、以下のように1件目のコメントが付いてチケットが作成されます。