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

Kathmandu's Air Quality Crisis: A Comprehensive Guide to Understanding and Protection

Nestled in a valley surrounded by the majestic Himalayas, Kathmandu—Nepal's cultural and economic hub—faces an invisible threat that has steadily worsened over the past decade. Air pollution has transformed this once pristine mountain capital into one of the world's most polluted cities, creating a public health emergency that affects its 3 million residents daily. This comprehensive guide explores the depth of Kathmandu's air quality crisis, presenting evidence-based solutions and practical advice for residents and visitors alike. The State of Kathmandu's Air: By the Numbers Current Air Quality Metrics According to the World Health Organization (WHO), Kathmandu's annual average PM2.5 concentration exceeds 70 µg/m³ —seven times higher than the WHO's recommended safe limit of 10 µg/m³. During winter months, 24-hour readings frequently spike above 300 µg/m³ , placing Kathmandu among the top 10 most polluted cities globally. Key statistics: Average winter AQI: 175...
Post a Comment
Read more