Pembuatan Formulir Kontak Jekyll dengan Keamanan Tambahan!

Jekyll yang dihosting di Github Pages atau layanan hosting statis apa pun tidak akan menjalankan formulir php normal. Blog Jekyll bersifat statis, jadi kita harus menggunakan formulir yang berfungsi untuk situs statis. Ini adalah formulir sederhana yang berfungsi di blog Jekyll apa pun.

Ketika saya memindahkan salah satu blog saya dari WordPress ke Jekyll dan meng-host-nya di Github Pages, saya menghadapi masalah besar. Yang mana – bagaimana cara menambahkan formulir ke situs web Jekyll yang statis? Secara umum, tulang punggung formulir adalah phpkode yang mengambil data dan mengirimkannya ke alamat email yang ditentukan. Halaman Github menjadi statis tidak dapat melakukan eksekusi sisi server. Jadi kita tidak bisa menggunakan phpformulir.

mengapa kita harus menggunakan formulir?

Formulir adalah cara untuk berinteraksi dengan pengguna. Memberikan email pribadi dan nomor telepon dapat menyebabkan menerima banyak spam. Ini adalah alasan mengapa tidak ada situs web terkenal yang menyertakan nomor telepon pribadi atau nomor telepon mereka.

Formulir di sisi lain sangat berguna dalam kasus seperti itu di mana Anda tidak ingin memberikan detail pribadi Anda. Ini adalah cara yang lebih baik untuk berinteraksi dengan pengguna.

Formulir dapat berupa formulir kontak, formulir berlangganan, formulir pendaftaran, formulir keluhan, formulir survei dll., Di mana pengguna memasukkan beberapa data dan yang mencapai pemilik situs untuk membuat keputusan atau kesimpulan lebih lanjut berdasarkan entri.

Formulir di Jekyll

Ada beberapa solusi untuk membuat formulir di blog Jekyll.

  1. Formspree
  2. Bentuk sederhana
  3. Formulir Google

Formspree memiliki batasan 1000 entri / bulan. Ini lebih dari cukup untuk pemula seperti saya. Anda dapat memilih keanggotaan Gold untuk lebih banyak entri dan mendapatkan akses ke database Formspree.

Tapi, saya lebih suka SimpleForm karena satu formulir yang dibuat dalam bentuk sederhana dapat digunakan pada halaman apa pun tanpa verifikasi. Jadi untuk mengetahui cara menyiapkan bentuk sederhana, baca: Cara membuat formulir menggunakan SimpleForm .

Saya telah memperhatikan bahwa SimpleForm menjual data kepada pihak ketiga, yang adil untuk layanan gratis tetapi saya tidak bisa mempercayai mereka dengan data pengguna. Jadi saya sarankan menggunakan Formulir Google. Saya tahu bahwa Google menggunakan data untuk penargetan iklan tetapi saya belum menerima email spam apa pun setelah beralih. Saya dapat menanggung iklan.

Baca: Kustomisasi Formulir Google

Saya akan menjelaskan yang paling sederhana di antara keduanya – Formspree.

Langkah 1: Buat formulir

Mari kita buat formulir sederhana dan membuatnya berfungsi. Saya hanya akan memiliki dua opsi untuk input pengguna – Nama dan Email. Salin dan tempel kode formulir di bawah ini di dalam tag tubuh (atau di mana pun Anda inginkan bentuknya).

Biarkan repositori ini tetap terbuka. Di sini saya memiliki formulir sederhana yang dibuat menggunakan Formspree.

<form action="" method="">
    <p>Name: </p><input type="text" name="name"><br />
    <p>Email: </p><input type="email" name="email"><br />
    <input type="submit" value="Send">
</form>

Jadi hasilnya akan terlihat seperti ini.NameEmailSend

Langkah 2: Buat itu berfungsi

Jika Anda melihat kode untuk formulir, tindakan dan metode kosong. Formspree menyarankan Anda untuk menambahkan tindakan dan metode dalam format ini.

<form action="//formspree.io/your@email.com" method="POST">
    <p>Name: </p><input type="text" name="name"><br />
    <p>Email: </p><input type="email" name="email"><br />
    <input type="submit" value="Send">
</form>

Setiap kali pengguna mengirimkan nama dan emailnya, data akan dikirim ke formspree.iositus web dan kemudian formspree mengirimkannya kembali ke email Anda dengan perinciannya.

Coba masukkan sesuatu dan lihat apakah Anda menerima email. Untuk pertama kalinya, Anda harus memverifikasi alamat email Anda. Setelah itu, Anda dapat menerima email tanpa kerumitan.

Ini adalah proses singkat membuat formulir di situs web laman GitHub. Bagaimana jika Anda ingin mengarahkan pengguna ke halaman web khusus setelah mereka selesai mengirimkan formulir di blog Jekyll atau situs web halaman GitHub?

Langkah 3: Halaman khusus terima kasih

Setelah pengiriman, pengguna akan diarahkan ke halaman formspree terima kasih secara default. Tetapi jika Anda ingin itu menjadi halaman kustom Anda sendiri terima kasih maka Anda dapat melakukannya dengan menambahkan kode ini.

<input type="hidden" name="_next" value="//path/thanks.html" />

Saya punya contoh yang berfungsi di sini – kontak nallikayi . Setelah Anda mengisi semua detail, Anda akan diarahkan ke halaman khusus dengan pesan terima kasih .

Pastikan Anda membuat halaman terima kasih di halaman Github dengan namanya thanks.html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

<head>
    <script type="text/javascript">
        var host = "articles.nallikayi.com";
        if ((host == window.location.host) && (window.location.protocol != "https:")) window.location.protocol = "https";
    </script>
    <link href="https://gmpg.org/xfn/11" rel="profile">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content=" ಸಂಪರ್ಕಿಸಿ Your Name: Your Email: ...">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="/css/main.css">
    <!-- Enable responsiveness on mobile devices-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title>ಸಂಪರ್ಕಿಸಿ | ನಲ್ಲಿಕಾಯಿ</title>
    <link rel="shortcut icon" href="/public/logo.png">
    <!-- RSS -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
    <link rel="alternate" href="https://articles.nallikayi.com" hreflang="kn-in" />
    <!-- Canonical -->
    <link rel="canonical" href="https://articles.nallikayi.com/contact-us">
    <!-- Open Graph -->
    <meta property="og:locale" content="kn-IN">
    <meta property="og:type" content="article">
    <meta property="og:title" content="ಸಂಪರ್ಕಿಸಿ">
    <meta property="og:url" content="https://articles.nallikayi.com/contact-us">
    <meta property="og:image" content="https://articles.nallikayi.com/public/img//nallikayi-logo.png" />
    <meta property="og:site_name" content="Nallikayi Articles">
    <meta property="og:description" content=" ಸಂಪರ್ಕಿಸಿ Your Name: Your Email: ...">
    <!-- Twitter Cards -->
    <meta name="twitter:title" content="ಸಂಪರ್ಕಿಸಿ">
    <meta name="twitter:description" content=" ಸಂಪರ್ಕಿಸಿ Your Name: Your Email: ...">
    <meta name="twitter:site" content="@nallikayi" />
    <meta name="twitter:creator" content="@sharathdt">
    <meta name="twitter:card" content="summary">
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o), m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-71469552-1', 'auto');
        ga('send', 'pageview');
    </script>
</head>

<body>
    <!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular styles, `#sidebar-checkbox` for behavior. -->
    <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
    <!-- Toggleable sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-item">
            <p><a target="_blank" href="http://nallikayi.com">ನಲ್ಲಿಕಾಯಿ ಪಾಡ್ಕ್ಯಾಸ್ಟ್</a> ಕೇವಲ ಧ್ವನಿ ಮಾಧ್ಯಮಕ್ಕಾದರೆ, ಅಕ್ಷರಗಳ ಸಿಹಿ ಇಲ್ಲಿದೆ</p>
        </div>
        <nav class="sidebar-nav"> <a class="sidebar-nav-item" href="/">ಮನೆ</a> <a class="sidebar-nav-item" href="/archive.html"> ಸಂಗ್ರಹ</a> <a class="sidebar-nav-item" href="/about"> ಪರಿಚಯ</a> <a class="sidebar-nav-item" href="/write"> ಬರೆಯಿರಿ</a> <a class="sidebar-nav-item" target="_blank" href="http://nallikayi.com">ಪಾಡ್ಕ್ಯಾಸ್ಟ್</a> <a class="sidebar-nav-item" target="_blank" href="/contact-us.html">ಸಂಪರ್ಕಿಸಿ</a> <span class="sidebar-nav-item">ಆವೃತ್ತಿ 0.8.5</span></nav>
        <div class="sidebar-item">
            <p> <a target="_blank" href="https://webjeda.com"><i class="fa fa-github-alt"></i> ವೆಬ್ ಜೇಡ</a> © 2017. ಎಲ್ಲ ಹಕ್ಕುಗಳನ್ನು ಕಾಯ್ದಿರಿಸಲಾಗಿದೆ.</p>
        </div>
    </div>
    <!-- Wrap is the content to shift when toggling the sidebar. We wrap the content to avoid any CSS collisions with our real content. -->
    <div class="wrap">
        <div class="masthead">
            <div class="container">
                <h3 class="masthead-title"> <a href="/" title="Home">ನಲ್ಲಿಕಾಯಿ</a> <small>ನಂತರದ ಸಿಹಿ</small></h3></div>
        </div>
        <div class="container content">
            <section class="post-container">
                <h1 class="title">ಸಂಪರ್ಕಿಸಿ</h1>
                <form id="form" class="form" action="https://formspree.io/namaste@nallikayi.com" method="POST">
                    <ul>
                        <li>
                            <label for="name">Your Name:</label>
                            <input type="text" placeholder="ನಿಮ್ಮ ಹೆಸರು" id="name" name="name" tabindex="1" />
                        </li>
                        <li>
                            <label for="email">Your Email:</label>
                            <input type="email" placeholder="ನಿಮ್ಮ ಇಮೇಲ್" id="email" name="_replyto" tabindex="2" />
                        </li>
                        <li>
                            <label for="message">Message:</label>
                            <textarea placeholder="ನಿಮ್ಮ ಸಂದೇಶ" id="message" name="message" tabindex="3"></textarea>
                        </li>
                    </ul>
                    <input type="submit" value="ಕಳುಹಿಸು" id="submit" />
                    <input type="hidden" name="_next" value="/thank-you.html" /> </form>
            </section>
            <p></p>
            <style>
                *,
                *:after,
                *:before {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -ms-box-sizing: border-box;
                    box-sizing: border-box;
                }
                
                body {}
                
                section {
                    max-width: 25em;
                    margin: 0 auto;
                }
                
                ul {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                }
                
                li {
                    position: relative;
                }
                
                h1 {
                    display: block;
                    text-align: center;
                    background: #323A45;
                    color: white;
                    margin: 0;
                    padding: 0.75em 0;
                    font-weight: normal;
                    border-radius: 5px 5px 0 0;
                }
                
                form {
                    border-radius: 0 0 5px 5px;
                    border: 1px solid #ccc;
                    border-top: none;
                    background: #fff;
                }
                
                ul li:not(:last-child) {
                    display: block;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 1em;
                }
                
                label {
                    display: block;
                    font-size: .8125em;
                    /* 13/16 */
                    position: absolute;
                    top: 1.6em;
                    left: 1.4em;
                    color: #f1773b;
                    opacity: 1;
                    transition: top 0.4s ease, opacity 0.6s ease, color 0.4s ease;
                }
                
                input,
                textarea {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border: 0;
                    outline: none;
                    padding: 2.25em 1em 1em;
                    font-size: 1.2em;
                }
                
                textarea {
                    height: 16em;
                    resize: none;
                    font-size: 1.2em;
                    font-family: verdana;
                    padding-left: 0.85em;
                }
                
                input[type="submit"] {
                    display: block;
                    background: #f1773b;
                    padding: 1em;
                    color: white;
                    text-transform: uppercase;
                    cursor: pointer;
                }
                
                .js-hide-label label {
                    opacity: 0;
                    top: 1.8em;
                }
                
                .js-unhighlight-label label {
                    color: #333;
                }
                
                .js-highlight-label label {
                    color: #f1773b;
                }
                
                .g-recap {
                    width: 50%;
                    margin: 0 auto;
                }
            </style>
        </div>
    </div>
    <label for="sidebar-checkbox" class="sidebar-toggle"></label>
    <div class="fixed-link-box">
        <a href="https://feedburner.google.com/fb/a/mailverify?uri=articlesnallikayi&loc=en_US" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" class="rss-link"></a>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </body>

</html>

Langkah 4: Keamanan dari bot

Jika formulir Anda tidak aman, itu dapat mengakibatkan menerima email spam. Ini karena pemanen email dapat mengambil email Anda dari kode formulir.

Untuk menipu bot, Formspree telah menyediakan opsi yang disebut _gotcha. Ini adalah bidang input yang hanya dapat dilihat oleh bot tetapi tidak untuk pengguna. Jika sebuah entri dibuat di bidang tak kasat mata ini, itu berarti seseorang dapat melihat melalui elemen tak kasat mata Anda! Pasti bot !! Entri formulir ini diabaikan.

<input type="text" name="_gotcha" style="display:none" />

Langkah 5: Amankan email Anda

Ketika Anda menyebutkan email Anda dalam teks yang jelas di dalam formulir Anda, bot panen email dapat dengan mudah menangkapnya. Yang dapat mengakibatkan menerima banyak email spam. Jadi, Anda dapat menggunakan kode ini untuk menyuntikkan email Anda. Kode akan bergabung dengan string ke alamat email yang bermakna. Tetapi bot tidak akan mengenali ini sebagai email.

<form id="formaction" method="POST">
    <p>Name: </p><input type="text" name="name"><br />
    <p>Email: </p><input type="email" name="email"><br />
    <input type="submit" value="Send">
</form>
<script>
    var contactform =  document.getElementById('formaction');
    contactform.setAttribute('action', '//formspree.io/' + 'your' + '@' + 'email' + '.' + 'com');
</script>

Langkah 6: Keamanan ultra

Pada langkah 5, email Anda tidak dapat dibaca oleh bot tetapi seorang manusia jelas dapat menghubungkan titik-titik dan mencari tahu alamat emailnya. Jika Anda paranoid tentang memberikan email dengan cara apa pun, gunakan metode ini.

Encode seluruh formulir!

Masuk ke Enkoder dan salin tempelkan seluruh formulir Formspree Anda dan tekan kirim. Alat ini akan menyandikan data Anda menjadi seperti ini.

<script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x,y){var i,o=\"\",l=x.length;for(i=0;i<l;i++){if(i>(69+y))" +
"y*=2;y%=127;o+=String.fromCharCode(x.charCodeAt(i)^(y++));}return o;}f(\"#3" +
")+=#$\\\"m(g(x)%5'v>t6gy~q13]\\031L\\017\\001\\013\\001\\023\\000E\\006V\\0" +
"03\\001U\\030\\030\\030\\036\\026\\\\\\rX\\024\\020\\030\\0108\\023\\031\\0" +
"33Au*o+45.)4>3%vz}ijj8)m-{3$v a~\\177kCI\\nF\\r^[ZNFX\\003E\\020B\\002\\001" +
"\\n[\\r\\t\\005\\r^\\025\\024\\023@S\\026\\003Gn\\\"*\\\"6\\0042o!`q6>(::\\" +
"\"?r<z+-(slq13IZ\\037\\005LGOU]E6I + 2!=F@D)*EHI&'LMN\\\\^6?.b\\\"BR3>.b" +
"\\\"615>BbJYF?>.\\016\\\"\\\\pZR)\\016N\\\\^4L-\\016N\\\\^e67\\tE/zs`Bb_=<6" +
"*=SL22ZRn\\027E3?n=-\\013T*|gn)\\rN\\\\^0=.b\\\"SbOh)\\016N\\\\^1<.b\\\"706" +
"RBz)036RBL\\\"\\\\24>Bb\\023\\\\^ZRXq>IvZRh\\nL0^ZCTy5426RB\\017N0^ZpSw\\00" +
"0sz8I9B\\026n`3nx\\\\I73ZRg\\rN}!1$-Z\\020gjG3l\\003^^_ZRBbK22ZR8\\rO0^Z*Wg" +
"+626RB\\017L0^Z@QlM336RB\\016N0^Z|BbK02ZRV\\013+226RB\\rO0^Z:.\\016\\\"\\\\" +
"lZR]~C406RB\\031E)|1>.b\\\"g>. B\\034\\\"\\\\w&(B\\034\\\"\\\\=?}n\\003\\03" +
"5whu#4\\031M12ZRd\\r\\000ab1=.b\\\"616RBm\\036Id1>.b\\\"216RBU\\034fye>,\\0" +
"16\\\"\\\\otRBu?EZHIjb\\\"n^ZuUt9r^Z@V\\177\\014{_haiQE}{&gqD\\010wmt<,\\01" +
"6\\\"\\\\75>Bb(XU)B/\\016N\\\\^4>.b\\\"226RB\\013M0^Z:.\\016\\\"\\\\66>Bb=4" +
"36RB\\023L=gss#\\003T9^$RB\\005Nk5)TNp$XSZ,6X\\003;m&`lK\\nep{57\\027U+{.P7" +
"WVtCcjq}\\014aje f\\026\\033dmE|\\177V=mmth0Y\\020ipr]#\\025\\021;54?#\\033" +
"\\007;)-w7\\014K<k.hwEW+)o5r\\002\\027;2;g6L\\021f9nzyP\\033l,~3r\\022\\\"\\"+
"\"^$3q\\022\\027 pgxe\\027\\007,z.h>P\\021ive`kX\\\\)\",69)"                 ;
while(x=eval(x));
//-->
//]]>
</script>

Anda tidak mengenali apa pun. Apakah kamu?

Sebenarnya

<form action="//formspree.io/your@email.com" method="POST">
    <p>Name: </p><input type="text" name="name"><br />
    <p>Email: </p><input type="email" name="email"><br />
    <input type="submit" value="Send">
</form>

Ini bekerja seperti pesona. Anda tidak hanya menipu bot tetapi juga pemanen email manusia. Bukan tidak mungkin untuk memecahkan kode ini tetapi sulit!

Hal-hal yang perlu diingat

Berhati-hatilah untuk tidak memasukkan email pribadi Anda dalam aksi formulir karena mudah terlihat ketika sumber situs web dilihat. Anda dapat memasukkan email alternatif yang meneruskan email ke email pribadi Anda.

Juga, saya tidak merekomendasikan menggunakan formspree jika Anda meminta data sensitif kepada pengguna Anda karena salinannya disimpan dalam database formspree. Tetapi untuk pengiriman data yang tidak sensitif secara umum, formspree berfungsi seperti pesona.

Berikut ini adalah demonstrasi video tentang cara menyiapkan formulir formspree di situs web statis. Jangan lupa meninggalkan tautan situs web Anda dengan formulir yang baru dibuat, di bagian komentar.

Terima kasih sudah membaca!

Sumber : https://blog.webjeda.com/jekyll-contact-form/#step-3-custom-thank-you-page