How to make contact us page in blogger

How to make contact us page in blogger

Updated on 16 May - Post a Comment

Having a contact us page on your website makes your visitors to contact you easily but it can be done only using PHP to contact directly via email or any other service.

There are some website that provide this integration but they cost highly for beginners.


It is very easy to make contact us page on wordpress because wordpress support PHP but if you are a blogger user then you will definitely know that blogger does not support PHP which is very bad news for blogger users.

I am also blogger user and I have created a contact us page on my website and I decided to share it with you and here here I am with the code of this contact us page.

If you want to create a contact us page you have to host your PHP files for that we need some free hosting and 000webhost gives it free there are many other alternative that support free PHP hosting but in my case I am using 000webhost.

So what you have to do is just simple you have to follow the steps which are provided below to make a contact us page on your website or blogger blog .

Follow the steps to make contact us page on blogger :

  • Go to blogger.com
  • Go to page section
  • Create a new page and copy the HTML code provided below and paste it to that page.
    • <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Contact Us</title>

<style>CSS Code Here</style>
 
</head>
<body>
 <div id="page-wrapper">
   <h1>Contact Us</h1>

   <div id="form-messages"></div>
  
  <form id="ajax-contact" method="post" action="mailer.php">
   <div class="field">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
   </div>

   <div class="field">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
   </div>

   <div class="field">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
   </div>

   <div class="field">
    <button type="submit">Send</button>
   </div>
  </form>
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><-e30/script>
 <script src="Javascript code here"></script>
</body>
</html>
  • After pasting the HTML code now its time for some customization so copy the CSS code provided below and paste it right above the HTML code.
    • *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
  -webkit-font-smoothing: antialiased;
}

#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

H1 {
  margin-top: 0;
}

.field {
  margin: 1em 0;
}

Label {
  display: block;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: #999999;
}

Input {
  width: 100%;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}

Textarea {
  width: 100%;
  height: 200px;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}

Button {
  display: inline-block;
  border-radius: 3px;
  border: none;
  font-size: 0.9rem;
  padding: 0.5rem 0.8em;
  background: #69c773;
  border-bottom: 1px solid #498b50;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0;
  width: 100%;
  text-align: center;
}

Button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

Button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
  • After pasting the CSS code your contact us page will have some look it looks very beautiful just go and have a look on it.
    • As I have told you that you cannot use PHP in blogger so for that we will use as its code to run a PHP file on an event.
  • So this is the ajax code that we will use copy it and paste it in js file.
    • $(function() {

 // Get the form.
 var form = $('#ajax-contact');

 // Get the messages div.
 var formMessages = $('#form-messages');

 // Set up an event listener for the contact form.
 $(form).submit(function(e) {
  // Stop the browser from submitting the form.
  e.preventDefault();

  // Serialize the form data.
  var formData = $(form).serialize();

  // Submit the form using AJAX.
  $.ajax({
   type: 'POST',
   url: $(form).attr('action'),
   data: formData
  })
  .done(function(response) {
   // Make sure that the formMessages div has the 'success' class.
   $(formMessages).removeClass('error');
   $(formMessages).addClass('success');

   // Set the message text.
   $(formMessages).text(response);

   // Clear the form.
   $('#name').val('');
   $('#email').val('');
   $('#message').val('');
  })
  .fail(function(data) {
   // Make sure that the formMessages div has the 'error' class.
   $(formMessages).removeClass('success');
   $(formMessages).addClass('error');

   // Set the message text.
   if (data.responseText !== '') {
    $(formMessages).text(data.responseText);
   } else {
    $(formMessages).text('Oops! An error occured and your message could not be sent.');
   }
  });

 });

});
    Basically we have used jquery so we have to add jquery library in our script. So import it as. 
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  • Now it's time to add some functionality using PHP. Now copy the PHP code provided below and create a new PHP file as contactus.php .
    • <?php

    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "name@gmail.com";

        // Set the email subject.
        $subject = "New contact from $name";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>
    You should remember this thing that this PHP file should be hosted on 000webhost.
    After pasting the PHP code now go to your 000webhost C-panel and upload this php file there in this PHP file you have to make customizations and also in the ajax file you have to make some customizations.

Customising HTML and PHP files:

  • In HTML file you have to replace mailer.php with your php file url.
  • In Javascript file replace name@gmail.com with your email where you will receive email.
  • You can also change New contact from in PHP file but don't touch the variable.

After Doing all the steps you are all done now save your page and have a look.

In this PHP file we have used PHP mail function which supports limited emails in 000webhost but you can increase them by using smtp mail system i will publish article about that.

If you are unable to manage above code here you can download the full project file and get all the files used in this contact us page.

I hope you enjoyed this article and successfully created contact us page in blogger if you have any problem you can comment below or if you want video about this tutorial leave your comment below with a keyword #make_video_hindi replace hindi with your native language and i will make a video about it.
source:raufgraphics.com
Tags:

0 comments for How to make contact us page in blogger

Cancel