メール送信機能

2019-05-23

jekyllプロジェクトへformspreeサービスを利用してメール発送機能を追加して見ましょう。

概要

私たちはgithub pageでブログをサービスしています。jekyllで生成したStaticファイル(html, css, javascript)をgithub pageへアップロードすることでブログをサービスしてます。つまり、サーバーソースの生成や活用してないことです。そのため、一般的にサーバーを通じてメールを送信する簡単な機能もgithubとjekyllを使って作ったサイトでは利用することが不可能です。

formspreeサービスはこのようなStaticページにメール送信機能を無料で使えるように助けてくれるサービスです。このブログポストではformspreeを使ってjekyllでメールを送信する機能を作る方法を紹介します。

formspreeサービス

formspreeサービスは会員登録しなくても無料で使うことが出来ます。下記のリンクを押してサービスサイトに移動しましょう。

formspreeサービスを使う

formspreeサービスサイトへ移動したら下の画面が見ます。 formspree service site

左上のTry Formspree!を押します。

formspree test site

上の画面でEdit your form hereの部分を修正して実際自分が使うフォームを作成します。

<form method="POST" action="https://formspree.io/YOUREMAILHERE">

actionの部分に送信して貰うメールアドレスを入れます。

<form method="POST" action="https://formspree.io/dev.yakuza@gmail.com">

そして、右のTest it hereを通じて実際メールを送信して見ます。

メールを送信した後、formへ入れったメールが実際自分のメールがどうか確認するメールがformspreeから確認メールがきます。メールを開いて自分のメールことを証明します。

formspreeサービスを通じてメール送信機能をjekyllへ入れる準備が終わりました。

jekyllへformspree 適用する

上記で生成したhtml formソースをコピして_layout/contact.htmlへ入れます。テーマによってレイアウトファイルが違うかもしれないです。下記のコードは実際、私たちが使ってるソースです。

<form name="sentMessage" id="contactForm" novalidate action="https://formspree.io/dev.yakuza@gmail.com" method="post">
    <input type="hidden" name="_subject" value="블로그에서 새로운 연락이 왔습니다." />
    <input type="text" name="_gotcha" style="display:none" />
    <div class="control-group">
        <div class="form-group floating-label-form-group controls">
        <label></label>
        <input type="text" class="form-control" placeholder="" id="name" name="name" required data-validation-required-message="">
        <div class="help-block text-danger"></div>
        </div>
        <div class="form-group floating-label-form-group controls">
        <label></label>
        <input type="email" class="form-control" placeholder="" id="email" name="email" required data-validation-validemail-message="" data-validation-required-message="">
        <div class="help-block text-danger"></div>
        </div>
        <div class="form-group floating-label-form-group controls">
        <label></label>
        <textarea rows="5" class="form-control" placeholder="" id="message" name="message" required data-validation-required-message=""></textarea>
        <div class="help-block text-danger"></div>
        </div>
    </div>
    <br>
    <div id="success"></div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
    </div>
</form>
action="https://formspree.io/dev.yakuza@gmail.com"

formのactionへ_config.ymlに設定したメールを使うようにします。

<input type="text" name="_gotcha" style="display:none" />

上のコードでメールを送信する時、CAPTCHAを表示するように設定します。

<input type="hidden" name="_subject" value="블로그에서 새로운 연락이 왔습니다." />

メールのタイトルを設定します。

完了

全ての設定が終わりました。実際サイトでメールを送信して確認してください。

参考

Buy me a coffeeBuy me a coffee
Posts