Add a Contact Form in Hostgator

Today I am going to show you how to add a contact form to a static website hosted by Hostgator. This means it’s only relevant for static websites and not relevant for websites built on WordPress or other CMS.

Creating Email Account

First of all you need to make sure you have an email account on the same domain. Go to cPanel located at yourwebsite.com/cpanel, sign in, find eMail Accounts under Mail and double click to enter.

hostgator cpanel email accounts

Create an email address by filling all necessary fields. The password can be anything you want. It doesn’t have to be same as your cPanel’s password and, perhaps, shouldn’t be.

hostgator cpanel email set up

Click “Create Account” and you are done.

Creating a Functional Contact Form

You can send and receive emails now, but let’s go one step further and create a functional Contact Us form.

Since we are talking static websites here, I am going to work in raw HTML. If you don’t understand this part (and even if you do), perhaps you should consider using WordPress instead.

Go to your cPanel located at yourwebsite.com/cpanel, find File Manager (NOT Legacy File Manager), click on it, choose the website you are working with from drop-down menu (that is in case you have more than one website hosted under the same account or if you have subdomains) and click “Go” to enter.

Create a new file by clicking on New, enter file name (for example, contact.html) and click create.

create a new file in hostgator file manager

Now locate this file, right click and choose Edit. You will get a blank page. Anything you put here and save will appear on your web page at address yourwebsite.com/contact.html

I assume you already have a template with basic design for your website. So paste it here. For example, after I pasted mine and saved it, here is what I got:

empty page

Nothing much, but it has my header, logo, sidebar and most importantly styles. Anything I add here will match look and feel of my website.

Now we need to insert some code that will create a functional contact form here. Hostgator gives you two options – Javascript validated submission or simple submission with no validation. I personally prefer the second one but you can choose whatever you like. Their code is available here.

If you simply copy and paste their code as is (while replacing blue text with your data) your contact form will work but it will look terrible. So I am going to take just some pieces of it and insert into my own template.

Editing head area

Return to your raw HTML code and locate head section of your code. Enter title like Contact Us, then go to Hostgator’s page and copy this part of code (don’t copy it from this website!!!)

< script type="text/javascript">
function hgsubmit()
{
if (/\S+/.test(document.hgmailer.name.value) == false) alert (“Please provide your name.“);
else if (/^\S+@[a-z0-9_.-]+\.[a-z]{2,6}$/i.test(document.hgmailer.email.value) == false) alert (“A valid email address is required.”);
else if (/\S+/.test(document.hgmailer.comment.value) == false) alert (“Your email content is needed.“);
else {
document.hgmailer.submit();
alert (‘Thank you!\Your email is sent.‘);
}
}
< /script>

Do not copy it from here as it won’t work properly. You should copy this precise part from their page here. The parts that appear in bold are something you can edit. Just be careful when you edit anything. If you accidentally remove even one character nothing will work!

Here is how my head section looked after I added the code:

hostgator form mail head edit

Editing body area

Now copy everything between < form> and < /form> and paste in the body of your HTML. You need to replace mydomain.com with your domain name. Also wherever email address is mention you should replace it with the one you just created. You can edit text, like “Your Name” instead of “Visitor’s Name” etc.

The last line that mentions mydomain.com/redirect-path should be URL of page where you want to redirect your visitors after they filled your contact form. Usually you would create a special page that says something like: “Thank you for contacting us. We will get back to you as soon as possible, blah blah blah…” Create this page and insert its URL in the code.

Here is how my code looked like after all these edits:

formmail code

And here is what I got on web page…
contact form

It’s working but it’s not aligned very well so I am going to add some spaces to make it look a little better…
I added just one < /br> tag after Name, Email and Message, so the end result is this…

aligned contact form hostgator

You can test your form by sending yourself an email. Your webmail is available at yoursite.com/webmail

Use your email address and password (the one that you created specifically for this email address) to sign in. There are several programs you can use to view your email. I personally use RoundCube.

9 Replies to “Add a Contact Form in Hostgator”

  1. Hi Elena!
    I just went through this super helpful tutorial and got the form code, inserted it into my contact page, but I am not sure what to do with this “FormMail E-Mail” value and the redirect path.


    Whatever you want to say here

    ….

    Otherwise it works fine, only, as the domain does not point to the new hosting account yet, the messages don’t appear in the email account yet. (Should they appear in the email account at the old host?)

  2. Oops! I didn’t finish the tutorial yet. I got interrupted and posted half a post. Sorry!!!

    Anyway you figured it out correctly. You can replace that sentence with anything you want like: Your message here, for example. Also you can replace things like “Visitor’s name” with something nicer like “Your name”. Redirect path is your thank you for contacting us page (you should create it) and FormMail can be left as is.

    Messages will appear only after you switch your name servers (messages sent after the switch that is). They won’t appear at SBI as this goes via Hostgator and you didn’t switch your name servers yet.

    1. Thanks, Elena 🙂
      Sorry, the code in my comment above did not show within my comment and I couldn’t edit it.

      The tip for a better alignment is awesome, I will go and get mine better aligned.

  3. Does this form also create a directory on Hostgator that I can access to view everyone who has signed up for my website newsletter? Thank you

    1. Hi Melissa, no this will only create a simple contact form and send emails to your Hostgator email. This doesn’t collect subscriber’s addresses. If you need a newsletter you need to use a service like Mailchimp, GetResponse, Aweber or whatever you prefer.

  4. Hi Elena, what if I have already have google apps for email, do I still have to set up webmail on hostgator?

    1. I am not familiar with how it works, but if it uses email at your domain.com you have to setup webmail. Contact form is only for those who don’t use WordPress.

  5. The form is not working.
    In the Version 2 (Javascript Validation) the first line of code for the form is:

    When I look in the directory of my site, there is NO cgi-sys folder and NO formmail.pl file.
    Where do I go to find these and copy them into the root folder?

Comments are closed.