Formulário de contato Jekyll no GitHub Pages
Formgong team ·
Um formulário de contato Jekyll no GitHub Pages é HTML. O GitHub liga o modo seguro, então um plugin sem suporte não é construído. Ponha o formulário num include Liquid e envie-o ao Formgong. Os avisos chegam por e-mail e no Telegram, e o site continua estático. Nenhum plugin é necessário.
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="en"> <label>Name <input type="text" name="name" autocomplete="name" placeholder="Your name" required></label> <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>Message <textarea name="message" placeholder="How can we help?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Send</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="uk"> <label>Ім’я <input type="text" name="name" autocomplete="name" placeholder="Ваше ім’я" required></label> <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>Повідомлення <textarea name="message" placeholder="Чим ми можемо допомогти?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Залиште це поле порожнім<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Надіслати</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="pl"> <label>Imię <input type="text" name="name" autocomplete="name" placeholder="Twoje imię" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="ty@example.com" required></label> <label>Wiadomość <textarea name="message" placeholder="W czym możemy pomóc?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Pozostaw to pole puste<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Wyślij</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="tr"> <label>Ad <input type="text" name="name" autocomplete="name" placeholder="Adınız" required></label> <label>E-posta <input type="email" name="email" autocomplete="email" placeholder="siz@ornek.com" required></label> <label>Mesaj <textarea name="message" placeholder="Size nasıl yardımcı olabiliriz?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Bu alanı boş bırakın<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Gönder</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="es"> <label>Nombre <input type="text" name="name" autocomplete="name" placeholder="Tu nombre" required></label> <label>Correo electrónico <input type="email" name="email" autocomplete="email" placeholder="tu@ejemplo.com" required></label> <label>Mensaje <textarea name="message" placeholder="¿En qué podemos ayudarte?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Deja este campo vacío<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Enviar</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="fr"> <label>Nom <input type="text" name="name" autocomplete="name" placeholder="Votre nom" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="vous@exemple.com" required></label> <label>Message <textarea name="message" placeholder="Comment pouvons-nous vous aider ?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Laissez ce champ vide<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Envoyer</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="pt"> <label>Nome <input type="text" name="name" autocomplete="name" placeholder="O seu nome" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="voce@exemplo.com" required></label> <label>Mensagem <textarea name="message" placeholder="Como podemos ajudar?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Deixe este campo vazio<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Enviar</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="ar"> <label>الاسم <input type="text" name="name" autocomplete="name" placeholder="اسمك" required></label> <label>البريد الإلكتروني <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>الرسالة <textarea name="message" placeholder="كيف يمكننا مساعدتك؟" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>اترك هذا الحقل فارغًا<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">إرسال</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="he"> <label>שם <input type="text" name="name" autocomplete="name" placeholder="השם שלך" required></label> <label>אימייל <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>הודעה <textarea name="message" placeholder="איך נוכל לעזור?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>השאירו שדה זה ריק<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">שליחה</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="hi"> <label>नाम <input type="text" name="name" autocomplete="name" placeholder="आपका नाम" required></label> <label>ईमेल <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>इस फ़ील्ड को खाली छोड़ें<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">भेजें</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="ja"> <label>お名前 <input type="text" name="name" autocomplete="name" placeholder="山田 太郎" required></label> <label>メールアドレス <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>メッセージ <textarea name="message" placeholder="ご用件をご記入ください" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>この欄は空のままにしてください<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">送信</button> </form>
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="de"> <label>Name <input type="text" name="name" autocomplete="name" placeholder="Ihr Name" required></label> <label>E-Mail <input type="email" name="email" autocomplete="email" placeholder="name@beispiel.de" required></label> <label>Nachricht <textarea name="message" placeholder="Wie können wir Ihnen helfen?" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Lassen Sie dieses Feld leer<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Senden</button> </form>
Como funcionam os formulários em Jekyll
O Jekyll transforma Markdown e HTML num site estático. O GitHub Pages é o host usual e roda o Jekyll por você. Não há um servidor à espera do POST do formulário.
O GitHub Pages trava safe: true na configuração do Jekyll. Uma gem sem suporte nunca corre. Um formulário em _includes/contact-form.html basta, porque o navegador envia o HTML.
Configuração em Jekyll
- Crie um formulário no Formgong e copie a chave de acesso.
- Adicione o include. Aponte
actionparahttps://formgong.com/submite definaaccess_key,_langebotcheck. - Na página de contato, acrescente o front matter e
{% include contact-form.html %}. Num site de projeto, defina_redirectcomo{{ site.url }}{{ site.baseurl }}/thanks/. - Não acrescente uma gem de formulário. O GitHub Pages mantém
safe: truee não constrói um plugin sem suporte. - Envie o repositório. O GitHub define
JEKYLL_ENVcomoproduction. Mande um teste no endereçogithub.iopublicado.
Formgong ou um plugin do Jekyll?
Um plugin local ajuda quando você mesmo constrói o site e precisa de Ruby na hora da build.
No GitHub Pages, plugins sem suporte nunca correm. O HTML enviado ao Formgong continua a funcionar depois do push.
Perguntas e respostas
Isto funciona no GitHub Pages?
Sim. O formulário é HTML. O GitHub Pages só precisa servir o arquivo. Nenhuma gem própria é necessária.
Posso guardar a chave na config?
Sim. Ponha-a em _config.yml e imprima-a no include. A chave é pública. Não guarde ali uma senha de e-mail.
Por que o link de obrigado falha num site de projeto?
Sites de projeto vivem num subcaminho. Monte _redirect com site.baseurl, senão o navegador abre uma página que não existe.
Preciso da gem github-pages no computador?
Só se quiser o mesmo conjunto de plugins localmente. O formulário não precisa dela. Envie o HTML e teste o URL publicado.