Contact form help!

[islamabushula]

Please i need a help how to connect the contact form with EmailJS to get the messages to my Gmail or even netlify forms or formspree i tried to edit the code everyway but nothing is working please i need so help here!

[widgeter]

Hi @islamabushula

To send messages in AstroWind using EmailJS you must meet the following requirements:

• Have an EmailJS account
• Add an email service in EmailJS
• Create an email template in EmailJS

This tutorial may be useful: https://www.emailjs.com/docs/tutorial/overview/

If you already have the following requirements you can then replace the https://github.com/onwidget/astrowind/blob/main/src/pages/contact.astro file in AstroWind with the following:

---
import Layout from '~/layouts/PageLayout.astro';
import HeroText from '~/components/widgets/HeroText.astro';
import ContactUs from '~/components/widgets/Contact.astro';
import Features2 from '~/components/widgets/Features2.astro';

const metadata = {
  title: 'Contact',
};
---

<Layout metadata={metadata}>
  <!-- HeroText Widget ******************* -->

  <HeroText tagline="Contact" title="Let's Connect!" />

  <ContactUs
    id="contact-form"
    title="Drop us a message today!"
    subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking  for right there! If not, our support team is delighted to help you."
    inputs={[
      {
        type: 'text',
        name: 'user_name',
        label: 'Name',
      },
      {
        type: 'email',
        name: 'user_email',
        label: 'Email',
      },
    ]}
    textarea={{
      name: "message",
      label: 'Message',
    }}
    disclaimer={{
      label:
        'By submitting this contact form, you acknowledge and agree to the collection of your personal information.',
    }}
    description="Our support team typically responds within 24 business hours."
  />

  <!-- Features2 Widget ************** -->

  <Features2
    title="We are here to help!"
    items={[
      {
        title: 'General support',
        description: `Chat with us for inquiries related to account management, website navigation, payment issues, accessing purchased templates or general questions about the website's functionality.`,
      },
      {
        title: 'Contact sales',
        description:
          'Chat with us for questions about purchases, customization options, licensing for commercial use, inquiries about specific template, etc.',
      },
      {
        title: 'Technical support',
        description:
          'Chat with us when facing issues like template installation, problems editing difficulties, compatibility issues with software or download errors, or other technical challenges related to using the templates.',
      },
      {
        title: 'Phone',
        description: '+1 (234) 567-890',
        icon: 'tabler:headset',
      },
      {
        title: 'Email',
        description: '[email protected]',
        icon: 'tabler:mail',
      },
      {
        title: 'Location',
        description: '1234 Lorem Ipsum St, 12345, Miami, EEUU',
        icon: 'tabler:map-pin',
      },
    ]}
  />
</Layout>

<script is:inline src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>

<script is:inline>
  (function () {
    // https://dashboard.emailjs.com/admin/account
    // eslint-disable-next-line no-undef
    emailjs.init({
      publicKey: 'YOUR_EMAILJS_PUBLIC_KEY',
    });
  })();
</script>
<script is:inline>
  window.onload = function () {
    document.getElementById('contact-form').addEventListener('submit', function (event) {
      event.preventDefault();
      
      // eslint-disable-next-line no-undef
      emailjs.sendForm('YOUR_EMAILJS_SERVICE_ID', 'YOUR_EMAIL_JS_TEMPLATE_ID', event.target).then(
        () => {
          console.log('SUCCESS!');
        },
        (error) => {
          console.log('FAILED...', error);
        }
      );
    });
  };
</script>

Remember to update the following values ​​with yours obtained from EmailJS:

• YOUR_EMAILJS_PUBLIC_KEY
• YOUR_EMAILJS_SERVICE_ID
• YOUR_EMAIL_JS_TEMPLATE_ID

This example is simplified. You can add more code to clear the form, add Recaptha or give feedback that your message has been sent.