Home Tech How To Put Latest Responsive Contact Us Page In Blogger?

How To Put Latest Responsive Contact Us Page In Blogger?

By
KinG
-
15207

Hello friends, King’s Here We welcome to our blog Nano Tech – Today In This Blog am going to tell you How You Can Put Latest Responsive Contact Us Page In Blogger? 

Before Starting How to put Responsive Contact Us let us know what are Responsive Contact Us page in Blogger?

What Are Contact Us Page in Blogger?

Contact Us page is a page on a blogger website that provides visitors with a way to get in touch with the website owner or administrator. It usually contains a form that visitors can fill out to send messages, inquiries, or feedback to the website owner. The Contact Us page may also include other contact details such as email address, phone number, social media links, and physical address. This page is important for building a relationship with visitors and creating a channel for communication and feedback

Why create Contact Us page in Blog?

Creating a Contact Us page on a blog is important for several reasons:
1. Provides a way for visitors to contact you: A Contact Us page is a simple and effective way for visitors to get in touch with you, ask questions, provide feedback, or make suggestions.
2. Builds trust: Having a Contact Us page on your blog shows visitors that you are open to communication and are willing to listen to their concerns or feedback.
 
3. Improves customer service: A Contact Us page allows you to address any issues or concerns that your visitors may have and provide them with a better customer service experience.
 
4. Helps you gather data: By including a form on your Contact Us page, you can gather valuable data from your visitors, such as their name, email address, and reason for contacting you. This information can be used to improve your blog or even develop new products or services.
Overall, a Contact Us page is an essential component of any blog, as it provides a way for visitors to connect with you and helps you build a better relationship with your audience.

What Are The Work Of Contact Us Page?

The main work of a Contact Us page on a website or blog is to provide visitors with a way to get in touch with the site owner or administrator. Some of the specific functions of a Contact Us page include:
 
1. Providing a simple way for visitors to contact you: A Contact Us page typically includes a form that visitors can fill out to send messages, inquiries, or feedback to the website owner. This form may include fields for the visitor’s name, email address, subject, and message.
2. Offering alternative contact methods: In addition to a contact form, a Contact Us page may also include other contact details such as email address, phone number, social media links, and physical address.
3. Improving customer service: A Contact Us page allows the site owner or administrator to address any issues or concerns that visitors may have and provide th.em with a better customer service experience.
4. Gathering data: By including a form on the Contact Us page, the site owner can gather valuable data from visitors, such as their name, email address, and reason for contacting the site. This information can be used to improve the site or even develop new products or services.
5. Building trust: Having a Contact Us page on a website or blog shows visitors that the site owner is open to communication and is willing to listen to their concerns or feedback

How You Can put Responsive Contact Us page?

To create a responsive Contact Us page, you can follow these steps:
1. Choose a responsive design template or create your own design.
2. Include a simple form on the page with fields for name, email, subject, and message. Use HTML5 form elements and ensure the form is accessible.
3. Use CSS media queries to adjust the layout of the form and the page as the screen size changes.
4. Add a Google Maps API to display your business location and a phone number for quick contact.
5. Make sure your page is mobile-friendly and easy to navigate on small screens.
6. Use a CAPTCHA or similar anti-spam tool to protect your form from spam.
7. Test your page on different devices to ensure it looks and functions correctly.
8. Include a thank you message or confirmation page after the form is submitted to inform the user that their message was received.
9. Provide multiple ways for users to contact you, including email, phone, and social media.
10. Make sure your page is accessible, easy to use, and provides clear instructions for contacting you.

First Code

  <style>
.contact-container {
  max-width: 700px;
  margin: 32px auto;
  font-family: "Roboto", sans-serif;
  color: #023047;
  padding: 0 32px;
}

.contact-container,
.contact-container * {
  box-sizing: border-box;
}

.contact-container svg {
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
}

.contact-container h2 {
  font-size: 48px;
  margin: 0;
}

.contact-container .sub-heading {
  font-size: 16px;
  margin-top: 8px;
  line-height: 1.8;
  position: relative;
}

.contact-container .sub-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  height: 1px;
  width: 50px;
  background: #0096c7;
}

.contact-container form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
}

.contact-container form input,
.contact-container form textarea {
  width: 100%;
  padding: 10px 16px;
  font-size: 16px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
  font-family: "Roboto", sans-serif;
  padding-left: 36px;
}

.contact-container form input:focus,
.contact-container form textarea:focus {
  outline: 1px solid #0096c7;
}

.contact-container form textarea {
  height: 140px;
  padding-left: 16px;
}

.contact-container .input-container,
.contact-container .btn-container {
  position: relative;
}

.contact-container .btn-container {
  width: 160px;
  margin-top: 8px;
  transition: all 300ms ease;
}

.contact-container .btn-container:hover {
  transform: scale(1.03);
}

.contact-container .btn-container svg {
  left: unset;
  right: 8px;
  color: #fff;
  pointer-events: none;
}

.contact-container input[type="submit"] {
  background: #023047;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.contact-container .top-section {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.contact-container .group {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.contact-container .error-message {
  color: red;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .contact-container .top-section {
    flex-direction: column;
  }
}
</style>

Second Code

  <div class="contact-container">
      <h2>Get In Touch</h2>
      <p class="sub-heading">
        Have a question, comment, or feedback? We'd love to hear from you!
      </p>

      <form action="">
        <div class="top-section">
          <div class="group">
            <label for="fullname">Your Name</label>
            <div class="input-container">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
                />
              </svg>

              <input type="text" id="fullname" />
            </div>
          </div>

          <div class="group">
            <label for="email">Your Email</label>
            <div class="input-container">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
                />
              </svg>

              <input type="text" id="email" />
            </div>
          </div>
        </div>

        <div class="group">
          <label for="message">Message</label>
          <textarea name="" id="message"></textarea>
        </div>

        <div class="btn-container">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
            />
          </svg>

          <input type="submit" value="Send" />
        </div>

        <div class="error-message"></div>
      </form>
    </div>

Third Code

<script>

const nameField = document.querySelector(".contact-container #fullname");

const emailField = document.querySelector(".contact-container #email");

const messageField = document.querySelector(".contact-container #message");

const sendBtn = document.querySelector(".contact-container .btn-container");

const errorMessage = document.querySelector(

  ".contact-container .error-message"

);

const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;

sendBtn.addEventListener("click", (e) => {

  if (

    nameField.value.trim() === "" ||

    emailField.value.trim() === "" ||

    messageField.value.trim() === ""

  ) {

    e.preventDefault();

    errorMessage.textContent = "All fields are necessary";

  } else if (!emailRegex.test(emailField.value)) {

    e.preventDefault();

    errorMessage.textContent = "Please enter a valid email";

  } else {

    errorMessage.textContent = "";

  }

});

nameField.addEventListener("focus", () => {

  errorMessage.textContent = "";

});

emailField.addEventListener("focus", () => {

  errorMessage.textContent = "";

});

messageField.addEventListener("focus", () => {

  errorMessage.textContent = "";

});

</script>
 
now you have to make some changes in this code.

You have to Changes only in Third Code, in this you have to & enter your Gmail 
After entering Gmail now you Ready To Go.

Conclude

So friends, hope you have likes this article of ours, if you have or faces any problems in applying the code or if any problem is found in the content , then you must tell us by commenting below so that we can solve your problem on time. . Thank you for Giving Our Precious time by reading This Blog
Any problem contact us
ThanK You . 

RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

    • Dear David wang,

      Greetings!

      Thank you for reaching out. Please note that this domain is owned and managed by [Nano Tech Pvt. Ltd.], a private limited company. Could you kindly provide more details regarding the information you have and how it is linked? Additionally, please specify what you require from us in this regard.

      Looking forward to your response.

      Best regards,
      Nano Tech

LEAVE A REPLY

Please enter your comment!
Please enter your name here