「formify」で超簡単にLPやミニサイトにフォーム設置

当ページのリンクには広告が含まれています。

WordPressなどのCMSであれば、プラグインなどでフォームの設置は簡単にできます。プログラムが設置出来ない環境でも、htmlやJavaScriptが出来る人であれば簡単なフォームは出来ると思います。

プログラムが使えない環境だったり、コードが書ける人が居ない、などの場合ちょっと面倒ですが「formify」を使えば簡単に早くサイトにフォームを設置する事ができます。

  • 「formify」を使い始める流れが分かる
  • 「formify」をWordpressに入れる方法が分かる
目次

「formify」で簡単フォーム設置する

formify

formifyはオープンソースあなたを可能にするアプリケーション作成 、管理し、埋め込むコードを1行も書かずに任意のサイトにフォームを。

formifyのトップページより

formifyは、提供サイトのトップページにも書かれている通りコピペ1回でサイトに設定できる超簡単フォームです。formifyのサイトのUIも簡素で迷う事なく操作できます。

formifyのデフォルトイメージ

簡単で設置できるのですがUIや見た目など有料のフォームサービスの物よりよっぽどキレイ。トップページの右下のメールアイコンをクリックすると、右からスライドして出てきます。もちろんレスポンシブ&スマートフォン対応です。

CSSも当てれば、色や形などもソースがシンプルなので比較的変更もやり易いので◎

こんな場合に便利

  • エンジニアもしくはコードを書ける人がいない
  • 設置するサーバーにプログラムを置けない
  • 短期でちょっとだけ使いたい
  • とにかく急いでいる!

    formifyでフォームを設置する手順

    STEP
    formifyにログイン

    トップページの「Get started」かもしくは、https://formify.vercel.app/login のログインページからGoogleアカウントかGithubアカウントでログインします。

    STEP
    ダッシュボードでフォーム設定

    ログインするとダッシュボードがあるので、右上の「create form」からフォームを作成します。

    STEP
    フォーム項目内容の設定

    フォームの設定内容はシンプル。チェックボックスで入れたいフォームを選ぶだけですが、入力内容を確認する(バリデーション)機能はありません。
    項目も「Name」「Email」「Website」「Twitter」「Message」の5項目のみでバリデーションも無いので、単純に「プレースフォルダーとしてどの文字を使うか?」と思って良いです。
    また、入力は全て強制的に必須項目となります。

    STEP
    ソースをサイトに貼り付け

    ダッシュボードで「</>」をクリックすると、モーダルでソースコードが表示されます。ソースコードはJavaScript形式とHTML形式の2種。好きな方を選んで入れたいサイトにコピペするだけ。

    ちなみにWordPressだと「カスタムHTML」のブロックを記事内(例えば、分かり易く記事の一番下など)に入れてJavaScriptの方のソースをコピペするだけで、そのページのみ問い合わせフォームを設置する事ができます。

    ※動き方や見栄え確認など見たい方は、このページにも入れてみてますので試して見てください。

    STEP
    設置後はフォーム動作の確認

    念のため動作確認をします。入力内容はダッシュボードの設定したフォームの帯をクリックすると内容の確認ができます。内容の確認はできますが、エクスポートの機能は無いので、必要に応じてテキストをコピペして使用する事になります。

    CSSやjQueryで調整する事もできる

    プレースフォルダーはデフォルトで決まってしまってますが、CSSやjQueryを使う事で、色、サイズ、場所、文字テキストなど変更する事ができますので、どうしても気になる様でしたらちょっと手を加えても良いと思います。

    ですが、基本的に「簡単に直ぐノーコードで入れる」が主旨なので…。

    最後に

    日本人感覚からすると、個人情報に当たるものには神経質になってしまうので、基本的には会社で決められたルールに従って安全なフォームを設置する事がベストですが、クライアントの都合やどうしてもちょっとした時に使いたいと言う事も出てくると思います。WEB制作をするのであれば、こういった簡単なサービスを多くしっていると便利で対応早くできます。

    <ご注意>上記の紹介は、提供者や販売・運営者様及びその企業を差別や批判するものではありません。個人的な見解結果としての紹介となりますので、最終判断は皆さまご自身でお願いいたします。また、掲載内容は変更されていくのでこの記事記載日以降は内容が異なる場合もあります事ご了承ください。

    楽天市場で注目の商品![ sponsored ]

    • URLをコピーしました!
    目次