Home › Create Your Own Responsive "Contact Us" Page in Minutes at pankajblogs26
Skip to main content

Create Your Own Responsive "Contact Us" Page in Minutes at pankajblogs26

 

Create Your Own "Contact Us" Page in Minutes

Want to add a contact page to your website so your viewers can reach you easily? I’ve got you covered with this simple HTML and CSS code. It’s beginner-friendly, looks great, and even works on phones! Below, I’ll share the full code with explanations—plus instructions to make it functional.

This code let Viewers to send you Email. This will improve reachability of viewers and collect their feedback for improvement. let's start with us

"Contact Us" Page in Minutes


The Code

Copy this into a file called contact.html:

<html> <head> <title>Contact Us - YourBlogName</title> <style> /* Unique container class to avoid theme conflicts */ .custom-contact-container { max-width: 800px; /* Limits the width */ margin: 20px auto; /* Centers it */ padding: 15px; /* Inner space */ } /* Scope all styles to the custom container */ .custom-contact-container h1 { text-align: center; /* Center the title */ margin-bottom: 20px; /* Space below */ font-size: 28px !important; /* Force size */ } .custom-contact-container p { text-align: center; /* Center text */ margin-bottom: 30px; /* Space below */ font-size: 16px !important; /* Force size */ } .custom-contact-container .contact-form { display: flex; /* Stack items */ flex-direction: column; /* Vertical layout */ gap: 15px; /* Space between elements */ } .custom-contact-container .contact-form label { font-weight: bold; /* Bold labels */ margin-bottom: 5px; /* Space below */ } .custom-contact-container .contact-form input, .custom-contact-container .contact-form textarea { width: 100% !important; /* Force full width */ padding: 10px; /* Inner space */ border: 1px solid #ccc !important; /* Force border */ border-radius: 5px; /* Rounded corners */ font-size: 16px !important; /* Force text size */ box-sizing: border-box; /* Fix padding */ } .custom-contact-container .contact-form textarea { height: 150px !important; /* Force height */ resize: vertical; /* Resizable vertically */ } .custom-contact-container .contact-form button { background: #007bff !important; /* Force blue */ color: #fff !important; /* Force white text */ padding: 12px; /* Inner space */ border: none !important; /* No border */ border-radius: 5px; /* Rounded corners */ font-size: 16px !important; /* Force text size */ cursor: pointer; /* Hand on hover */ } .custom-contact-container .contact-form button:hover { background: #0056b3 !important; /* Darker blue on hover */ } /* Responsive adjustments scoped to container */ @media (max-width: 600px) { .custom-contact-container { padding: 10px; /* Less padding on small screens */ } .custom-contact-container h1 { font-size: 24px !important; /* Smaller title */ } .custom-contact-container .contact-form input, .custom-contact-container .contact-form textarea, .custom-contact-container .contact-form button { font-size: 14px !important; /* Smaller text */ } } </style> </head> <body> <!-- Unique container class to isolate styles --> <div class="custom-contact-container"> <h1>Contact Us - YourBlogName</h1> <!-- Page title --> <p>Have a question or feedback? Reach out to us below!</p> <!-- Intro text --> <!-- Form with isolated class --> <form action="https://formspree.io/f/your-form-id" class="contact-form" method="POST"> <!-- Name field --> <label for="name">Name</label> <input id="name" name="name" placeholder="Your Name" required="" type="text" /> <!-- Email field --> <label for="email">Email</label> <input id="email" name="email" placeholder="Your Email" required="" type="email" /> <!-- Message field --> <label for="message">Message</label> <textarea id="message" name="message" placeholder="Your Message" required=""></textarea> <!-- Submit button --> <button type="submit">Send Message</button> </form> </div> </body> </html>

How to Use It

  1. Customize It:
    • Replace YourBlogName with your site’s name (appears in the title and heading).
    • Change colors like #007bff (button blue) to match your style—try #ff5733 for orange, for example.
  2. Make It Work:
    • Sign up at formspree.io (free for up to 50 submissions/month).
    • Create a form and get your unique URL (e.g., https://formspree.io/f/xabc1234).
    • Replace https://formspree.io/f/your-form-id in the <form action="..."> with your URL.
    • When someone submits the form, you’ll get an email with their message!
  3. Add It to Your Blogger Post or WordPress Website:
    • For Blogger:
      1. Log in to Blogger.
      2. Go to "Pages" in the left menu and click "New Page."
      3. Give it a title like "Contact Us."
      4. Switch to "HTML view" (top right corner, next to "Compose view").
      5. Paste the entire code from above into the editor.
      6. Click "Publish." Now your contact form is live as a page on your blog!
      7. Add a link to it in your blog’s menu (Layout > Add Gadget > Link List).
    • For WordPress:
      1. Log in to your WordPress dashboard.
      2. Go to "Pages" > "Add New."
      3. Title it "Contact Us."
      4. If using the Block Editor (Gutenberg), add a "Custom HTML" block and paste the code.
      5. If using the Classic Editor, switch to "Text" mode (not "Visual") and paste the code.
      6. Click "Publish." Your contact page is ready!
      7. Add it to your menu (Appearance > Menus > Add the page > Save).
    • Why This Works
      • Theme-Safe: The .custom-contact-container class and !important tags keep your styles isolated from Blogger’s theme.
      • Simple: Just HTML and CSS—no complex coding.
      • Responsive: Looks great on all devices.
      • Functional: Formspree handles submissions.

      Try it out and let your viewers reach you easily. Questions? Drop them below!

Labels:

Comments

Post a Comment

Popular posts from this blog

When Will the SEE 2081 Results Be Published in Nepal? Teacher Boycott Threats Explained

  When Will the SEE 2081 Results Be Published in Nepal? Teacher Boycott Threats Explained The Secondary Education Examination (SEE) is a milestone for Grade 10 students in Nepal, and with the 2081 exams likely wrapping up around April 1, 2025, students and parents are already asking: When will the results be out? This year, though, there’s a twist—whispers of teachers refusing to check answer sheets are raising eyebrows. What’s going on, and how might it affect the timeline? Let’s dive into the details, from the usual schedule to potential delays and the unrest brewing among educators. The Usual SEE Result Timeline The SEE, overseen by Nepal’s National Examination Board (NEB), follows a predictable rhythm. Exams typically run in late March or early April (Chaitra in the Nepali calendar), with results dropping 2-3 months later, around late June to mid-July (Ashar or early Shrawan). For context: SEE 2080 (2024) : Exams spanned March 28 to April 9, 2024, with results published o...
Post a Comment
Read more

The Rise and Fall of Rabi Lamichhane in Nepal Politics: A Detailed Timeline

The Rise and Fall of Rabi Lamichhane in Nepal Politics: A Detailed Timeline Rabi Lamichhane’s journey in Nepal politics is a gripping saga of meteoric success and a stunning collapse. From a beloved TV journalist to the founder of the Rastriya Swatantra Party (RSP), he captivated Nepal with promises of reform—only to see his career unravel amid legal battles, citizenship disputes, and financial scandals. As of March 21, 2025, his story remains a hot topic in Nepal’s political landscape. Let’s explore the full timeline of Rabi Lamichhane’s rise and fall, unpacking the key moments, controversies, and what’s next for this polarizing figure. Rabi lamichhane Member of parliament,Nepal Who Is Rabi Lamichhane? From Journalist to Political Star Rabi Lamichhane was born on May 11, 1974, in Bhaktapur, Nepal, into a middle-class family. His early life offered little hint of the fame to come. After moving to the United States in the 1990s, he worked odd jobs before gaining American citizenship ...
Post a Comment
Read more

How to Find Which Pages of Your Site Are Indexed by Google: 10 Proven Methods

How to Find Which Pages of Your Site Are Indexed by Google: 10 Proven Methods Posted on April 4, 2025 by Pankaj Ever wondered which pages of your website Google has tucked away in its massive index? Whether you’re a blogger, a business owner, or just curious, knowing what’s indexed can help you optimize your site, troubleshoot issues, or simply satisfy your curiosity. Today, I’m sharing 10 effective methods to list out the pages Google has indexed from your site—complete with visuals to guide you. Let’s dive in! 1. The Classic site: Search Trick If you’ve ever typed site:yourdomain.com into Google, you’ve already stumbled upon one of the easiest ways to peek at indexed pages. This simple command shows all the pages Google knows about from your site. Add a keyword (like site:pankajblogs26.blogspot.com tech ) to narrow it down. It’s quick, but Google caps results, so it’s not the full picture—perfect for a fast check, though! A quick site: search reveals indexed pages in second...
Post a Comment
Read more