Gatsbyを作成し、配置します.GetFormとVercelを使用したJSフォーム

スタティックサイトのフォーム提出を処理する開発者やデザイナーのために構築されたフォームバックエンドプラットフォームです.
GetFormはまた、強化されたスパムの保護を提供し、フォームのダウンロードを含むフォームの自動化、自動応答、カスタム通知、およびGoogleシート、スラック、Trelloなどの3 ^ RDのパーティーサービスへの接続.
このガイドでは、ファイルのアップロードフォームを処理する方法を発見します.JSプロジェクトは、GetFormを使用してフォームを提出し、それをVercelで展開します.
開始する前に、無料Vercel 勘定.
ステップ1:あなたのギャツビーを設定します.JSプロジェクト
インストールGatsby CLI 端末から:

$ npm install -g gatsby-cli

と新しいGatsbyアプリケーションを作成します.

$ gatsby new gatsby-site

を加えるaxios プロジェクトへの依存

$ npm install axios

Step 2 : GetFormのフォームエンドポイントを作成します.io
あなたの怒りを訪問し、新しいフォームのエンドポイントを作成します.GetFormは、フォームエンドポイントとエンドポイントのタイムゾーンを指定するよう要求します.

フォームエンドポイントを作成すると、エンドポイントの概要ページからフォームのエンドポイントをコピーできます.これは、フォームデータを送信する場所としてプロジェクトで使用されます.

ステップ3 : Gatsbyプロジェクトでフォームコンポーネントを作成する
を作成するContactForm.js ファイル/src/pages 以下のコードを持つディレクトリ

import axios from 'axios';
import React, { useState } from "react"
import 'bootstrap/dist/css/bootstrap.min.css';


const GETFORM_FORM_ENDPOINT = "YOUR-FORM-ENDPOINT";


function Form() {
    const [formStatus, setFormStatus] = useState(false);
    const [query, setQuery] = useState({
        name: "",
        email: "",
    });

    const handleFileChange = () => (e) => {
        setQuery((prevState) => ({
            ...prevState,
            files: e.target.files[0]
        }));
    };

    const handleChange = () => (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setQuery((prevState) => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        Object.entries(query).forEach(([key, value]) => {
            formData.append(key, value);
        });

        axios
            .post(
                GETFORM_FORM_ENDPOINT,
                formData,
                {headers: {Accept: "application/json"}}
            )
            .then(function (response) {
                setFormStatus(true);
                setQuery({
                    name: "",
                    email: "",
                });
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    };
    return (
        <div class="container-md">
            <h2>Gatsby File Upload Form using Getform.io</h2>
            <form
                acceptCharset="UTF-8"
                method="POST"
                enctype="multipart/form-data"
                id="gatsbyForm"
                onSubmit={handleSubmit}
            >
                <div className="form-group mb-2">
                    <label for="exampleInputEmail1">Email address</label>
                    <input
                        type="email"
                        className="form-control"
                        placeholder="Enter your email"
                        required
                        name="email"
                        value={query.email}
                        onChange={handleChange()}
                    />
                </div>
                <div className="form-group mb-2">
                    <label for="exampleInputName">Name</label>
                    <input
                        type="text"
                        className="form-control"
                        placeholder="Enter your name"
                        required
                        name="name"
                        value={query.name}
                        onChange={handleChange()}
                    />
                </div>
                <hr/>
                <div className="form-group mt-3">
                    <label className="mr-2">Upload your Resume:</label>
                    <input name="file" type="file" onChange={handleFileChange()}/>
                </div>
                <hr/>
                {formStatus ? (
                    <div className="text-success mb-2">
                        Your message has been sent.
                    </div>
                ) : (
                    ""
                )}
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        </div>
    );
}

export default Form

注意:値をYOUR-FORM-ENDPOINT const getformount formountのアンサーは、ステップ2でコピーしたエンドポイントで終了します.

我々は、完全なフォームデータをaxiosにオブジェクトとして渡します.Axiosはこれをmultipart/form-data 送信する前にオブジェクトを指定します.

パッケージマネージャ、NPMまたは糸を使用してインストールすることでブートストラップを有効にします.

NPMでnpm install react-bootstrap bootstrap糸でyarn add react-bootstrap bootstrapを使用して私たちの連絡先ページにインポートimport 'bootstrap/dist/css/bootstrap.min.css';プロジェクトライブを展開し、フォームフォームの送信を開始する準備が整いました.
ステップ4 : vercelで展開する
を使用すると、あなたのVercel for Git , それがgitリポジトリにプッシュされていることを確認します.
選択したgitプロバイダを使用してプロジェクトを

GitHub

GitLab

Bitbucket

After your project has been imported, all subsequent pushes to branches will generate  Preview Deployments , そして、すべての変更はProduction Branch (一般的に「主」ということは)Production Deployment .
Localhostか生産環境から受け取ったフォーム提出物は、SmartViewまたはTable ViewオプションのいずれかでGetFormエンドポイントダッシュボードリストに表示されます.
一旦展開されると、あなたは次のようなあなたのChiアプリのライブを見るためにURLを得ますhttps://gatsby-vercel-getform.vercel.app/
ボーナス:getform自動化
GetFormは、カスタムリダイレクト、Google Recaptchaの統合、カスタム電子メールテンプレート、autoresponseメールとZapierの統合のセットアップの自動化アクションをすることができます.畝
たとえば、カスタムメールテンプレートのアクションを使用すると、メール本文の独自のHTMLを使用することができますし、名前と電子メールの件名からは、カスタマイズしてください.

注: GetForm RunおよびGentooのgetFormオートメーションアクションに関する詳細な情報を見つけることができますfeatures getformのセクション.入出力