6秒CVマーケ

マーケティングに関するあれこれを記録しています。

Instapageのフォームでプルダウンのデフォルト選択肢の文言を変える

Instapageのフォーム、エラーメッセージの日本語化もできて結構便利なのですが、柔軟性が低めなので少し困ることも。

そのうちの1つが、input type を pulldown でフォーム項目をつくると、デフォルトの選択肢が「-- Select one --」になってしまうことでした。

 

f:id:bombomprin:20220121005034p:plain

↑こうなってしまう

 

  1. -- Select one --を日本語化する
  2. 設定したoptionのひとつをデフォルトとして設定する

のどちらかが出来ないかなーと思って問い合わせたりしてみたところ、2は出来ず、JSを使って1をやる形なら出来るとのこと。

デフォルト文言を日本語化するJavascriptのコード

実際のJSがこちらです(head内に書きます。headのJSは、編集モードの「Settinngs」内にある「Javascript」の箇所から編集できます。

<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('select option:first-child').text = '選択してください';
});
</script>

文言を変えたい場合、「選択してください」を別の文言に変更してみてください。

 

※2/2追記:↑だとプルダウンが複数あるとき1つ目しか文言が変更できないです。

複数ある際はこちら。

<script>
document.addEventListener("DOMContentLoaded", function() {
  var selector = document.querySelectorAll('select option:first-child');
  selector.forEach(function (a) {
    a.text = '選択してください';
  });
});
</script>

querySelectorではなくquerySelectorAllで要素取得して、forEachで回します。