おしゃれデザインフォームが作れるGridForms。

LINEで送る
Pocket

かんたんにおしゃれ?なフォームが作れます。

まずは当ブログのお問い合わせフォームをご覧ください。

http://gallery-lounge.com/contact/

人に寄って賛否は分かれるでしょうが、なんだかお役所の記入書類の申し込み用紙みたいですよね。(笑)フォームデザインて結構ホームページ作成しているとありきたりな感じになってしまっていやだなーっていつも思っていたんですがこれに出会ってから意識が結構変わりました。

お問い合わせフォームってデザイン大事ですよね。ちなみに当ブログの問い合わせフォームは結構盛り過ぎです。もっとシンプルにしないと入力するの億劫になっちゃいますよね・・・。(笑)そのうち改善します。。。

レスポンシブなのでスマホもタブレットもとてもいい感じに。

パソコンから見たときのイメージ

スクリーンショット 2014-07-04 16.56.07

スマホから見たときのイメージ

スクリーンショット 2014-07-04 16.56.25

導入方法

設置もとても簡単です。以下の「GridForms」のサイトからGrid Forms一式をダウンロードしてサーバ上の任意の場所へアップロードしてください。

http://kumailht.com/gridforms/

GridFormsを読み込み。

今回はダウンロードしたフォルダをそのままアップロードして必要なファイルを読み込むというスタイルで。

jQuery本体も読み込むことをお忘れなく。wordpressなら入っているので下記のままでOKです。phpを入れているのは不要なページでヘッダーに余計なリクエストをさせないためです。is_pageで signupとcantactというスラッグのページの時だけ呼び出すようにしています。Wordpressで特定のページだけに使用したい場合はヘッダーに以下のように記入してスラッグだけ書き換えてくれたら動くはずです。

html

ちなみに以下のソースはWordpressのプラグイン「ContactForm7」のショートコードが入っていますが通常のフォームでももちろん大丈夫です。

ざっとソースを見ていただくとわかるかと思いますがdata-row-spanという行(横)の中に、data-field-spanという(データのコマ)が入ります。従って、data-row-spanを「4」にするならば、data-row-spanの合計数も「4」になるようにしなくてはなりません。これだけ押さえてればあとは自由自在です。また外枠の<fieldset>は一つのブロックになります。フォームの大項目としてくくるのがベストでしょう。当ブログの問い合わせフォームは「お客様情報をご記入ください」、「制作したいホームページに付いて」、「お打ち合わせについて※必須」などがひとつの<fieldset>としてくくられています。※以下新しいタブで開きます。

http://gallery-lounge.com/contact/

カスタマイズ次第で結構いい感じにデザインも出来そうなので今後も色々活躍してくれそうです。おためしを!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">