Tumblrでも使える!コンタクトフォームなど様々なフォームが作成できるWebサービス「Wufuu」

Web Service

先日、Tumblrを普通のブログとして使うためのカスタマイズなどをまとめた記事を書きましたが、足りなかった要素があります。

それはコンタクトフォーム。無くてもいい要素ではあるけど、あったら便利ですよね。

今回はTumblrをはじめとした問い合わせフォームなどが無いブログサービスでも使えて、様々な本格的なフォームが作成できるWebサービスWufuuのご紹介。

日本語にも対応してますよ。


使い方

まずはアカウントを作成しましょう。

WufuuのTOPページにある「Sign Up for Free!」をクリックすると、登録フォームが表示されるので各項目を入力しましょう。

アカウントを作成するとフォームマネージャー画面になるので、「New Form!」をクリックしてフォームを作成します。

無料アカウントは3つまでフォームが作成可能

 

次にフォーム作成画面になりますが、まずはシンプルな問い合わせフォームを作ってみました。

このフォームで使用しているのは「Single Line Text」「Paragraph Text」「Email」の3つだけです。

右側にはリアルタイムでプレビューが表示される

他にも、ドロップダウンやチェックボックスなど様々な項目が用意されています。

 

まずは問い合わせフォームに必要な「名前」の項目を「Single Line Text」で設置し、「Field Settings」画面でラベルの名前などを入力して設定します。

オプションで細かい設定もできます

 

名前のフィールドやメールアドレス欄など各項目を設置したら、このフォーム自体の設定をしましょう。

「Form Settings」をクリックして設定できます。

日本語対応が嬉しいですね

フォームができたら「Save Form」で保存します。

 

保存したら、受信用アドレスの設定をしましょう。

2番目の「email notifications」をクリックして受信用アドレスを入力します。

右側はSMSですかね?ここはいまいち把握していません。

 

これでフォームが完成したので、次にWebサイトに設置する為のEmbedコードを取得しましょう。

Embedコードはフォームマネージャーの「Code」をクリックします。

フォームマネージャーではAnalyticsも見れます

埋め込み用の「Embed Form Code」をクリックすると 3種類のコードがあり、WordPress用も用意されてます。

JavaScriptバージョンが推奨されていますが、私がTumblrに埋め込んだらうまく機能しなかったので、Tumblrに埋め込む場合はiframeバージョンの方が良いかもしれません。

HTML/CSSのコードも取得できるので便利

 

実装サンプル

これが実際に私のTumblrに埋め込んだフォームです。

Tumblrで作成したページの埋め込みサンプル

テストしてみましたが、ちゃんと受信します。

WordPressにはContact Form7などの便利なプラグインがあるのであまり必要無いかもしれませんが、Tumblrにコンタクトフォームが欲しいという時にはお勧めです。

無料アカウントの制限

無料アカウントの場合は作成できるフォームは3つまでだったりフィールドが10個までだったりと色々制限がありますが、問題なく使えると思います。

ぜひ以前のエントリーと合わせてTumblrの機能拡張に使ってみてください。

Tumblr以外にも問い合わせフォームが無いブログで使いたい方にもお勧めです。

リンク:Wufuu

 

Related Posts Plugin for WordPress, Blogger...
Pocket



follow us in feedly