DEV Community: Milan Maharjan

Build a custom Contact Form for your static website

Milan Maharjan — Sun, 12 Apr 2020 15:30:00 +0000

If your website doesn’t change that often and all the features you need can be implemented with a static site, then there is no point building a bulky dynamic site. After all static sites are fast, simple, costs low, easier to scale and more secure.

Being said that, sometimes we need some features that a static sites can’t offer. Getting data from a contact form is one of them. But there’s a very easy way to do that.

In this tutorial we will learn how to use google sheet as a backend to store the data submitted from a contact form and also send that information in email.

We’ll be using

GitHub Pages to host my static contact form (free)
Contact form template by Colorlib (also free)
Google App Script to use Google Sheet as data storage and send notification in email (also free)

We’ll first create a url to submit the contact form to. Let’s begin !

1) Open Google Sheet and create a new sheet.

2) Add the names of the input fields in your html form in the first row of the sheet. We’ll add sn, name, email, subject and message Field sn is auto generated serial number and this is not included in the html form.

3) Click Tools in menu bar, then click Script Editor

4) This will open a script editor page. Copy the following code and paste it in the script editor. This script will listen for a POST request and add the submitted data as a new row in the google sheet and also send notification email. Don't forget to replace the email address in the script with yours. It's in the last line of the script.

5) Save the script. Then click Run > Run function > setup It will then ask for permission to access your google sheet and gmail. Just allow it. Then click Publish > Deploy as web app Set project version as new, execute the app as me and who has the access to app as Anyone, even anonymous. Then click deploy and it will display a web app url. Copy this url, we’ll need this later.

That is all we need to do in google sheet. Now let’s setup our frontend.

6) In your html form, let’s add few jQuery script to submit a POST request to the url we generated in step 5 above. Add following codes between script tag in your html. Replace the url in below code with your google script url and also replace the form class name.

Whenever you submit the contact form, this jQuery function will do ajax request to the google script url with the form data as payload.

Remember that the input field names of the form should be defined in the google sheet’s first row. You can add any number of input field in the form. Just define the field names in the google sheet and the submitted values will be populated in the sheet automatically.

I have hosted my contact form using Github Pages. Check it out here https://maharjanmilan.github.io/contact-form.

Once you submit the form, if the data submission was successful you’ll see a success popup. You can also replace this popup with other beautiful alternatives.

https://maharjanmilan.github.io/contact-form

7) Now you can see the contact details submitted from the form in your google sheet. You'll also receive an email with all the data.

If you need a date column to record the submitted date just add Timestamp header right beside message This field will auto-populate the submitted date.

That’s it. As simple as that.

Modify it slightly and you can create a newsletter form or even build a product order form. The possibilities are limitless.

You can also clone my project https://github.com/maharjanmilan/contact-form/ and see the implementation there.

If you want to learn how to deploy your static site to Github Pages see here. It is very easy. You can even use your custom domain name for free.

There are lot of other free static hosting services like Netlify, Firebase, Amazon S3, Zeit, Forge. Check them out as well.

~~Btw you can also trigger the google sheet to send email with the form data. But that’s for another tutorial :)~~ Since it was not a big change, I have included the email sending in the App script above.

I hope this was helpful.

Continuous Deployment (CD) from Bitbucket to Cpanel/FTP Server

Milan Maharjan — Sat, 11 Apr 2020 07:09:33 +0000

There has been a drastic rise of using virtual cloud servers to host apps. And a lot of developers implement CI/CD. It makes the deployment in the cloud easy and fast.

A lot of apps no longer use FTPs or traditional shared hosting anymore. But there are still many of us who host their apps in shared hosting, because the app is simple and the cost is low as well. Today we’ll learn how to automatically deploy our code to shared hosting via FTP whenever something is pushed to bitbucket.

Bitbucket has an integrated CI/CD service called Bitbucket Pipelines that allows us to automatically build, test and deploy our code. We’ll setup a pipeline by creating bitbucket-pipelines.yml file in the root directory of our repository. In this file, we’ll add steps to deploy our app to FTP server when code is pushed to the master branch.

Let’s Begin.

I will be using a simple weather app written in Vue CLI https://github.com/oxyyyyy/vue-weather. I have forked this repo to update the weather api keys in https://github.com/maharjanmilan/vue-weather

To import this Github repo to your Bitbucket, go to https://bitbucket.org/repo/import

Create bitbucket-pipelines.yml file in the root of the project.

This is a build configuration for Docker. You can use any docker image from Docker Hub as your build environment. Here I have used node:latest image. Under branches I have specified master. So this build will happen only when we push to master branch. Under script I have mentioned few commands to run inside the container. Then I have used a ftp pipe provided by Bitbucket to deploy the code to ftp server. Under variables we define our FTP parameters of Cpanel or any hosting service.

You can see here that I have used pipeline environment variables. This can be defined under repository Setting > Pipelines > Repository variables

Pipeline Environment Variables

You should always use pipeline environment variables for the sensitive informations.

Once you have created and commited the file, click on Pipelines menu and click Enable button. Now the pipeline is enabled for this repository.

Now whenever you push to master branch, the build process is triggered automatically. Here is what happens:

Bitbucket will create a container with the code of current repository from the image we mentioned in the yml file. In this case from node:latest image.

It then runs yarn install to install all the dependencies js libraries.

Since we are deploying the project in production, we don’t need all the codes from the repository. The yarn run build command will compile the necessary code and store in dist folder. We only need to deploy this folder.

Bitbucket ftp pipe will then copy the dist folder as defined in $ftp_local_path variable to $ftp_remote_path path in our FTP server.

If you go to Pipelines menu you can see the current pipeline being run.

List of pipelines

You can also click on specific pipeline and view the build steps and build logs.

Pipeline detail page

It took 3m 28s for the whole build process. At the time of this writing Bitbucket provides free 50 build minutes, which shall be enough if you don’t push much. Also if you have to revert your changes, you can just click on old pipes and rerun it.

The code should now be deployed to your FTP server. Mine was uploaded here: http://weather.milanmaharjan.com.np/

It is as simple as that.

If your app is not working update the api key for Weatherbit in src/constants.js file. You can create api key for free from Weatherbit

Gitlab also has a similar integrated CI/CD service and they provide 2000 build minutes per month for free. I am also planning to write a tutorial on Gitlab as well.

I hope this tutorial was helpful for you. If you have any issues, let me know in the comments below.