お問い合わせフォームを設置する

お問い合わせフォームを設置してみましょう。

CGIが実行できるレンタルサーバーで動いていることが条件です。

今回紹介するのは、件名とメールアドレスとメッセージを送信できるシンプルなメールフォームです。

お問い合わせフォームのHTMLとお問い合わせフォームのCGIを設定することで、動きます

お問い合わせフォームのHTML

お問い合わせフォームのHTMLです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {
    $('.mail-form button').on('click', function () {
      var form_values = $('.mail-form form').serialize();
      $.post(
        "/mail.cgi",
        form_values,
        function (data) {
          if (data.success) {
            $('.mail-form').html('<div class="mail-form-success">メッセージを受け付けました。送信ありがとうございます。</div>');
          }
          else {
            // エラーメッセージ
            var errors = data.errors;
            $('.mail-form-errors').empty();
            for (var i = 0; i < errors.length; i++) {
              var error = errors[i];
              var li = $('<li></li>');
              li.text(error);
              $('.mail-form-errors').append(li);
            }
          }
        },
        "json"
      );
    });
  });
</script>

<h2>お問合せフォーム</h2>
<div class="mail-form">
  <ul class="mail-form-errors">
  </ul>
  <form>
    <label>
      <div class="mail-form-title">
        名前:
      </div>
      <div class="mail-form-body">
        <input type="text" size=50 name="name"><br>
      </div>
    </label>
    <label>
      <div class="mail-form-title">
        メールアドレス:
      </div>
      <div class="mail-form-body">
        <input type="text" size=50 name="email">
      </div>
    </label>
    <label>
      <div class="mail-form-title">
        メッセージ:
      </div>
      <div class="mail-form-body">
        <textarea name="message"></textarea>
      </div>
    </label>
    <div>
      <button type="button">メッセージを送信</button>
    </div>
  </form>
</div>

これを、以下のファイル名で、配置してください。

templates/mail.html

お問い合わせフォームのCGI

お問い合わせフォームのCGIです。

「$mailto」の部分に、送信先のメールアドレスを指定してください。

#!/usr/bin/env perl

use strict;
use warnings;
use utf8;

use CGI;
use JSON::PP 'encode_json';
use MIME::Lite;

use Encode 'decode', 'encode';

my $q = CGI->new;

# Mail to
my $mailto = 'info@foo.example';

# Mail title
my $subject = 'サイトにメールが届いています';

# Errors
my @errors;

# Name
my $name = $q->param('name');
$name = decode('UTF-8', $name);
unless (length $name) {
  push @errors, "名前を指定してください。";
}

# Email
my $email = $q->param('email');
$email = decode('UTF-8', $email);

unless (length $email && $email =~ /\@/) {
  push @errors, "Eメールアドレスを正しく入力してください。";
}

# Message
my $message = $q->param('message');
$message = decode('UTF-8', $message);
unless (length $message) {
  push @errors, "メッセージを指定してください。";
}

# Response
my $res = <<"EOS";
Content-type: application/json;

EOS

my $res_data = {};

unless (@errors) {
  # Mail body
  my $mail_body = <<"EOS";
Name: $name
Email: $email
Message: $message
EOS

  # Send mail
  my $msg = MIME::Lite->new(
    From    => $mailto,
    To      => $mailto,
    Subject => encode('MIME-Header', $subject),
    Type    => 'multipart/mixed'
  );
  $msg->attach(
    Type     => 'TEXT',
    Data     => encode('UTF-8', $mail_body),
  );
  unless ($msg->send) {
    push @errors, "メールの送信に失敗しました。";
  }
}

if (@errors) {
  $res_data->{success} = 0;
  $res_data->{errors} = \@errors;
}
else {
  $res_data->{success} = 1;
}

# JSON response
my $res_json = encode_json($res_data);
$res .= "$res_json\n";

# Print response
print $res;

これを、以下のファイル名で、配置してください。

templates/static/mail.cgi

改行コードは「LF」で保存してください。

パーミッションは以下のコマンドで、「755」に変更してください。

chmod 755 templates/static/mail.cgi

Gitを使う場合以外で、公開サーバーに配置する場合は、公開サーバー上でも、改行コードをLFに、パーミッションを755に設定する必要があります。

Perl入門ゼミの「メールフォーム」も参考にしてください。