ドロップダウン要素のデフォルトのプレースホルダーテキストを変更する方法

ドロップダウン要素のデフォルトのプレースホルダーテキストをカスタマイズすることで、フォームをより明確でプロフェッショナルなものにし、顧客にとって理解しやすくすることができます。

一般的なプレースホルダーテキストを使用する代わりに、次のようなより意味のあるラベルを表示できます。

• あなたの国を選択
• サイズを選択
• 職業を選択してください
• 配送方法を選択してください

ドロップダウンリストのプレースホルダーテキストをカスタマイズする理由とは？

ドロップダウンリストのプレースホルダーテキストを更新することで、以下の点が改善されます。

• 形式の明確さ
• ユーザーエクスペリエンス
• フォーム記入率
• ブランドのプロフェッショナリズム
• お客様ガイダンス

明確なプレースホルダーラベルは、訪問者がフォームを送信する前に選択する必要のある情報を正確に理解するのに役立ちます。

これは特に次の場合に便利です:

• お問い合わせフォーム
• 登録フォーム
• 調査フォーム
• 製品カスタマイズフォーム
• マルチステップフォーム

あなたが始める前に

このチュートリアルを進める前に、以下のものがすべて揃っていることを確認してください。

• GemPagesで作成されたページ
• A ドロップダウン要素 あなたのページに追加されました
• GemPagesエディターへのアクセス

ステップ1：ドロップダウン要素を選択します

GemPagesエディターでページを開いてください。

プレースホルダーテキストを変更したいドロップダウン要素を右クリックします => カスタムコード.

ステップ2：スクリプトタブを開く

Video Cloud Studioで スクリプト タブ。ここで、選択した要素にカスタムJavaScriptを追加できます。

ステップ3：カスタムスクリプトを追加する

以下のコードを「スクリプト」タブに貼り付けてください。

document.addEventListener("DOMContentLoaded", () => {

  const currentElement = document.getElementsByClassName('{{rootClassName}}');

  現在の要素[0]

    .querySelector('option[disabled].gp-hidden')

    .innerText = '職業';

}）;

重要な注意事項

「職業」の部分を、表示したいプレースホルダーテキストに置き換えてください。

例：

「国を選択してください」

or

「サイズをお選びください」

結果：