صفحه اصلی >> بلاگ >> چگونه می توان فرم های سفارشی گوگل را به سایت استاتیک خود اضافه کرد

چگونه می توان فرم های سفارشی گوگل را به سایت استاتیک خود اضافه کرد

دسته:html تاریخ انتشار: 11 فوریه 2021 ایمان رضایی

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

می توانید پست های خود را در Markdown یا HTML بنویسید که با کمک موتورهای templating به راحتی ارائه می شود (جکیل از Liquid استفاده می کند ، در حالی که هوگو از Go Templates استفاده می کند) همه چیز خوب است تا زمانی که بخواهید عملکرد پویایی به سایت استاتیک خود مانند فرم تماس اضافه کنید. اما ، نگران نباشید ، زیرا می توانید از یک ابزار خارجی مانند Google Forms برای پیاده سازی چنین ویژگی هایی استفاده کنید.

 

برای قرار دادن فرم تماس از فرم های GOOGLE استفاده کنید

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

در این راهنما ، ما به شما نحوه ایجاد و افزودن فرم تماس به صفحه HTML استاتیک (که بعداً می توانید آن را به الگوی Jekyll یا Hugo تبدیل کنید) نشان خواهیم داد. با این حال ، Google Forms محدود به فرم های تماس نیست. می توانید هر نوع فرم سفارشی یا نظرسنجی با آن ایجاد کنید. کاربران شما حتی نمی دانند که شما از Google Forms استفاده می کنید ، زیرا فرم ایجاد شده می تواند کاملاً با طراحی سایت شما سازگار باشد!

 

 

  1. فرم جدیدی را در پلتفرم GOOGLE ایجاد کنید

با حساب Google خود وارد سیستم عامل Google Forms شوید. می توانید فرم جدیدی را از ابتدا شروع کنید یا از الگوهای از پیش ساخته شده Google استفاده کنید. از آنجا که Google یک الگوی فرم تماس نسبتاً خوبی دارد ، به جای شروع با الگوی خالی ، از آن استفاده خواهیم کرد.

روی الگوی تحت عنوان "Contact Information" در گالری الگو در بالای صفحه کلیک کنید.

الگوی پیش فرض " Contact Information " دارای سه قسمت ضروری (نام ، ایمیل ، آدرس) و دو قسمت اختیاری (شماره تلفن ، نظرات) است. ما نام و ایمیل را حفظ خواهیم کرد اما بقیه موارد را با یک موضوع اختیاری و یک قسمت پیام ضروری جایگزین خواهیم کرد.

با کلیک روی نماد کوچک سطل آشغال که پس از کلیک روی فیلد نمایش داده می شود ، می توانید هر فیلدی را که نمی خواهید استفاده کنید حذف کنید.

 

سپس ، می توانید با کلیک روی نماد + در منوی شناور در سمت راست ، زمینه های ورودی جدید را اضافه کنید. می توانید انواع ورودی مختلفی مانند پاسخ کوتاه ، کادر تأیید ، لیست کشویی ، پاراگراف ، بارگذاری پرونده و موارد دیگر را انتخاب کنید.

برای قسمت Subject سفارشی ، از نوع ورودی پاسخ کوتاه (short answer) استفاده می کنیم. برای پیام ، پاراگراف (paragraph) را به عنوان نوع ورودی انتخاب می کنیم که به کاربران امکان می دهد پیام چند خطی وارد کنند. ما همچنین مورد دوم را با استفاده از کلید کوچک در پایین جعبه ورودی تنظیم می کنیم.

 

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

تنظیمات خود را ذخیره کنید و فرآیند ساخت فرم Google شما به پایان رسیده است. می توانید با کپی و جایگذاری URL در مرورگر دیگری که در آن به سیستم حساب Google خود وارد نشده اید ، آن را امتحان کنید. در اینجا می توانید فرم داده های آزمایشی را پر کنید.

پیام آزمایشی شما در برگه پاسخ ها نشان داده می شود که در آن می توانید تصمیم بگیرید با هر پاسخ چه کاری انجام دهید (بارگیری ، چاپ ، حذف و غیره).

 

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

اکنون ، شما باید فرم Google را که در مرحله قبل ایجاد کرده اید آینه کنید تا بتواند داده ها را از وب سایت شما به صفحه اصلی Google هدایت کند. یک فرم 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>

 

HTML لازم نیست کاملاً مشابه Google باشد ، اما باید دقیقاً همان قسمتهای فرم را داشته باشد. می توانید کلاسهای CSS خود را به فرم اضافه کنید تا با طراحی سایت شما مطابقت داشته باشد.

این name ها و action هستند که فرم موجود در سایت شما را به صفحه Google متصل می کنند.

 

  1.  مقادیرname ها و action موجود در فرم سایت خود را اضافه کنید

Google برای شناسایی هر فرم از مقادیر نام و action سفارشی استفاده می کند. ویژگی action به برچسب <form> تعلق دارد ، در حالی که ویژگی های name به قسمت های ورودی تعلق دارند. بنابراین ، شما باید این مقادیر سفارشی را پیدا کرده و به HTML اضافه کنید.

از Google خارج شوید (یا از یک مرورگر دیگر استفاده کنید) ، به نظر می رسد اگر وارد سیستم نشوید انجام بازرسی کد برای شما دشوار خواهد بود (Google موارد اضافی زیادی را به کاربران وارد شده اضافه می کند). Google Form خود را با استفاده از URL فرم بارگیری کنید و با استفاده از ابزارهای توسعه دهنده مرورگر خود آن را بررسی کنید. در Firefox می توانید این کار را با کلیک راست روی فرم و کلیک روی گزینه "Inspect Element" انجام دهید. در Chrome ، پس از کلیک راست روی عنصر ، باید گزینه "Inspect" را انتخاب کنید.

شما باید برچسب <form> را در HTML inspector پیدا کرده و مقدار ویژگی action را در HTML دلخواه خود کپی کنید.

 

شما نیز باید با چهار قسمت ورودی خود همین کار را انجام دهید. اما اکنون لازم نیست صفت action را انتخاب کنید اما ویژگی name هر قسمت ورودی را داشته باشید.

 

 

مقادیر action و name دلخواه خود را در HTML خود وارد کنید:

 

<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>

 

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

  1. دوباره به صفحه THANK YOU بر می گردیم

هنگام انجام آزمایش ، مطمئناً متوجه شده اید که سایت شما کاربر را به صفحه پیش فرض THANK YOU هدایت کرده است. اگر ترجیح می دهید کاربران خود را به صفحه سفارشی خود بفرستید ، کد زیر را در بالای فرم خود ، درست قبل از برچسب <form> اضافه کنید:


 
<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;">

 

شما باید مسیر را به عنوان thank you سفارشی خود به عنوان مقدار ویژگی window.location() اضافه کنید (در مثال بالا "thankyou.html" است).

توجه داشته باشید که شما همچنین باید target=”hidden_iframe”  و  onsubmit=”submitted=true;”  را اضافه کنید. ویژگی های برچسب <form>.

 

 

  1. تنظیمات فرم خود را پیکربندی کنید

می توانید تنظیمات فرم خود را بیشتر مدیریت کنید تا پاسخ های دریافتی خود را بهتر مدیریت کنید. به عنوان مثال ، می توانید برای هر ارسال جدید اعلان های ایمیل دریافت کنید.

به تب Responses بروید ، روی نماد سه نقطه کلیک کنید و گزینه " Get email notifications for new responses " را علامت بزنید. هر زمان که پاسخگوی جدید فرم تماس شما را ارسال می کند ، به ایمیل متصل به حساب Google شما (معمولاً آدرس Gmail) یک اعلان ایمیل ارسال می کند.

 

 

همچنین می توانید پاسخ های خود را در صفحه گسترده Google جمع آوری کنید. برای انجام این کار ، " elect response destination " را انتخاب کنید و صفحه گسترده ای را که باید داده ها را جمع آوری کند مشخص کنید (یا یک مورد جدید ایجاد کنید). می توانید پاسخ ها را به صورت پرونده . .csv  بارگیری کرده یا با یک کلیک آنها را چاپ کنید.

 

 

وب سایت های استاتیک برای هر کسی که نیاز به حضور ساده در وب دارد اما نمی خواهد از CMS مانند وردپرس استفاده کند یا هزینه میزبانی را پرداخت کند عالی است. با استفاده از ابزار خارجی ، می توانید ویژگی های پویا را به سایت استاتیک خود اضافه کنید.

Google Forms یک راه حل رایگان برای استفاده از فرم تماس سفارشی در وب سایت شما ارائه می دهد.


n0
n41

برای ثبت نظر باید وارد سایت شوید یا ثبت نام نمایید.


نظر شما با موفقیت در سیستم ثبت گردید.