Processing Forms With phpPress, goPress, rubyPress, and nodePress

Now that you have a web site using a flat file system, you would like to get some feedback from your users. Adding Disqus is easy since it’s all JavaScript code added to the page, but it isn’t what you want. You want them to be able to email you directly so that you can reply just to them. 

You could create an all JavaScript system to email directly from the user’s computer, but that leaves your email open to spammers able to retrieve it from your code and sell it to other spammers. Therefore, you need to hide your email address on the server.

This tutorial is about adding an email message system to your new PressCMS (i.e. phpPress, rubyPress, nodePress, and goPress). I am starting with the front-end and then addressing the back-end for each system. I am assuming you already have these servers on your system.

How to Create the Form in the Browser

Since the front-end code will be the same for each server, you will have to copy these new files to each of the server directories. Therefore, I will talk about the files in the path as referenced from the server directory.

Instead of adding form-specific styling to the theme, this form script has everything in one place. Create the file questions.html in the site/parts directory for the web site with the following content:

This creates a basic form asking for a full name (first and last name), email, and a message. This form uses regular expressions to ensure that the name and email address are valid. If whatever the user inputs into those fields does not match the regular expression in the pattern directive, then the form will not be submitted. A popup will ask the user to properly fill in the field with the message in the title parameter. Each input field has the required primitive as well. This keeps blank forms from being submitted. This is the bare minimum data validation you should use on the front-end.

The action directive in the form element tells the web browser what address to submit the form data to. The method directive tells the browser to send as a post method. The form data will be placed into the URL of the post request to the server. This is a Query String. The server then processes the information in the query string.

In the site/pages directory, create the file contact.md and place this code:

Once saved, you can try out the pages in the server. In your browser, open the page http://localhost:8081/contact.

Contact Form Page
Contact Form Page

The Contact Us page will look like the above picture. Notice the highlighting of the Name field directly upon loading. The autofocus directive creates this desired behavior. It is always good design to have the first field the user needs to type into focused automatically.

After sending the message, a confirmation message to the user would be nice. In the site/pages directory, create the file messagesent.md and place this code:

Just a simple message so that the user knows the message was properly sent. You can expand upon this as you like.

Message Sent Confirmation Page
Message Sent Confirmation Page

Processing the Form With goPress

To sanitize the message given by the user, I am using the Blue Monday library. To load that library on your system, you need to run this command line:

This will make the library available for your program. That is the only non-standard library needed.

Open the goPressServer.go file and add this to the top of the file inside the import () statement:

Emailing messages from the server requires these libraries. After the line that has goPress.DefaultRoutes( function call, add the following code:

This sets a post route of /api/message to run the function postMessage(). At the end of the file, add this code:

These two functions make up the handler for processing emails sent from the browser. The /api/message route calls the postMessage() function. It retrieves the information sent from the form filled in by the user, sanitizes the message with the BlueMonday library, and sends an email to the owner of the site using the sendEmail() function. You will have to put your Gmail address in place of the <your email address> holder and the password in the <password> holder.

In the goPress.go file, add this function after the SetGetRoute() function:

This function is exactly like the SetGetRoute() function. The only difference is using the web.Post() function.

With these changes, your goPress server can now send your emails from the user.

Processing the Form With nodePress

To send emails from node, you will need to first install the nodemailer library and the body-parser library with the following command line:

Then you need to load the new libraries and configure the mailer object. At the top of the nodePress.js file, after the last library loaded, add these lines:

This will load the nodemailer library and set up the reusable component for sending emails. You have to replace <your email name> with the name of your email address (i.e. before the @ symbol), <your email domain> is the domain for your email address (i.e. gmail.com for normal gmail or your domain name if you have gmail set up on your domain name), and <your password> with the password for your email account.

After the line that initializes the nodePress variable, add this code:

Now, after the last nodePress.get() function call, add this code:

This is the handler for the /api/message address. This function gets the information sent from the form, creates the proper email message, and sends it to the email address given in <your email address>. After sending the email, it will send the user to the /messagesent page. The body parser middleware has the url parameters saved into the request.body variable and properly sanitized.

This code works for Gmail setup without two-factor authentication. If you have two-factor authentication, you can refer to the Nodemailer documentation to set it up.

Processing the Form With rubyPress

To send emails in Ruby, you will need to install the ruby-gmail library with the following command line:

Depending on your Ruby setup, you might need to use sudo in front of the command. Now to load the library, add the following line to the top of the rubyPress.rb file:

After all the get definitions, add the following lines:

With these additions, your rubyPress server can process email forms. Once you change <your email address> to your email address and <your password> to the password for your email server, the script is finished.

Processing the Form With phpPress

The last server to modify is the phpPress server. To add email capabilities to the server, I am going to install the phpmailer library. This is the most widely used library in PHP for working with emails. To install the library, you need to run these command-line commands in the phpPress directory:

Unfortunately, the composer update will update the LightnCandy library. This is good because it is much faster and easier to use. But it breaks the server code. In the index.php file, locate the ProcessPage() function and replace it with the following code:

Comparing it with the older code, you no longer have to work with a temporary file. It is all done in memory and is therefore much faster. Now, at the top of the index.php file, add this after the Jade library:

This loads the phpmailer library. Now, after the last $app->get() function, add this code:

This is a post request handler for the /api/message path. It retrieves the form data sent from the browser, creates an email with it, and sends the email. PHP automatically takes any URL parameters and places them in the global array $_POST.

You will have to replace <your email address>, <your password>, and <your name> with the appropriate values for your email. If you are using something other than a Gmail SMTP server, you will need to change the $mail->Host address as well.

Conclusion

I have shown you how to easily add an email form to a pressCMS site. The download for this tutorial has all of these servers with their modifications. You can therefore download it instead of typing. I’ve done a little error handling. I’ll leave the rest up to you as an exercise.

The method I taught here is by posting form data with the data in the URL. Many sites nowadays use a REST API with the data in a JSON string in the body to perform the action. These routines are easily adopted to that methodology, but that is an exercise for you (or maybe a future tutorial). Now that you know how to do it this way, add your own forms to your site. This type of customizing is a lot of fun. The only limit is your imagination.

Tags:

Comments

Related Articles