Contact Form

September 15th, 2017

Create a contact form on your website hosted on a static site.

When you have a cheap shared server package from one of the giant hosting services, it can be hard to build a website that don’t involve giant Wordpress add-ons.

There are more efficient ways to do these things! One of those ways is a contact form to get feedback from your users, just like the contact form on my page!

See the Pen Contact Form by jordan rhea (@rheajt) on CodePen.

You just need to create a script on your drive and deploy it as a web app. You want to make sure that you Execute the app as yourself and make it accessible by Anyone, even anonymous. Then just use the code below. Be sure to put in your own data!

Code.gs

function doPost(e) {
  var json = JSON.parse(e.postData.contents);

  var response = sendMail({
    name: json.name,
    email: json.email,
    subject: json.subject,
    body: json.body,
  });

  return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(
    ContentService.MimeType.JSON,
  );
}

function sendMail(data) {
  try {
    var html = HtmlService.createTemplateFromFile('email');
    html.name = data.name;
    html.email = data.email;
    html.subject = data.subject;
    html.body = data.body;

    //This should probably be changed to the MailApp service now
    GmailApp.sendEmail('<<YOUR EMAIL ADDRESS>>', data.subject + '[CONTACT FORM]', '', {
      name: 'Contact Form',
      replyTo: data.email,
      htmlBody: html.evaluate().getContent(),
    });

    return {
      code: 'success',
      msg: "Thanks for contacting me! I can't wait to talk about #EdTech with you!",
    };
  } catch (err) {
    return {
      code: 'danger',
      msg: 'Something went wrong! Technology is not always pretty!',
    };
  }
}

email.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
  </head>
  <body>
    <h3>
      You are being contacted from your website by <b><?= name ?></b> at <b><?= email ?></b>
    </h3>

    <p>
      Time sent:
      <b
        ><?= new Date().toDateString() ?>
        at
        <?= new Date().toTimeString() ?></b
      >
    </p>

    <p>
      Subject: <b><?= subject ?></b>
    </p>

    <p><?= body ?></p>
  </body>
</html>