Published on

Nhúng Google Form vào web tĩnh

Authors
  • Name
    Email
Table of Contents

Hướng dẫn nhúng Google Form vào web tĩnh

Tạo Google Form

Tạo nội dung Google Form tương ứng với các trường dữ liệu từ form html của website tại https://docs.google.com/forms

Ví dụ code html có dạng:

    <form class="form" action="">
        <label>Name</label>
        <input name="name" type="text" />
        <label>Email</label>
        <input name="email" type="email" required />
        <input type="submit" value="Send" />
    </form>

Lấy link formResponse và 'entry.'

Mở link submit Google Form bật F12 trên Windows hoặc Option+Command trên MacOS.

Ấn Ctrl+f nhập tìm kiếm formResponse và entry. để nhập vào file html như ví dụ sau:

<form class="form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScJFQ5gPqApup_8fZHyL6aN5wG_jDZ4J2b4b-4QClg2_Jtvaw/formResponse">
    <label>Name</label>
    <input name="entry.1640314572" type="text" />
    <label>Email</label>
    <input name="entry.1788839180" type="email" required />
    <input type="submit" value="Send" />
</form>

Code redirect link sau khi submit

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='https://nhungvet.com';}"></iframe>
<form class="form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScJFQ5gPqApup_8fZHyL6aN5wG_jDZ4J2b4b-4QClg2_Jtvaw/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
    <label>Name</label>
    <input name="entry.1640314572" type="text" />
    <label>Email</label>
    <input name="entry.1788839180" type="email" required />
    <input type="submit" value="Send" />
</form>

Code popup thông báo trước khi redirect link

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {alert('Thanks for submitted!'); window.location='https://nhungvet.com';}"></iframe>
<form class="form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScJFQ5gPqApup_8fZHyL6aN5wG_jDZ4J2b4b-4QClg2_Jtvaw/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
    <label>Name</label>
    <input name="entry.1640314572" type="text" />
    <label>Email</label>
    <input name="entry.1788839180" type="email" required />
    <input type="submit" value="Send" />
</form>