Applications‎ > ‎

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;
}
 
 

Comments