افزودن Google Forms به صفحات استاتیک

وبسایت‌های ایجاد شده با استفاده از سازنده‌های استاتیک وبسایت روز به روز در حال زیاد شدن هستند. وجود ابزارهای قدرتمندی مانند Jekyll و Hugo این زیاد شدن را منطقی کرده است. آن‌ها سریع هستند و از طرفی دیگر امن. داده‌ای از طرف سرور برگردانده نمی‌شود، و به همین دلایل وبسایت شما با سرعت و ایمنی بسیار زیادی به کاربر نمایش داده می‌شود. پس دیگر نیازی به نگرانی در ارتباط با دیتابیس و امنیت بخش سرور نیست.

با وجود Template Engineهای مختلف نیز نوشتن و پوسته‌سازی بسیار ساده‌تر شده است. شما می‌توانید در این ابزارها مطالب‌تان را در قالب Markdown و یا HTML بنویسید و آن را منتشر کنید. پس همه چیز خوب است. شاید اینگونه به نظر برسد، اما زمانی که بخواهید قابلیت‌های تعاملی را به وبسایت‌تان اضافه کنید کمی با مشکل همراه خواهید بود. برای مثال شما دسترسی به فرم‌های تماس ندارید. اما نیازی نیست که نگران باشید، شما می‌توانید از ویژگی‌ها و گزینه‌های خارجی استفاده کنید. Google Forms یک مورد مناسب است.

در این مطلب قصد داریم تا با کمک همدیگر یک فرم تماس با ما را به یک برگه استاتیک اضافه نماییم.

داده‌هایی که از طرف یک فرم ارسال می‌شوند، نیاز است که توسط سرور پردازش شده و در نهایت در یک بانک اطلاعاتی ذخیره شوند. از آنجایی که در Jekyll و Hugo خبری از پردازش سرور و بانک اطلاعاتی نیست، پس باید از ابزارهایی مانند Google Forms استفاده کنیم. 

۱. ایجاد یک فرم جدید در Google Forms

وارد Google Forms شده و یک قالب را انتخاب کنید. می‌توانید این قالب را خودتان درست کنید. از آنجایی که این مطلب آموزشی است و همچنین قالب‌های گوگل بسیار زیبا هستند، قصد داریم از یک مورد آماده استفاده کنیم. 

قالب Contact Information به صورت پیشفرض سه فیلد مشخص را در خود دارد که شامل نام، ایمیل و آدرس می‌شود. البته شما می‌توانید موارد مختلف دیگری را نیز بسته به نیاز خود اضافه کنید. 

برای حذف کردن یک فیلد کافی‌ست روی آن کلیک کرده و گزینه «سطل زباله» را انتخاب کنید. از طریق آیکون + نیز می‌توانید فیلدهای جدیدی را به فرم‌تان اضافه نمایید. هر کدام از این موارد کاربرد خاص خود را دارند.

به صورت پیشفرض زمانی که کاربر بخواهد از طریق فرم با ما ارتباط برقرار کند، گوگل وی را مجبور می‌کند تا وارد حساب شخصی خود شود. اما ما چنین چیزی را نمی‌خواهیم. برای تغییر چنین حالتی روی آیکون تنظیمات کلیک کرده و گزینه Limit to 1 response را غیر فعال نمایید.

حال تنظیمات را ذخیره کنید. برای آنکه مطمئن شوید فرم به خوبی کار می‌کند، کافی‌ست آدرس فرم‌تان را در یک مرورگر دیگر که در آن وارد حساب گوگل خود نشده‌اید وارد کرده و از آن استفاده نمایید. 

پس از آن، تمام پاسخ‌ها را می‌توانید از طریق قسمت Responses دنبال کنید. 

۲. ایجاد یک فرم مشابه روی وبسایت خودتان

حال برای آنکه بتوانید فرم را روی وبسایت نشان دهید باید یک فرم شبیه به فرم قبلی خودتان را روی صفحه وب ایجاد کنید. طبیعتا چنین کاری از طریق نوشتن کدهای HTML انجام می‌شود. لازم نیست که دقیقا همان فرم را به صورت کامل طراحی کنید، تنها مراقب باشید که فیلدها را به درستی وارد کنید. 

<form action="" method="post">
      <label>Name*</label>
      <input type="text" placeholder="Name*" name="" required>
  
      <label>Email Address*</label>
      <input type="email" placeholder="Email address*" name="" required>
    
      <label>Subject</label>
      <input type="text" placeholder="Subject" name="">
    
      <label>Message*</label>
      <textarea rows="5" placeholder="Message*" name="" required></textarea>
     
      <button type="submit">Send</button>
</form>

حال برای طراحی هم می‌توانید المان‌های CSS منحصر به فرد خودتان را نیز داشته باشید. 

مرحله بعد باید ارتباط میان این کدها و Google Forms را فراهم کنیم. برای اینکار ما به name و action نیاز داریم.

۳. افزودن مقادیر به name و action

گوگل برای action و name از مقادیر مشخص شده‌ای استفاده می‌کند. همانطور که می‌دانید action خاصیتی‌ است که به تگ form مربوط می‌شود. برای آنکه مقدار این خاصیت را پیدا کنید، لازم است در مرورگری که وارد حساب کاربری گوگل نشده، فرم‌تان را باز کنید و وارد کدهای صفحه بشوید. راحت‌ترین راه برای انجام چنین کاری استفاده از ابزار Inspect است.

سعی کنید در صفحه Inspect مقداری که برای خاصیت action گذاشته شده را پیدا کرده و آن را کپی و در فرم HTML خودتان وارد کنید.

چنین کاری را نیز برای خاصیت name انجام دهید. البته در نظر داشته باشید که برای هر فیلد یک خاصیت name و طبیعتا یک مقدار مشخص وجود دارد، پس در رابطه با ورودی‌ها اشتباه نکنید.

با انجام تمام موارد انتظار می‌رود که شکل کدهای شما شبیه به زیر باشد. –البته با داده‌های متفاوت-:

<form action="https://docs.google.com/forms/d/e/safdalfjaISv65R6J11H0o_7FadflUm/formResponse" method="post">
      <label>Name*</label>
      <input type="text" placeholder="Name*" name="entry.895563655" required>
  
      <label>Email Address*</label>
      <input type="email" placeholder="Email address*" name="entry.772189125" required>
    
      <label>Subject</label>
      <input type="text" placeholder="Subject" name="entry.203645991">
    
      <label>Message*</label>
      <textarea rows="5" placeholder="Message*" name="entry.190021963" required></textarea>
     
      <button type="submit">Send</button>
</form>

حال فرم داخل وبسایت شما، به Google Forms متصل شده است. می‌توانید یکسری داده‌های تست را در فرم وارد کرده و در نهایت دکمه ارسال را بزنید. حال وارد حساب Google Forms شوید و در تب RESPONSES اطلاعات جدید را مشاهده بکنید.

۴. ریدایرکت به یک صفحه تشکر

بعد از تست بالا، مطمئنا متوجه شدید که بعد از ارسال اطلاعات فرم، با یک صفحه تشکر از طرف گوگل مواجه شدید. حال اگر بخواهید که این اطلاعات را تغییر دهید و به شیوه‌ای دیگر این تشکر را نشان دهید، می‌توانید به صورت زیر عمل کنید.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" 
onload="if(submitted) {window.location='thankyou.html';}"></iframe>

<form action="https://docs.google.com/forms/d/e/safdalfjaISv65R6J11H0o_7FadflUm/formResponse" 
method="post" target="hidden_iframe" onsubmit="submitted=true;">
...
</form>

در کدهای جاوااسکریپتی بالا که درست قبل از تگ form نوشته شده است، باید صفحه‌ای که می‌خواهید بعد از ارسال فرم به کاربر نمایش داده شود را به عنوان یک مقدار در window.location وارد کنید.

البته مراقب مقدار target و onsubmit نیز در داخل تگ form باشید.

نکته اضافی:

شما می‌توانید فرم‌های گوگل را به صورتی بسیار حرفه‌ای پیکربندی کنید. برای مثال می‌توانید با هر بار پاسخ به فرم‌تان آن را در ایمیل اصلی خود مشاهده کنید. و یا آنکه تمام پاسخ‌ها را در قالب یک فایل csv دریافت نمایید. 

در پایان

وبسایت‌های ایستا انتخابی بسیار عالی برای هر فردی است که می‌خواهد با استفاده از یک ابزار ساده، کارکرد ساده‌ای را نشان دهد. البته مطمئنا این ابزارها نمی‌توانند همه چیز را برای شما فراهم کنند، به همین دلیل باید از ابزارهای خارجی استفاده کنید. در این مطلب شیوه استفاده از Google Forms در این وبسایت‌ها آموزش داده شد.

منبع