a complete HTML, CSS, and JavaScript code example for a "Contact Us" page on your Blogger site, where the data from the form is sent to the email address "businessforyou29111999@gmail.com":

on


1. Create a new page on your Blogger site and switch to HTML mode.


2. Copy and paste the following code into the HTML editor:


```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contact Us - FarmingFarms Blog</title>

<style>

  /* Your CSS styles here */

</style>

</head>

<body>

<div class="container">

  <h1>Contact Us</h1>

  <form id="contactForm">

    <label for="name">Name</label>

    <input type="text" id="name" name="name" required>

    

    <label for="email">Email</label>

    <input type="email" id="email" name="email" required>

    

    <label for="message">Message</label>

    <textarea id="message" name="message" required></textarea>

    

    <button type="submit">Submit</button>

  </form>

</div>


<script>

  const contactForm = document.getElementById('contactForm');

  contactForm.addEventListener('submit', async (e) => {

    e.preventDefault();

    

    const formData = new FormData(contactForm);

    const data = {};

    

    formData.forEach((value, key) => {

      data[key] = value;

    });

    

    // Send the form data to the specified email address

    try {

      const response = await fetch('https://api.emailjs.com/api/v1.0/email/send', {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

        },

        body: JSON.stringify({

          service_id: 'YOUR_EMAILJS_SERVICE_ID',

          template_id: 'YOUR_EMAILJS_TEMPLATE_ID',

          user_id: 'YOUR_EMAILJS_USER_ID',

          template_params: {

            from_name: data.name,

            reply_to: data.email,

            message: data.message,

          },

        }),

      });

      

      if (response.ok) {

        alert('Message sent successfully!');

        contactForm.reset();

      } else {

        alert('Something went wrong. Please try again.');

      }

    } catch (error) {

      console.error('Error:', error);

      alert('An error occurred. Please try again later.');

    }

  });

</script>

</body>

</html>

```


3. Replace `'YOUR_EMAILJS_SERVICE_ID'`, `'YOUR_EMAILJS_TEMPLATE_ID'`, and `'YOUR_EMAILJS_USER_ID'` in the JavaScript code with the appropriate values from your EmailJS account. EmailJS is a service that allows you to send emails directly from JavaScript. Sign up for an account at https://www.emailjs.com/ and create a new email template to get these values.


4. Save and publish the page on your Blogger site.


 customize the CSS styles and adapt the form fields as needed to match your design and preferences. This code provides a way to send the form data to the specified email address using EmailJS. The server-side handling of the email sending is managed by EmailJS, so you don't need to set up your own email server.

Comments

Post a Comment