【JavaScript】メール送信機能付き問い合わせフォームを作る【勉強】

中山テック 代表の中山です。

さて、ホームページは基本静的（動きが出せない）です。

アニメーションや状況に応じて動きを変えたい場合は「Javascript」を使用します。

使い方を知りたいけど、やり方がわからないといった方も多いのではないでしょうか。

今回はプラットフォーム「wordpress」でJavascript制御する方法をご説明したいと思います。

• プログラミング関連記事

JavaScriptをどこに記載すれば良いのか、疑問に思う方もいらっしゃると思います。

2パターン存在しますので、それぞれ説明したいと思います。

カスタムHTMLで直接記載

jsファイルをサーバに配置

<script src="https://nakayama-tech.com/wp-includes/js/nakayama-tech.js"></script>

お名前 ※必須
メールアドレス ※必須
電話番号
用件 ※必須	選択してください １．ホームページ制作・SEO対策 ２．ロゴ・バナー ３．ブログ ４．その他
詳細
本文

プルダウン（select）選択値で別項目のselectラベルを変える

<select style="border-radius: 10px;" id="youken" name="youken" onChange="yokenSelect()">
  <option value="0">選択してください</option>
  <option value="1">１．ホームページ制作・SEO対策</option>
  <option value="2">２．ロゴ・バナー</option>
  <option value="3">３．ブログ</option>
  <option value="4">４．その他</option>
</select>

～中略～

<select style="border-radius: 10px;" id="shousai" name="shousai" disabled></select>

function yokenSelect() {
  var yokenSel = document.getElementById('youken');
  var shousai = document.getElementById('shousai');
  var option1 = document.createElement('option');
  var option2 = document.createElement('option');
  
  shousai.removeAttribute("disabled");
  
  for (let i=shousai.childNodes.length-1; i>=0; i--) {
    shousai.removeChild(shousai.childNodes[i]);
  }⇒①
  
  if(yokenSel.value == "0") {
    shousai.setAttribute("disabled", true);
  } else if(yokenSel.value == "1") {
    option1.value = "1";
    option1.textContent = "新規";
    option2.value = "2";
    option2.textContent = "保守";
  } else if(yokenSel.value == "2") {
    option1.value = "1";
    option1.textContent = "見出し用";
    option2.value = "2";
    option2.textContent = "広告用";
  } else if(yokenSel.value == "3") {
    option1.value = "1";
    option1.textContent = "執筆";
    option2.value = "2";
    option2.textContent = "取材依頼";
  } else if(yokenSel.value == "4") {
    option1.value = "1";
    option1.textContent = "Excelレクチャ";
    option2.value = "2";
    option2.textContent = "プログラミング";
  }⇒②
  shousai.appendChild(option1);
  shousai.appendChild(option2);⇒③
}

• システム開発関連記事

「送信」ボタン押下後

<input type="button" value="送信" onclick="submit()">

  if(email.value == "") {
    alert("メールアドレスは必須です");
    return;
  }else if(name.value == "") {
    alert("名前は必須です");
    return;
  }else if(youken.value == "0") {
    alert("用件は必須です");
    return;
  }

<input style="border-radius: 10px;" type="text" name="onamae" id="onamae" placeholder="山田 太郎">

var shousai= document.getElementById('shousai');
　⇒オブジェクトを取得（ID）

var shousaiSelIdx = shousai.selectedIndex;
　⇒その中の選択されているオブジェクトのインデックス（何番目か）を取得


shousai.options[shousaiSelIdx].text
　⇒textでラベル指定
　　valueの3ではなく、「３．ブログ」が選択される

• プログラミング関連記事