অ্যাস্ট্রো কন্টাক্ট ফর্ম ইন্টিগ্রেশন (স্ট্যাটিক এবং এসএসআর)
ইমেল সার্ভার বা ডাটাবেস রক্ষণাবেক্ষণ ছাড়াই লুগাটু এন্ডপয়েন্ট ব্যবহার করে অ্যাস্ট্রো স্ট্যাটিক সাইট (SSG) এবং হাইব্রিড সার্ভার রুটে যোগাযোগের ফর্মগুলি কীভাবে যুক্ত করবেন।
1. বিশুদ্ধ স্ট্যাটিক সাইট (SSG) ফর্ম ইনজেশন
অ্যাস্ট্রো ডিফল্টরূপে শূন্য-জাভাস্ক্রিপ্টের জন্য বিখ্যাত। Lugatu এর মাধ্যমে, আপনি স্ট্যান্ডার্ড HTML ফর্ম এবং হালকা ক্লায়েন্ট-সাইড আনয়নের মাধ্যমে অনুসন্ধান সংগ্রহ করার সময় আপনার Astro সাইটটিকে 100% স্থির রাখতে পারেন।
---
// src/pages/contact.astro
---
<form id="astro-contact-form" class="space-y-4 max-w-md">
<div>
<label class="block text-sm font-semibold mb-1">Your Name</label>
<input type="text" name="name" required class="w-full border rounded-xl p-2.5" />
</div>
<div>
<label class="block text-sm font-semibold mb-1">Email Address</label>
<input type="email" name="email" required class="w-full border rounded-xl p-2.5" />
</div>
<div>
<label class="block text-sm font-semibold mb-1">Message</label>
<textarea name="message" rows="4" required class="w-full border rounded-xl p-2.5"></textarea>
</div>
<input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />
<button type="submit" class="btn-primary-editorial py-2.5 px-6">Send Message</button>
</form>
<script>
const form = document.getElementById('astro-contact-form') as HTMLFormElement;
form?.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const payload = {
fields: {
name: formData.get('name'),
email: formData.get('email'),
message: formData.get('message'),
},
honeypot: formData.get('_gotcha') || '',
};
const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify(payload),
});
if (res.ok) {
alert('Thank you! Message delivered.');
form.reset();
}
});
</script>
2. সার্ভার API কী সহ Astro Hybrid / SSR API রুট
যদি আপনার অ্যাস্ট্রো সাইট ক্লাউডফ্লেয়ার পেজ, নেটলিফাই বা ভার্সেলে হাইব্রিড বা এসএসআর মোডে চলে, তাহলে অ্যাস্ট্রো এপিআই রুটের মাধ্যমে নিরাপদে জমাগুলি ফরওয়ার্ড করুন।
import type { APIRoute } from 'astro';
export const POST: APIRoute = async ({ request }) => {
const data = await request.formData();
const fields = {
name: data.get('name')?.toString(),
email: data.get('email')?.toString(),
message: data.get('message')?.toString(),
};
const res = await fetch(`https://www.lugatu.com/api/v1/forms/${import.meta.env.LUGATU_FORM_ID}/submissions`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${import.meta.env.LUGATU_API_KEY}`,
'Content-Type': 'application/json',
'Idempotency-Key': crypto.randomUUID(),
},
body: JSON.stringify({ fields }),
});
return new Response(JSON.stringify({ success: res.ok }), {
status: res.status,
headers: { 'Content-Type': 'application/json' },
});
};
নিরাপত্তা এবং প্রমাণীকরণ অপরিবর্তনীয়
নিরাপত্তা নির্দেশনা: কখনই import.meta.env.LUGATU_API_KEY অ্যাস্ট্রো ক্লায়েন্ট-সাইড স্ক্রিপ্ট ট্যাগে প্রকাশ করবেন না। ক্লায়েন্ট স্ক্রিপ্ট শুধুমাত্র সর্বজনীন শেষ পয়েন্ট ব্যবহার করা আবশ্যক.
সমস্যা সমাধান এবং সাধারণ ইনজেশন ত্রুটি৷
আপনার হোস্টিং ড্যাশবোর্ডে আপনার উৎপাদন পরিবেশ ভেরিয়েবল (LUGATU_FORM_ID এবং LUGATU_API_KEY) কনফিগার করা হয়েছে তা নিশ্চিত করুন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কি আমার অ্যাস্ট্রো সাইটকে লুগাতু দিয়ে 100% স্ট্যাটিক রাখতে পারি?
হ্যাঁ। বিশুদ্ধ স্ট্যাটিক (SSG) সাইটগুলি আপনার হোস্টিং প্রদানকারীতে কোনো সার্ভার কম্পিউটের প্রয়োজন ছাড়াই সরাসরি লুগাতু পাবলিক এন্ডপয়েন্টে জমা দেয়।
আপনার ফর্ম শেষ বিন্দু তৈরি করতে প্রস্তুত?
সেকেন্ডের মধ্যে বিনামূল্যে শুরু করুন। কোনো ক্রেডিট কার্ডের প্রয়োজন নেই।