Using Google Forms to Pre-Register Members on Your Oxwall-Powered Site

Get your potential users hyped; let them register before you launch


Working with what’s a new software for myself, Oxwall, I decided that it’d be a great idea to pre-register members before I even launched the site. This will help gauge interest, build a little bit of hype (I hope), and allows me to utilize these awesome people to kick start the community. Since, you know, a social network script like Oxwall is meant for community building. This is essentially like building an email list, I suppose. I don’t know, I’ve never built one of those.

A lot of this guide will assume you know how to do basic things like start your Google Form. It can also be done with any software that can import CSV files, but I’m specifically talking about Oxwall on this post.

To begin, we’ll go ahead and spin that form up. It’ll be literally called “Google Form.” Go ahead and start adding the fields you want. To make it easy, I decided to go with UsernameReal Name, and Email Address. My screenshots will show the classic version of Google Forms because the new version is currently still a little buggy, at the time of this writing.

There she blows. Pretty much all of the settings that my form has. Note that everything up top is unchecked. If you’re not using Google Apps for Work, you might not see a couple of those options, which is fine. You can do all of this using a Gmail account.

After the form’s all set up and spiffy, go ahead and click on the Responses control up top and give your form a location to save its responses to. It will be a Google Spreadsheet that we’ll eventually export as a CSV (comma separated values) file. The last step would be import this CSV using Oxwall’s CSV Importer.

Open up that spreadsheet that you linked to your form, hit on that Tools button real nice-like, and then “Script editor…“. The below script will email both you and the form submitter that they’ve successfully signed up for your website. Copy and paste the entire thing over the example myFunction portion that’s already in there. The email will be sent from your Gmail address, so you might want to register a new one if yours is something like funkymonkey47@gmail.com. Then again, that’s a pretty awesome email address.

/* Send Confirmation Email with Google Forms */
 
function Initialize() {
 
  var triggers = ScriptApp.getProjectTriggers();
 
  for (var i in triggers) {
    ScriptApp.deleteTrigger(triggers[i]);
  }
 
  ScriptApp.newTrigger("SendConfirmationMail")
    .forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
    .onFormSubmit()
    .create();
 
}
 
function SendConfirmationMail(e) {
 
  try {
 
    var ss, cc, sendername, subject, columns;
    var message, value, textbody, sender;
 
    // This is your email address and you will be in the CC
    cc = "contact@beardprofile.com";
 
    // This will show up as the sender's name
    sendername = "Beard Profile";
 
    // Optional but change the following variable
    // to have a custom subject for Google Docs emails
    subject = "Your Beard Profile pre-sign up was successful!";
 
    // This is the body of the auto-reply
    message = "You've successfully sent your details. Your <strong>temporary</strong> password will be emailed to you when the site is opened in the coming weeks. <br>Thanks, and beard on!<br><br>";
 
    ss = SpreadsheetApp.getActiveSheet();
    columns = ss.getRange(1, 1, 1, ss.getLastColumn()).getValues()[0];
 
    // This is the submitter's email address
    // Make sure you have a  field called Email Address in the Google Form
    sender = e.namedValues["Email Address"].toString();
 
    // Only include form values that are not blank
    for (var keys in columns) {
      var key = columns[keys];
      var val = e.namedValues[key] ? e.namedValues[key].toString() : "";
      if (val !== "") {
        message += key + ' :: ' + val + "<br />";
      }
    }
 
    textbody = message.replace("<br>", "\n");
 
    GmailApp.sendEmail(sender, subject, textbody, {
      cc: cc,
      name: sendername,
      htmlBody: message
    });
 
  } catch (e) {
    Logger.log(e.toString());
  }
 
}

I even left mine as-is so you can see exactly what you should edit:

  •     cc = "contact@beardprofile.com";
    
  •     sendername = "Beard Profile";
    
  •     subject = "Your Beard Profile pre-sign up was successful!";
    
  •     message = "You've successfully sent your details. Your <strong>temporary</strong> password will be emailed to you when the site is opened in the coming weeks. <br>Thanks, and beard on!<br><br>";
    

Next, hit up your Oxwall installation and visit the maintenance page at /admin/pages/special-pages, make sure you enable maintenance mode, and then paste your Google Form iframe code in there. Boom!

Don’t forget you can customize your form template to better suit your own Oxwall theme, as seen in the example above. With a little CSS love on your .maintenance_cont class, and you’re good to go.

When it comes time to import your CSV, use the export function (Download as) on Google’s Spreadsheet. Right click it once you’ve downloaded it, then .zip it up. Upload it to Oxwall’s CSV importer, and select the correct profile field values to match your form’s values. It’s really that simple.

Oh, and of course you don’t even need to use your maintenance page like that, but I prefer doing so when the site is live on the web but still closed. I ended up choosing to share the sign up form directly through Google’s form (click) — the maintenance page was just to catch any strays.