ContactUs Form

This is a simple form created using apps script. After filling the form, when user hits submit, Site Owner will  receive a mail along with the details submitted by the user. This form validates all the three fields.

Example Demo:

*This is just for demo, Message sent through this form will not be delivered to author of the page/website.*

Example Code:

//Global Variables

adminsEmail = 'Your Email'// Plz change the email address 

function doGet() {

  //Create User Interface and Style the form Elements

  var app = UiApp.createApplication();

  var panel = app.createVerticalPanel();

  var statusmessage = app.createLabel("Thanks for Contacting, We have received you message and will reply you ASAP")

      .setStyleAttribute("fontSize", "14px")

      .setStyleAttribute("fontWeight", "bold")

      .setStyleAttribute("display", "block")

      .setStyleAttribute("textAlign", "center")

      .setStyleAttribute("color", "#008000").setVisible(false).setId('response');

  var grid = app.createGrid(4, 3).setId('maingrid');

  var nameLabel = app.createLabel("Name:").setWidth("80px");

  var nameTextBox = app.createTextBox().setStyleAttribute("width", "230px")

      .setStyleAttribute("backgroundColor", "#99FFCC")

      .setStyleAttribute("border", "1px solid #008000").setName('name').setId('name');

  var nameRequiredLabel = app.createLabel("*").setId('namerequired');

  var emailLabel = app.createLabel("Email:");

  var emailTextBox = app.createTextBox().setStyleAttribute("width", "230px")

      .setStyleAttribute("background-color", "#99FFCC")

      .setStyleAttribute("border", "1px solid #008000").setName('email').setId('email');

  var emailRequiredLabel = app.createLabel("*").setId('emailrequired');

  var messageLabel = app.createLabel("Message:");

  var messageTextArea = app.createTextArea().setStyleAttribute("width", "230px")

      .setStyleAttribute("backgroundColor", "#99FFCC")

      .setStyleAttribute("border", "1px solid #008000")

      .setStyleAttribute("height", "60px;").setName('message').setId('message');

  var messageRequiredLabel = app.createLabel("*").setId('messagerequired');

  var submitButton = app.createButton("Submit").setHeight("20px")

      .setStyleAttribute("fontSize", "12px");

  var resetButton = app.createButton("Clear Form").setHeight("20px")

      .setStyleAttribute("fontSize", "12px");

  var buttonGrid = app.createGrid(1,2);

  buttonGrid.setWidget(0, 0, submitButton)

    .setWidget(0, 1, resetButton);

  grid.setWidget(0, 0, nameLabel)

    .setWidget(0, 1, nameTextBox)

    .setWidget(0, 2, nameRequiredLabel)

    .setWidget(1, 0, emailLabel)

    .setWidget(1, 1, emailTextBox)

    .setWidget(1, 2, emailRequiredLabel)

    .setWidget(2, 0, messageLabel)

    .setWidget(2, 1, messageTextArea)

    .setWidget(2, 2, messageRequiredLabel)

    .setWidget(3, 1, buttonGrid);

  panel.add(statusmessage).add(grid);

  app.add(panel);

 //Controles and click handler

  var submitHandler = app.createServerClickHandler('validateAndMail');

  submitHandler.addCallbackElement(nameTextBox)

    .addCallbackElement(emailTextBox)

    .addCallbackElement(messageTextArea);

  submitButton.addClickHandler(submitHandler);

  var resetHandler = app.createServerClickHandler('resetFields');

  resetHandler.addCallbackElement(nameTextBox)

    .addCallbackElement(emailTextBox)

    .addCallbackElement(messageTextArea);

  resetButton.addClickHandler(resetHandler);

  return app;

}

function validateAndMail(e){

  var flag = 0;

  var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

  var app = UiApp.getActiveApplication();

  var name = e.parameter.name;

  var email = e.parameter.email;

  var message = e.parameter.message;

  app.getElementById('namerequired').setText("*");

  app.getElementById('emailrequired').setText("*");

  app.getElementById('messagerequired').setText("*");

  if (name == ''){app.getElementById('namerequired').setText("*Name is required").setStyleAttribute("color", "#F00");flag = 1;}

  if (email == ''){app.getElementById('emailrequired').setText("*Email is required").setStyleAttribute("color", "#F00");flag = 1;}

  if (email != '' & emailPattern.test(email) == false){app.getElementById('emailrequired').setText("*Please enter a valid Email").setStyleAttribute("color", "#F00");flag = 1;}

  if (message == ''){app.getElementById('messagerequired').setText("*Message is required").setStyleAttribute("color", "#F00");flag = 1;}

  if(flag == 0){

    MailApp.sendEmail(adminsEmail, '[Google Apps Script Example]: '+name+' has contacted through the site form', 'textBody', {htmlBody: '<b>Hi</b><br/>'+message+'<br/>Please reply on my mail:'+email,replyTo: email});

  app.getElementById('response').setVisible(true);

  app.getElementById('namerequired').setText("*");

  app.getElementById('emailrequired').setText("*");

  app.getElementById('messagerequired').setText("*");

  app.getElementById('maingrid').setVisible(false);

  }

  return app;

}

function resetFields(e){

  var app = UiApp.getActiveApplication();

  app.getElementById('name').setValue('');

  app.getElementById('email').setValue('');

  app.getElementById('message').setValue('');

  app.getElementById('namerequired').setText("*");

  app.getElementById('emailrequired').setText("*");

  app.getElementById('messagerequired').setText("*");

  return app;

}