Loading

« ゼロからフォームをデザインする方法 - はじめようフォームメーラー5 | メイン | 2010年9月に人気のあった記事 TOP 10 »

2010年10月 7日 (木)

フォームのコード表示からブログサイトでの公開 - はじめようフォームメーラー6

第6回(最終回) フォームのコードをブログ記事に埋め込むテクニック

第6回(最終回) フォームのコードをブログ記事に埋め込むテクニック今回は、「はじめようフォームメーラー」シリーズの第6回目(最終回)としてフォームのコード出力からブログサイトでの公開までの手順について詳しくご紹介していきます。

プレゼントつき読者アンケート

また、実践としてフォームメーラーで作成した2つのサンプルフォーム「投票フォーム」と「読者アンケート」をこの記事に設置しました。

読者アンケートについては、ご回答いただいた方のなかから抽選で10名様に、「フォームメーラー Business版」を無料で3ヶ月間利用できるプリペイドコードと、シックス・アパート特製「We heart Blog トートバッグ」をプレゼントしますので、ふるってのご応募をお待ちしています(追記:2010年10月末日をもって受付終了) present

  • コード表示への遷移
  • 用途にあわせてコードを出力
  • 実践!フォームメーラー

コード表示への遷移

フォーム一覧から、「お問い合わせ」の「コード表示」ボタンを押します。

フォーム一覧からコード表示へ遷移

用途にあわせてコードを出力

「コード表示」では、以下3通りのURLとコードの出力ができます。

  1. 公開URL(ドメインは、business.form-mailer.jp)と携帯用のQRコードの出力
  2. 埋め込みコード(iframe)の出力
  3. HTMLコードの出力

それぞれ用途にあった公開方法を選択してください。

コード表示

URLリンク

「お問い合わせ」の公開URLと、携帯用のQRコード出力ができます。
※公開URLのドメインはフォームメーラーのサーバー共通のドメイン(business.form-mailer.jp)になります。

URLリンク

埋め込みコード(iframe)

外部サイト(ご自身が運営されているサイト)にフォームを埋め込む場合に「埋め込みコード(iframe)」で出力されたコードを選択します。

埋め込みコード(iframe)

HTMLコード

外部サイト(ご自身が運営されているサイト)にフォームを設置する場合に「HTML コード」で出力されたコードを選択します。

<form> 要素のみの HTML コードも出力できますので、作成されたページ内に埋め込むこともできます。

※フォームの入力内容確認画面は、フォームメーラーのサーバーになります。完了画面はフォームメーラーのサーバーまたは、外部サイトを使うか選択できます。

HTMLコード

実践!フォームメーラー

実践例として、フォームメーラーで作成した「投票フォーム」と「読者アンケート」の2つを以下に設置しました。

読者アンケートについては回答いただいた方のなかから抽選で10名様に「フォームメーラー Business版」を無料で3ヶ月間利用できるプリペイドコードをプレゼントしますので、ぜひお試しください。

サンプル1:TypePad ビジネスブログ 読者投票

投票フォームは、投票結果をリアルタイムに集計して、円または棒グラフでグラフィカルに表示することができます。

以下にサンプルを埋め込みましたので、どんなふうに動作するのか確かめてみてください。

※ 下の「送信する」ボタンをクリックするとフォームメーラーのサーバーに遷移します

「TypePad ビジネス ブログ」でお気に入りの記事カテゴリーは何ですか?

新機能紹介
デザイン・カスタマイズ
SEO(検索エンジン最適化)
SMO(ソーシャルメディア最適化)
モバイル対応
事例紹介

サンプル2:第1回「TypePadビジネスブログ 読者アンケート」

TypePadビジネスブログの読者アンケートをフォームメーラーで作成してみました。どのように動作するのか、以下のリンクからアンケートに回答してお試しください。

今回はご回答いただいた方のなかから抽選で10名様に「フォームメーラー Business版」を3ヶ月間利用できるプリペイドコードと、「We heart Blog トートバッグ」をプレゼントします。

応募期間は「2010年10月29日(金)」までです、ドシドシご応募くださいflag

まとめ

フォームメーラーを使えば、作成したフォームをフォームメーラーのサーバー上で利用することは勿論のこと、ご自身が運営されているサイトに iframe として埋め込むことや HTML として設置することも可能です。

このような運用自由度の高さも、クラウド型ウェブサービスならではの強みですよね。サイトの利用形態や用途にあわせてぜひ活用してみてください。

迷ったら、まずは無料トライアル!

全6回にわたって利用登録からフォーム設置までの工程を紹介してきた「はじめようフォームメーラー」シリーズも今回が最終回です。

この記事がきっかけで興味がわいたら、TypePad ビジネス には1ヶ月間、TypePad ホームページおまかせパック には1年間の無料利用権がバンドルされていますし、もちろんフォームメーラー Business 版を直接購入することも可能です。

そしてもしも、「ほんのちょっとだけフォームメーラーを試してみたい!」という場合には、TypePad ビジネスのトライアル版にも1ヶ月間の利用権がついてきます。ぜひこちらからもお試しください。

記事執筆、プレゼント提供

フォームメーラー Business 版 x TypePad ビジネス

フォームメーラー Business 版 x TypePad ビジネス

製品購入前のお問い合わせ

トラックバック

このページのトラックバックURL:
http://bb.lekumo.jp/t/trackback/463013/25183207

フォームのコード表示からブログサイトでの公開 - はじめようフォームメーラー6を参照しているブログ:

コメント

コメントを投稿

コメントは記事の投稿者が承認するまで表示されません。

コメントは拒否されました。

Comment below or log in with TypePad and more...

Lekumo ビジネスブログ

運営会社

  • シックス・アパート株式会社
    住所: 東京都 千代田区 神田神保町3-17-15
    ヨシダFGビル5F

    電話番号: 03-6261-4640(代表)

Copyright 2003- Six Apart, Ltd. All rights reserved.