【JavaScript】メール送信機能付き問い合わせフォームを作る【勉強】
今すぐ無料ダウンロード!(スポンサーリンク)

代表からの切実なお願い
トラッキング「許可」お願いいたしますm(_ _)m

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

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

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

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

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





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

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

カスタムHTMLで直接記載

上記は「ホームページ制作お見積もりシミュレーター」ページのJavascriptです。

WordPressのカスタムHTMLを選択し、「<script></script>」タグ内に命令を記載します。

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

指定の位置にファイルを設置します。

そしてwordpress管理画面で「外観」→「テーマエディター」→「テーマヘッダー」の<head>タグ内に配置します。

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

ブラウザの開発者ツール(F12押下)でソースを確認します。

下記の通り、無事jsファイルの読み込みが成功しました。

※このやり方は全ページに適応されますので、ページでの制御は1つ目の方法で制御しましょう。

問い合わせフォーム

突貫設計書


「自作」の問い合わせフォームを当ブログに配置したいと思います。

今回は直接埋め込むパターンでやります。

※下記「送信」ボタンを押下すると中山テックへメールが送られます!

お名前
※必須
メールアドレス
※必須
電話番号
用件
※必須
詳細
本文

解説

メールを送る方法についてはまた別ブログで紹介いたします。

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

1~4までの選択肢を用意しました。

このプルダウン(select)のHTMLの作成方法としては下記のとおりです。

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

~中略~

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

「onChange」はプルダウンの中が変更された時にどうするかを記述します。

ここでは「yokenSelect」というJavascriptの関数を呼びだしています。

そしてyokenSelect内の記述ですが

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);⇒③
}

「shousai」は要件に応じて動的にプルダウンを作成するための「箱」と思ってください。

①は選択肢をリセットしています。

この記述がないと延々と選択肢が増えていきます(汗

②は設定値となります。

valueは選択されたプルダウンの値、textContentはホームページに表示される値です。

なくてもいいのですが、制御が必要になった場合は数値で持っておくとプログラミングしやすい利点があります。

③はリストに追加する命令です。

元々設定されていなかったものを「執筆」「取材依頼」で追加しました。

※3.ブログを選択した場合

  • システム開発関連記事

「送信」ボタン押下後

クリックしたらJavascriptのfunctionを起動するようにしました。

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

先ほどは「onchange」でしたが、今回はボタンのため「onclick」でJavascriptのfunctionを起動しています。

そして必須項目は「入力されていなければエラー」という形でチェックしております。

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

メール送信は「SmtpJS」というFW(フレームワーク)を使用しています。

使い方を執筆しましたので、是非こちらのブログをご覧ください!

実践

入力するBOXに例が記載されていますが「placeholder」で設定可能です。

何かしら入力すると例は消えますのでご安心を。

また、無機質にならないようにTEXTの角を丸くしてます(border-radius)。

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


入力後、送信ボタンを押下します。

すると下記のダイアログが出てきますので「OK」を押下するとメール送信します。

送信完了したら「OK」と出ます。

早速メールをチェックしてみると・・・

非常に簡単ではありますが、自前の問い合わせフォームが完成しました!

また、プルダウンで選択した文字列(テキスト)を表示させたい場合。

※value値3ではなく、「3.ブログ」の文字列を表示させたい場合

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

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


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


まとめ

JavascriptはHTMLファイルに直接書き込む、jsファイルに記載しサーバに置くという方法があります。

今回はHTMLに直接プログラミングしましたので、ページ⇒右クリック→「ページのソースを表示」でご確認ください。

ページに動きを付けたい方は是非、HTML+Javascriptを勉強してみて下さい。

最後までご覧頂き、ありがとうございました。

  • プログラミング関連記事
※中山テックに掲載しているゲーム画像の著作権、商標権、その他知的財産権は、当該コンテンツの提供元に帰属します


Anker PowerCore 10000 (10000mAh 大容量 モバイルバッテリー)【PSE技術基準適合/PowerIQ搭載】 iPhone&Android対応 (ブラック)

新品価格
¥2,990から
(2024/1/20 01:31時点)

おすすめの記事