Set up an inquiry form

Let's set up an inquiry form.

It must be running on a rental server that can run CGI.

Introducing this time is a simple email form that allows you to send a subject, email address and message.

It works by setting the HTML of the inquiry form and the CGI of the inquiry form.

Inquiry Form HTML

HTML for the contact form.

<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"> Message accepted. Thank you for sending. </Div>');
          }
          else {
            // Error message
            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> Inquiry Form </h2>
<div class = "mail-form">
  <ul class = "mail-form-errors">
  </ul>
  <form>
    <label>
      <div class = "mail-form-title">
        name:
      </div>
      <div class = "mail-form-body">
        <input type = "text" size = 50 name = "name"> <br>
      </div>
    </label>
    <label>
      <div class = "mail-form-title">
        email address:
      </div>
      <div class = "mail-form-body">
        <input type = "text" size = 50 name = "email">
      </div>
    </label>
    <label>
      <div class = "mail-form-title">
        message:
      </div>
      <div class = "mail-form-body">
        <textarea name = "message"> </textarea>
      </div>
    </label>
    <div>
      <button type = "button"> Send message </button>
    </div>
  </form>
</div>

Place this with the following file name.

templates / mail.html

CGI of inquiry form

This is the CGI of the inquiry form.

Please specify the destination email address in the "$mailto" part.

#! / 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 ='Email has arrived at the site';

#Errors
my @errors;

#Name
my $name = $q->param('name');
$name = decode ('UTF-8', $name);
unless (length $name) {
  push @errors, "Please specify a name.";
}

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

unless (length $email && $email = ~ / \ @/) {
  push @errors, "Please enter your email address correctly.";
}

#Message
my $message = $q->param('message');
$message = decode ('UTF-8', $message);
unless (length $message) {
  push @errors, "Please specify a message.";
}

#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, "Failed to send email.";
  }
}

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;

Place this with the following file name.

templates / static / mail.cgi

Save the line feed code as "LF".

Change the permission to "755" with the following command.

chmod 755 templates / static / mail.cgi

If you want to place it on a public server other than when using Git, you need to set the line feed code to LF and the permission to 755 even on the public server.

Please also refer to " mail form" in the Perl introductory seminar.