Computer >> कंप्यूटर >  >> सॉफ्टवेयर >> मेल

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

संपर्क फ़ॉर्म वेबसाइटों पर उपयोगी होते हैं यदि आप चाहते हैं कि आपके उपयोगकर्ता ईमेल पर आपके साथ बातचीत कर सकें। और उन्हें बनाने के बहुत सारे तरीके हैं।

परंपरागत रूप से आपने या तो सर्वर पर ईमेल भेजने के लिए PHP का उपयोग किया होगा या कोई तृतीय पक्ष सेवा जो ईमेल तर्क का ध्यान रखेगी।

लेकिन इस लेख में, हम इस बारे में बात करने जा रहे हैं कि SendGrid API के साथ अपने Next.js एप्लिकेशन से ईमेल कैसे भेजें।

हम एक साधारण पेज बनाने जा रहे हैं - रिएक्ट के साथ बनाया गया एक संपर्क फ़ॉर्म - जिसमें इनपुट फ़ील्ड हैं जिन्हें हम भेजने से पहले सत्यापित करेंगे। हम फॉर्म को सेंडग्रिड एपीआई से जोड़ देंगे जो आपको ईमेल भेजने का ध्यान रखेगा। फिर, दिन के अंत में, आपको बस इतना करना है कि उन प्रश्नों को खोजने के लिए अपना ईमेल देखें।

हालांकि, अगर आपके पास अभी तक कोई Next.js प्रोजेक्ट नहीं है, तो आप नीचे दिए गए चरणों का पालन करके आसानी से एक बना सकते हैं और इसे Vercel के साथ एकीकृत कर सकते हैं:

  1. Vercel पर एक अकाउंट बनाएं और New Project . पर क्लिक करें
SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

2. टेम्पलेट को Next.js . के रूप में चुनें :

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

3. अपनी रिपॉजिटरी को अपनी पसंद का नाम दें और क्रिएट प्रोजेक्ट पर क्लिक करें। (अपने रिमोट कोड संस्करण के लिए गिटहब, गिटलैब या बिटबकेट चुनें)

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

उपरोक्त तीन बिंदुओं का पालन करते हुए, आपके पास अपने संस्करण खाते पर एक संग्रह होगा।

टेक स्टैक जिसका हम उपयोग करेंगे

  • एक संपर्क फ़ॉर्म लैंडिंग पृष्ठ बनाने के लिए अगला.js
  • घटकों को स्टाइल करने के लिए TailwindCSS
  • अपने एपीआई का उपयोग करके ईमेल भेजने के लिए सेंडग्रिड
  • हमारे आवेदन और सीआई/सीडी की मेजबानी के लिए वर्सेल

हम फॉर्म इवेंट्स को संभालने के लिए नेक्स्टज के एपीआई मार्गों का उपयोग करने जा रहे हैं। एपीआई मॉड्यूल हमारे Next.js एप्लिकेशन में बैकएंड लॉजिक को संभालने का एक लचीला तरीका प्रदान करते हैं।

हम एपीआई फोल्डर में जो भी कोड लिखते हैं वह होस्टिंग के लिए वर्सेल पर सर्वरलेस फंक्शन के रूप में तैनात हो जाएगा। आप यहां Next.js API रूट के बारे में अधिक पढ़ सकते हैं

अगर आपके पास पहले से एक Next.js प्रोजेक्ट है, जहां आप एक कार्यशील संपर्क फ़ॉर्म सेट करना चाहते हैं, तो यह बहुत अच्छा है। उस स्थिति में, आपके लिए पृष्ठ बनाना और तुरंत आरंभ करना आसान हो जाएगा।

लेकिन अगर आपने अभी तक कोई प्रोजेक्ट सेट अप नहीं किया है, तो ठीक है - Vercel पर जाएं और एक Next.js स्टार्टर प्रोजेक्ट बनाएं और रिपॉजिटरी को क्लोन करें।

एप्लिकेशन प्रवाह

आइए एक नज़र डालते हैं एप्लिकेशन प्रवाह पर - या ईमेल भेजना वास्तव में कैसे काम करता है:

  • अंतिम उपयोगकर्ता अनिवार्य 4 फ़ील्ड भरता है और सबमिट पर क्लिक करता है।
  • सबमिट करने पर, handleSubmit फ़ंक्शन ट्रिगर हो जाता है।
  • handleSubmit इनपुट फ़ील्ड के लिए फ़ॉर्म को मान्य करता है और जाँचता है कि क्या वे खाली नहीं हैं।
  • यदि प्रपत्र फ़ील्ड खाली नहीं हैं, तो api/sendgrid . पर एक API कॉल किया जाता है जहां ईमेल भेजने का तर्क रहता है।
  • api/sendgrid में , @sendgrid/mail मॉड्यूल एक send को इनिशियलाइज़ करता है फ़ंक्शन जो इसे आपके एप्लिकेशन की API कुंजी लेता है और आवश्यक फ़ील्ड के साथ ईमेल भेजता है।
  • अगर ईमेल सफलतापूर्वक डिलीवर हो जाता है, तो एक 200 ग्राहक को प्रतिक्रिया भेजी जाती है, अन्यथा एक catch() ग्राहक को प्रतिक्रिया भेजी जाती है।
  • प्रतिक्रियाओं को फ़्रंटएंड पर नियंत्रित किया जाता है और उपयुक्त संदेश प्रदर्शित किए जाते हैं।

टेलविंडसीएसएस कैसे सेट करें

TailwindCSS सेट करना काफी आसान है, और आप इसे दो आसान तरीकों से कर सकते हैं।

  1. अपने प्रोजेक्ट में निर्भरता के रूप में TailwindCSS इंस्टॉल करें:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. अपने प्रोजेक्ट के लिए एक TailwindCSS कॉन्फ़िगरेशन फ़ाइल इनिशियलाइज़ करें। यह एक tailwind.config.js बनाएगा रूट डायरेक्टरी में फाइल करें:

npx tailwindcss init

फिर आपको कॉन्फ़िगरेशन फ़ाइल को संपादित करने की आवश्यकता होगी, purge . शामिल करें पथ, और सक्षम करें jit मोड:

module.exports = {
   purge: [],
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

आप purge का उपयोग करते हैं निर्माण के समय अपने प्रोजेक्ट से अवांछित शैलियों को हटाने के लिए। यदि आप CSS बंडल का आकार कम करना चाहते हैं तो यह मददगार है।

jit नया TailwindCSS मोड है जहां आप कोड में ही डायनामिक क्लासनाम निर्दिष्ट कर सकते हैं।

उदाहरण के लिए, यदि आप चाहते हैं कि आपके टेक्स्ट का आकार 10px हो (जो पहले से TailwindCSS मॉड्यूल में नहीं है), आप text-[10px] . लिख सकते हैं आपके वर्ग के नामों में और यह स्वचालित रूप से प्रतिबिंबित होगा। अब कस्टम शैली विशेषताएँ लिखने की आवश्यकता नहीं है।

इसके बाद, अपने रूट _app.js . में Tailwind स्टाइल इंपोर्ट करें फ़ाइल:

// pages/_app.js
 import '../styles/globals.css'
 import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

फिर अपने रूट लेवल स्टाइलशीट में Tailwind के मुख्य CSS को इस तरह शामिल करें:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

इसके साथ, आपने अपने प्रोजेक्ट के लिए टेलविंडसीएसएस को सफलतापूर्वक सेटअप कर लिया है।

संपर्क पृष्ठ के लिए मार्कअप और स्टाइलिंग

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

हम पूरी तरह से टेलविंड के साथ वेबपेज बनाएंगे। मुझे सीधे टेलविंड मास्टर किट से पेज मिला है जो टेलविंड वेब प्रोजेक्ट्स के लिए एक घटक और टेम्प्लेट लाइब्रेरी है।

आइए पेज के HTML (अनिवार्य रूप से संपर्क फ़ॉर्म) के माध्यम से समझें कि सब कुछ कैसे लागू किया गया है:

<form class="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500">
      <h1 class="text-2xl font-bold dark:text-gray-50">Send a message</h1>

      <label for="fullname" class="text-gray-500 font-light mt-8 dark:text-gray-50">Full name<span class="text-red-500 dark:text-gray-50">*</span></label>
      <input type="text" name="fullname" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="email" class="text-gray-500 font-light mt-4 dark:text-gray-50">E-mail<span class="text-red-500">*</span></label>
      <input type="email" name="email" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="subject" class="text-gray-500 font-light mt-4 dark:text-gray-50">Subject<span class="text-red-500">*</span></label>
      <input type="text" name="subject" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="message" class="text-gray-500 font-light mt-4 dark:text-gray-50">Message<span class="text-red-500">*</span></label>
      <textarea name="message" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"></textarea>
      <div class="flex flex-row items-center justify-start">
        <button class="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center">
          Send
          <svg width="24" height="24" viewBox="0 0 24 24" class="text-cyan-500 ml-2" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
            <path d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </form>

फ़ॉर्म में 4 फ़ील्ड हैं:

  • पूरा नाम
  • ईमेल
  • विषय
  • संदेश

सभी फ़ील्ड अनिवार्य हैं - और हम उन्हें बाद में भी मान्य करेंगे। आप अपने उपयोगकर्ता से ईमेल भेजते समय अपने सभी विवरण प्रदान करने की अपेक्षा करेंगे।

फ़ील्ड को कैप्चर करने के लिए, हम यह सुनिश्चित करने के लिए React's useState() हुक का उपयोग करने जा रहे हैं कि हमारा डेटा एप्लिकेशन में बना रहे।

export default function ContactUs() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

    return (
		<form
          onSubmit={handleSubmit}
          className="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500"
        >
          <h1 className="text-2xl font-bold dark:text-gray-50">
            Send a message
          </h1>

          <label
            htmlFor="fullname"
            className="text-gray-500 font-light mt-8 dark:text-gray-50"
          >
            Full name<span className="text-red-500 dark:text-gray-50">*</span>
          </label>
          <input
            type="text"
            value={fullname}
            onChange={(e) => {
              setFullname(e.target.value);
            }}
            name="fullname"
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />
         

          <label
            htmlFor="email"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            E-mail<span className="text-red-500">*</span>
          </label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />
          

          <label
            htmlFor="subject"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            Subject<span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            name="subject"
            value={subject}
            onChange={(e) => {
              setSubject(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />
         
          <label
            htmlFor="message"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            Message<span className="text-red-500">*</span>
          </label>
          <textarea
            name="message"
            value={message}
            onChange={(e) => {
              setMessage(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          ></textarea>
          
          <div className="flex flex-row items-center justify-start">
            <button
              type="submit"
              className="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center"
            >
              Submit
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                className="text-cyan-500 ml-2"
                fill="currentColor"
                xmlns="https://www.w3.org/2000/svg"
              >
                <path
                  d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </div>
        </form>
	)
}

प्रपत्र विशेषता पर ध्यान दें onSubmit={handleSubmit} . यह वह फ़ंक्शन है जहां हम वास्तव में SendGrid के माध्यम से ईमेल भेजने जा रहे हैं। लेकिन इससे पहले, चलिए एक SendGrid प्रोजेक्ट बनाते हैं और API keys . को पुनः प्राप्त करते हैं ।

सेंडग्रिड प्रोजेक्ट कैसे सेट करें

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

सबसे पहले, आपको केवल SendGrid के होमपेज पर जाना होगा और एक खाते के लिए साइनअप करना होगा (यदि आपके पास पहले से कोई खाता नहीं है)।

सफलतापूर्वक एक खाता बनाने के बाद, एपीआई कुंजी के लिए पंजीकरण करें। आप इसे यहां कर सकते हैं।

सेंडग्रिड के लिए आवश्यक है कि आप स्पैम और दुर्भावनापूर्ण मेल से बचाने के लिए एक प्रेषक पहचान बनाएं। ऐसा करने के लिए, Sendgrid पहचान पृष्ठ पर जाएँ और Create New Sender . पर क्लिक करें प्रेषक की पहचान बनाने के लिए।

आपको एक विस्तृत फॉर्म भरने के लिए कहा जाएगा। बस फॉर्म को पूरा करें और सबमिट को हिट करें। अंत में, बस अपना ईमेल पता सत्यापित करें और आपका काम हो गया।

API keys . को पुनः प्राप्त करने के बाद , एक .env.local बनाएं अपने स्थानीय परिवेश में फ़ाइल करें और निम्न कोड पेस्ट करें:

SENDGRID_API_KEY= YOUR_API_KEY_HERE

बदलें YOUR_API_KEY_HERE एपीआई कुंजी के साथ जिसे आपने अभी प्राप्त किया है।

सर्वर रहित API रूट कैसे बनाएं

Next.js के साथ सर्वर रहित API मार्ग बनाना काफी आसान है।

/pages/api पर जाएं और api . के अंदर फोल्डर sendgrid.js नामक फाइल बनाता है ।

import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmail(req, res) {
  try {
    // console.log("REQ.BODY", req.body);
    await sendgrid.send({
      to: "[email protected]", // Your email where you'll receive emails
      from: "[email protected]", // your website email address here
      subject: `${req.body.subject}`,
      html: `<div>You've got a mail</div>`,
    });
  } catch (error) {
    // console.log(error);
    return res.status(error.statusCode || 500).json({ error: error.message });
  }

  return res.status(200).json({ error: "" });
}

export default sendEmail;

SendGrid के लिए आवश्यक है कि हम एक sendgrid . को इनिशियलाइज़ करें setApiKey() . के साथ API कुंजियों के साथ ऑब्जेक्ट करें तरीका। ऑब्जेक्ट को अपनी API कुंजी से प्रारंभ करें और आप send() . के साथ ईमेल भेज सकते हैं विधि।

send() . में अनिवार्य रूप से चार फ़ील्ड आवश्यक हैं विधि का मुख्य भाग:

  • to - वह ईमेल पता जहां आप चाहते हैं कि आपका ईमेल डिलीवर हो
  • from - आपका SendGrid ईमेल जिसे आपने प्रेषक पहचान सत्यापन के लिए उपयोग किया था। आपके ईमेल इस ईमेल से भेजे जाएंगे।
  • subject - ईमेल की विषय पंक्ति
  • message - ईमेल का संदेश निकाय

हम इन चार मापदंडों का निर्माण स्वयं करने जा रहे हैं ताकि हम अपने ईमेल को बेहतर ढंग से समझ सकें। ऊपर उसी स्निपेट से अपडेट किया गया कोड यहां दिया गया है:

import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmail(req, res) {
  try {
    await sendgrid.send({
      to: "[email protected]", // Your email where you'll receive emails
      from: "[email protected]", // your website email address here
      subject: `[Lead from website] : ${req.body.subject}`,
      html: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html lang="en">
      <head>
        <meta charset="utf-8">
      
        <title>The HTML5 Herald</title>
        <meta name="description" content="The HTML5 Herald">
        <meta name="author" content="SitePoint">
      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
      
        <link rel="stylesheet" href="css/styles.css?v=1.0">
      
      </head>
      
      <body>
        <div class="img-container" style="display: flex;justify-content: center;align-items: center;border-radius: 5px;overflow: hidden; font-family: 'helvetica', 'ui-sans';">              
              </div>
              <div class="container" style="margin-left: 20px;margin-right: 20px;">
              <h3>You've got a new mail from ${req.body.fullname}, their email is: ✉️${req.body.email} </h3>
              <div style="font-size: 16px;">
              <p>Message:</p>
              <p>${req.body.message}</p>
              <br>
              </div>
              <img src="https://manuarora.in/logo.png" class="logo-image" style="height: 50px;width: 50px;border-radius: 5px;overflow: hidden;">
              <p class="footer" style="font-size: 16px;padding-bottom: 20px;border-bottom: 1px solid #D1D5DB;">Regards<br>Manu Arora<br>Software Developer<br>+91 9587738861</p>
              <div class="footer-links" style="display: flex;justify-content: center;align-items: center;">
                <a href="https://manuarora.in/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Website</a>
                <a href="https://manuarora.in/blog/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Blog</a>
                <a href="https://github.com/manuarora700/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">GitHub</a>
                <a href="https://instagram.com/maninthere/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Instagram</a>
                <a href="https://linkedin.com/in/manuarora28/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">LinkedIn</a>
                <a href="https://twitter.com/mannupaaji/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Twitter</a>
                
              </div>
              </div>
      </body>
      </html>`,
    });
  } catch (error) {
    // console.log(error);
    return res.status(error.statusCode || 500).json({ error: error.message });
  }

  return res.status(200).json({ error: "" });
}

export default sendEmail;

अगर आप html भेजना चाहते हैं ईमेल बॉडी में, आपको इनलाइन शैलियों का उपयोग करना होगा जो उदाहरण में भी हैं।

यहां, हम अनिवार्य रूप से SendGrid के send() . का उपयोग कर रहे हैं ईमेल भेजने के लिए SendGrid API द्वारा प्रदान की गई विधि। हम send() . का उपयोग करते हैं sendgrid . के साथ विधि ऑब्जेक्ट जिसे हमने एपीआई कुंजी के साथ प्रारंभ किया था। यह सुनिश्चित करता है कि हमारे ईमेल सुरक्षित हैं और केवल हमारी अनुमति से ही वितरित किए जाते हैं।

साथ ही, हमने कोड को try - catch . में लपेटा है खंड मैथा। यह सुनिश्चित करता है कि हमारा एप्लिकेशन अपवादों और त्रुटियों को सही ढंग से संभाल सकता है। अगर किसी भी बदलाव से ईमेल भेजना विफल हो जाता है, तो कोड तुरंत catch() . में आ जाता है ब्लॉक करें और हम एक error लौटाते हैं वस्तु। यह दर्शाता है कि बैक-एंड पर कुछ समस्या हुई है।

बैक-एंड से एपीआई प्रतिक्रिया को देखते हुए, फ्रंट-एंड तदनुसार प्रतिक्रिया करता है और यूआई बदल जाता है।

स्टाइल html . में चला जाता है send() . के अंदर विशेषता विधि शरीर। आप अपने ईमेल को कैसे स्टाइल करना चाहते हैं, यह पूरी तरह आप पर निर्भर करता है। यहां, मैंने अपने ट्विटर, इंस्टाग्राम, गिटहब और वेबसाइट पर एक पाद लेख के साथ एक साधारण टेम्पलेट शामिल किया है, साथ ही मूल संदेश निकाय जिसे अंतिम उपयोगकर्ता भेजता है।

अब हमारा एपीआई रूट सेट हो गया है, तो चलिए आगे के छोर पर चलते हैं और सीखते हैं कि प्रतिक्रिया को सही तरीके से कैसे संभालना है।

एपीआई को कैसे कॉल करें और प्रतिक्रियाओं को कैसे हैंडल करें

चूंकि हमारा एपीआई रूट सेटअप है, अब हम अपने सर्वर रहित एपीआई को कॉल करने जा रहे हैं और प्रतिक्रिया प्राप्त करेंगे।

import React, { useState } from "react";

export default function ContactUs() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");



  const handleSubmit = async (e) => {
    e.preventDefault();

    let isValidForm = handleValidation();

     
      const res = await fetch("/api/sendgrid", {
        body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      const { error } = await res.json();
      if (error) {
        console.log(error);
        return;
      }
    console.log(fullname, email, subject, message);
  };
  return (
    <main>
        <form class="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500">
      <h1 class="text-2xl font-bold dark:text-gray-50">Send a message</h1>

      <label for="fullname" class="text-gray-500 font-light mt-8 dark:text-gray-50">Full name<span class="text-red-500 dark:text-gray-50">*</span></label>
      <input type="text" name="fullname" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="email" class="text-gray-500 font-light mt-4 dark:text-gray-50">E-mail<span class="text-red-500">*</span></label>
      <input type="email" name="email" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="subject" class="text-gray-500 font-light mt-4 dark:text-gray-50">Subject<span class="text-red-500">*</span></label>
      <input type="text" name="subject" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="message" class="text-gray-500 font-light mt-4 dark:text-gray-50">Message<span class="text-red-500">*</span></label>
      <textarea name="message" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"></textarea>
      <div class="flex flex-row items-center justify-start">
        <button class="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center">
          Send
          <svg width="24" height="24" viewBox="0 0 24 24" class="text-cyan-500 ml-2" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
            <path d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </form>
    </main>
  );
}

यहां हम उस एपीआई को कॉल कर रहे हैं जिसे हमने अभी बनाया है fetch , जो रिएक्ट द्वारा प्रदान किया जाता है।

फ़ेच सर्वर रहित API को इस तरह बॉडी के साथ कॉल करता है:

body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        })

ये हमारे फॉर्म फ़ील्ड हैं जिनमें फॉर्म डेटा पहले से ही भरा हुआ है (याद रखें useState() ?) जो अब हमारे लिए उपलब्ध हैं।

एपीआई सफलता या विफलता के साथ प्रतिक्रिया करता है। यदि यह सफल होता है, तो ईमेल डिलीवर हो जाता है - अन्यथा, मेल डिलीवर नहीं होता है।

अंतिम उपयोगकर्ता के लिए प्रपत्र की स्थिति जानने के लिए, हमें कुछ UI तत्वों को दिखाने की आवश्यकता है। लेकिन इससे पहले, हमें यह संभालने की जरूरत है कि खाली खेत होने पर क्या होता है।

फॉर्म वैलिडेशन को कैसे हैंडल करें और UI को API रिस्पॉन्स पर प्रतिक्रिया दें SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

हमें यहां 3 चीजें सुनिश्चित करने की जरूरत है:

  1. सभी फ़ील्ड भरे जाने चाहिए - यानी, यदि कोई फ़ील्ड खाली है तो हम फॉर्म जमा नहीं कर सकते हैं। साथ ही, उपयोगकर्ता को पता होना चाहिए कि फॉर्म क्यों जमा नहीं हो रहा है। उसके लिए, हम त्रुटि संदेश प्रदर्शित करने जा रहे हैं।
  2. फॉर्म सबमिट करते समय, उपयोगकर्ता को पता होना चाहिए कि कुछ प्रोसेसिंग चल रही है। उसके लिए, जब फॉर्म सबमिट करने की प्रक्रिया में होगा तब हम बटन टेक्स्ट को बदलने जा रहे हैं।
  3. जब फ़ॉर्म सफलतापूर्वक सबमिट हो जाता है या यदि वह विफल हो जाता है, तो हम फ़ॉर्म के निचले भाग में अंतिम स्थिति दिखाने जा रहे हैं।

आइए एक विधि बनाएं handleValidation() सत्यापन की जांच करने के लिए:


  const handleValidation = () => {
    let tempErrors = {};
    let isValid = true;

    if (fullname.length <= 0) {
      tempErrors["fullname"] = true;
      isValid = false;
    }
    if (email.length <= 0) {
      tempErrors["email"] = true;
      isValid = false;
    }
    if (subject.length <= 0) {
      tempErrors["subject"] = true;
      isValid = false;
    }
    if (message.length <= 0) {
      tempErrors["message"] = true;
      isValid = false;
    }

    setErrors({ ...tempErrors });
    console.log("errors", errors);
    return isValid;
  };

फ़ंक्शन बहुत सीधा है:यह सभी क्षेत्रों की जांच करता है और एक बूलियन देता है isValid अगर फॉर्म वैध है।

साथ ही, हम अंत में त्रुटि संदेशों को प्रदर्शित करने के लिए सभी क्षेत्रों के लिए स्थिति बनाए रख रहे हैं - अनिवार्य रूप से, हम उन फ़ील्ड को सहेज रहे हैं जिनमें त्रुटियां हैं।

अंतिम कोड कुछ इस तरह दिखता है, बटन टेक्स्ट, त्रुटि संदेश और फॉर्म सत्यापन के साथ:

import React, { useState } from "react";

export default function ContactUs() {
   // States for contact form fields
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  //   Form validation state
  const [errors, setErrors] = useState({});

  //   Setting button text on form submission
  const [buttonText, setButtonText] = useState("Send");

  // Setting success or failure messages states
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const [showFailureMessage, setShowFailureMessage] = useState(false);

  // Validation check method
  const handleValidation = () => {
    let tempErrors = {};
    let isValid = true;

    if (fullname.length <= 0) {
      tempErrors["fullname"] = true;
      isValid = false;
    }
    if (email.length <= 0) {
      tempErrors["email"] = true;
      isValid = false;
    }
    if (subject.length <= 0) {
      tempErrors["subject"] = true;
      isValid = false;
    }
    if (message.length <= 0) {
      tempErrors["message"] = true;
      isValid = false;
    }

    setErrors({ ...tempErrors });
    console.log("errors", errors);
    return isValid;
  };

  //   Handling form submit

  const handleSubmit = async (e) => {
    e.preventDefault();

    let isValidForm = handleValidation();

    if (isValidForm) {
      setButtonText("Sending");
      const res = await fetch("/api/sendgrid", {
        body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      const { error } = await res.json();
      if (error) {
        console.log(error);
        setShowSuccessMessage(false);
        setShowFailureMessage(true);
        setButtonText("Send");
        return;
      }
      setShowSuccessMessage(true);
      setShowFailureMessage(false);
      setButtonText("Send");
    }
    console.log(fullname, email, subject, message);
  };
  return (
    <main>
      // Rest of the JSX code goes here. (With form fields)
    </main>
  );
}

जब फॉर्म सफलतापूर्वक डिलीवर हो जाता है, तो हमें UI पर अच्छी प्रतिक्रिया मिलती है। उस प्रतिक्रिया को देने के लिए, हमारे पास showSuccessMessage . है और showFailureMessage राज्यों। यदि बैक-एंड एपीआई मार्ग से प्रतिक्रिया में संपत्ति नहीं है error , इसका मतलब है कि फ़ॉर्म सबमिशन सफल रहा और ईमेल भेज दिया गया है।

उस स्थिति में, showSuccessMessage ट्रू पर सेट है, जो फॉर्म बॉक्स के ठीक नीचे संबंधित मार्कअप दिखाता है। यदि प्रतिक्रिया निकाय में error . की संपत्ति है , showFailureMessage सही पर सेट है और संबंधित संदेश स्क्रीन पर प्रदर्शित होता है।

सफलता और विफलता दोनों परिदृश्यों में, हमें बटन टेक्स्ट को send . पर रीसेट करना होगा के बजाय sending... . उसके लिए, हम राज्य का उपयोग कर रहे हैं setButtonText('send') जो विफलता या सफलता के मामले में बटन टेक्स्ट सेट करता है। हम बटन टेक्स्ट को sending... . पर सेट करते हैं जब भेजें बटन क्लिक किया जाता है।

ईमेल और UI प्रतिसाद कैसे प्राप्त करें

जब ईमेल सफलतापूर्वक डिलीवर हो जाता है, तो हमें संपर्क फ़ॉर्म में ही एक सफल संदेश मिलता है।

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

और आप सफलतापूर्वक हमारे द्वारा बनाए गए टेम्पलेट के साथ एक ईमेल प्राप्त करेंगे, जिसे SendGrid द्वारा सुरक्षित रूप से वितरित किया गया है

SendGrid और Next.js के साथ संपर्क फ़ॉर्म कैसे बनाएँ?

पर्यावरण चर

कृपया ध्यान दें कि हम API कुंजियों का उपयोग कर रहे हैं और कुंजियाँ संवेदनशील हैं। इसका मतलब यह है कि हमें पर्यावरण चर में हमेशा गुप्त या एपीआई कुंजी संग्रहित करनी चाहिए।

जैसा कि हमारे पास पहले से ही .env.local है हमारे स्थानीय परिवेश के लिए, होस्टिंग प्रदाता को API कुंजियों के बारे में भी जानना आवश्यक है।

Vercel, होस्टिंग पैनल पर ही API कुंजियों को संग्रहीत करने का एक आसान तरीका प्रदान करता है।

अपने Vercel खाते में API कुंजियों को सुरक्षित रूप से संग्रहीत करने के लिए, निम्न कार्य करें:

  • अपने प्रोजेक्ट पेज पर जाएं
  • सेटिंग पर जाएं
  • पर्यावरण चर पर जाएं
  • पर्यावरण चर का नाम जोड़ें, हमारे मामले में यह SENDGRID_API_KEY है , और संबंधित API कुंजी को मान फ़ील्ड में जोड़ें।
  • अपने आवेदन को फिर से तैनात करें और आपकी परियोजना उत्पादन के माहौल में काम करेगी।

लाइव डेमो और सोर्स कोड

यहां स्रोत कोड और एप्लिकेशन का लाइव डेमो दिया गया है:

लाइव डेमो
स्रोत कोड

निष्कर्ष

किसी वेबसाइट से ईमेल भेजने के लिए उपयोग करने के लिए SendGrid एक उत्कृष्ट विकल्प है। जब आप इसे Next.js और उनके सर्वर रहित API रूटों के साथ एकीकृत करते हैं, तो आपकी वेबसाइट के किसी भी हिस्से में फ़ॉर्म को एकीकृत करना बेहद आसान हो जाता है।

SendGrid आपको टेम्प्लेट को एकीकृत करने का विकल्प भी देता है जहां आप अपने ईमेल के लिए कस्टम थीम रख सकते हैं।

Nodemailer जैसे ईमेल भेजने के लिए अन्य विकल्प भी हैं जिनका मैंने अतीत में उपयोग किया है और अभी भी अपनी कुछ परियोजनाओं के लिए उपयोग किया है।

इस एप्लिकेशन को शुरू से तैयार करने में मुझे लगभग एक घंटे का समय लगा - नेक्स्ट.जेएस, टेलविंडसीएसएस, और सेंडग्रिड को उनके अत्यंत सहज वर्कफ़्लो और एपीआई सेमेन्टिक्स के लिए धन्यवाद। सुंदर संपर्क पृष्ठ UI के लिए टेलविंड मास्टर किट का भी धन्यवाद।

अगर आपको यह ब्लॉग पसंद आया है, तो इसे अपनी वेबसाइट में लागू करने का प्रयास करें ताकि आप अपने अंतिम उपयोगकर्ताओं तक पहुंच सकें।

अगर आप कोई प्रतिक्रिया देना चाहते हैं, तो मेरे ट्विटर हैंडल पर मुझसे संपर्क करें या मेरी वेबसाइट पर जाएं

हैप्पी कोडिंग। :)

  1. Event.preventDefault () और event.stopPropagation () के साथ ब्राउज़र डिफ़ॉल्ट को कैसे प्रबंधित करें

    विभिन्न घटनाओं के लिए ब्राउज़र में डिफ़ॉल्ट इंटरैक्शन और व्यवहार होते हैं। उदाहरण के लिए, जब कोई उपयोगकर्ता किसी प्रपत्र पर सबमिट बटन पर क्लिक करता है, तो फ़ॉर्म डिफ़ॉल्ट रूप से URL में सबमिट हो जाता है। जब किसी एलीमेंट के चाइल्ड पर क्लिक किया जाता है, तो एलिमेंट पर भी क्लिक इवेंट होता है क्योंकि

  1. SendGrid API के साथ ईमेल न्यूज़लेटर कैसे भेजें

    सालों से, क्विंसी लार्सन ने फ्रीकोडकैंप के मेल फॉर गुड प्लेटफॉर्म के माध्यम से एक साप्ताहिक ईमेल न्यूजलेटर भेजा, जो अमेज़ॅन एसईएस द्वारा संचालित है। उन्होंने हाल ही में इस प्रक्रिया को SendGrid में माइग्रेट किया है। इस लेख में, मैं आपको दिखाऊंगा कि मैंने इसे पूरा करने के लिए एक टूल कैसे बनाया। सें

  1. Excel में फॉर्म के साथ डेटाबेस कैसे बनाएं

    कई मामलों में, आपको डेटाबेस बनाने . की आवश्यकता हो सकती है एक्सेल में। सौभाग्य से, एक्सेल एक डेटा प्रविष्टि प्रदान करता है फॉर्म इस तरह के कार्य को परंपरागत रूप से करने के बजाय कुशलतापूर्वक पूरा करने के लिए। इस शिक्षाप्रद सत्र में, मैं आपको फ़ॉर्म के साथ Excel में डेटाबेस बनाने के तरीके के बारे मे