JavaScriptだけで問い合わせフォームを作る

2023年12月27日 19:02

問い合わせフォームを作るとなるとサーバーサイドの言語を使用しないといけません
PHPやRubyであったりPythonなどですね
Googleフォームを使えば簡単に実装出来ますがこれだとデザインがそっけない・・・。
そんなときの救世主が「EmailJS」というプラグインですです

前提

今回はEmailJSというプラグインを使用します
このプラグインは無料プランと有料プランがあります
無料プランを使っていきますが制限があります
月に200件までしか取り扱いが出来ません
そこを注意してください
あとブラウザの翻訳は使わないでください

登録する

ここから登録をしてください
登録が終わりログインするとサービスを追加します

お試しなのででGmailで良いでしょう
選択するとこのような画面になります

ServiceIDはあとで使用しますがメモしなくてもいいです
いつでも見れますので

テンプレートを作る

次にメールのテンプレートを作ります
とはっても管理者側に届くメールのテンプレートなので雑でいいです
サイドバーの「Email Templates」から「Create New Template」をクリックします

ここから編集します
「Edit Content」をクリックし「Code Editer」を選択

全部消しましょう
そしてこれを入れてください

<p>{{user_name}}</p>
<p>{{user_email}}</p>
<p>{{message}}</p>

{{　}}の中には次に作るフォームのname属性を入れます
まぁ順序が逆ですがこれに沿ってフォームを作りましょう
デザインは無視します

フォームを作る

コピペしてください

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            // ここ変更します
            emailjs.init('YOUR_PUBLIC_KEY');
        })();
    </script>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById('contact-form').addEventListener('submit', function(event) {
                event.preventDefault();
              
                this.contact_number.value = Math.random() * 100000 | 0;
                // ここ変更します
                emailjs.sendForm('EMAIL_SERVICE_ID', 'EMAIL_TEMPLATE_ID', this)
                    .then(function() {
                        alert('送信されました');
                    }, function(error) {
                        console.log('FAILED...', error);
                    });
            });
        }
    </script>
</head>
<body>
    <form id="contact-form">
        <input type="hidden" name="contact_number">
        <label>Name</label>
        <input type="text" name="user_name">
        <label>Email</label>
        <input type="email" name="user_email">
        <label>Message</label>
        <textarea name="message"></textarea>
        <input type="submit" value="Send">
    </form>
</body>
</html>

こんなもんで良いでしょう

EmailJS側が用意しているテンプレを少し改良しています
送信が成功したらアラートで「送信されました」と出力しています
とりあえずこれがテンプレなので今後はコピペでOK

さて少し編集指定もらいます

scriptタグの中に「// ここ変更」と記述している部分がありますので変更していきます

// ここ変更します
emailjs.init('YOUR_PUBLIC_KEY');

あなたのパブリックキーを入力してください
左メニューから「Account」を選択
一番上に「Public Key」があるのでそちらをコピペ

// ここ変更します
emailjs.sendForm('EMAIL_SERVICE_ID', 'EMAIL_TEMPLATE_ID', this)

EMAIL_SERVICE_IDにはServiceKeyを入れます

これですね
左メニューの「Email Services」から確認できますのでそれをコピペ

EMAIL_TEMPLATE_IDはテンプレのキーを入れます
左メニューから「Email Templates」を選択し、先程作ったテンプレをクリック

そして画面上部の「Settings」からTemplateIDをコピペしてください

確かめる

では送信してみましょう

アラートが出たら成功

フォームから

送信者名
送信者アドレス
問い合わせ本文

が来てたら成功です

この記事が気に入ったらサポートをしてみませんか？