コンサルロケッツ STATION

いよいよ秋の気配!ロケッツ4号機です。
日々、ECのコーダーとして奮闘中の31歳です。

 

前回はお米を買いに行かなければならず若干焦りながらのブログ更新でしたが、今回は大丈夫です。

 

なぜなら、すでにお米を買いに行ったからです。

 

関東は今夜から台風が直撃するとのこと。
だんだん雨風が強くなってきましたが、片手に傘、もう片手に10kgの米を抱えて帰ってきました。

 

ウチのような夫婦2人暮らしの家庭は、米10kgを約ひと月なんですね。とはいえ、先月あたりから朝ご飯をパンから米に変えてからというもの、お米の消費量がぐんと増えた我が家。
これまで白米は基本的に晩御飯だけ食卓に上がるものでしたが、朝も食べることになり単純に倍の計算になります。けれど個人的には、朝はパンよりもご飯のほうが体に合っている気がします。なにより腹持ちが良いのが嬉しいですね。

 

さて、今回は「MakeShop(メイクショップ)」の機能のひとつ「マルチフォーム」の便利な設置方法についてご紹介します。
通常、MakeShopでマルチフォームを作成すると下記のようなページにリンクするように促されます。

 

http://designdemo05.shop14.makeshop.jp/shop/enq201507060
※フォーム専用ページ(MakeShop提供のデモサイト)

 

見てみるとページ内に「フォーム表示」のボタンが設置されていますね。
このボタンをクリックするとポップアップでフォームの入力画面が表示される仕組みになっていますが、よく考えてみるとこのフォーム専用ページ、余計な気がしません?
たとえば「懸賞応募ページ」をMakeShopの機能「独自ページ」で作成したとします。当然そのページには、フォームに遷移するためのボタンを設置しますよね。
デフォルトの状態では、遷移ボタンを押すといちどフォーム専用ページにたどり着くためのURLが発行されるのですが(下記例)

 

http://ショップURL/shop/enquete.html

 

今回は、独自ページに設置したボタンをクリックすると、その場で直接フォームが開くようにしたいと思います。

 

独自ページからアンケートフォームを表示させたい

 
 
 

▼目次

 
 
 

■MakeShop(メイクショップ)について

MakeShop(メイクショップ)
MakeShopとはGMOメイクショップ株式会社が提供する大手ASP(アプリケーションサービスプロバイダー)サービスです。ECに携わる者であれば、MakeShopの名前は絶対に耳にしたことがあるという程。ユーザーは個人運営から大企業まで規模を問わず、本当に多くのネットショップがMakeshopを活用しています。
今回取り上げるのはMakeShopの数ある機能のひとつ「マルチフォーム」です。かいつまんで言えば、簡単にフォームが作成できる便利ツールといったところなのですが、この「マルチフォーム」機能を活用することで、たとえば「顧客アンケート」や「懸賞の応募フォーム」といった様々なフォームをすぐに作成できちゃうのです。コーダーなら経験があると思うのですが、イチから構築するとなるとフォームは案外手間の掛かるもの・・・。「マルチフォーム」はその構築コストを大幅に省くことができるため、とっても便利な機能なのです。

 
 
 

■「マルチフォーム」の作成方法

マルチフォームの作成方法はココを見よ!ここに全てが載っている!

 

1:マルチフォームの設定(MakeShopオンラインマニュアル)

http://ms-manual.makeshop.jp/crmenquete/

 

2:マルチフォーム案内文の設定(MakeShopオンラインマニュアル)

http://ms-manual.makeshop.jp/crmenqueteset/

 

3:マルチフォームの回答確認(MakeShopオンラインマニュアル)

http://ms-manual.makeshop.jp/crmenquetereply/

 

いかがでしたか?とてもわかりやすく掲載されていますね。さすが公式!
では、ご一読いただいたことを前提に、次はいよいよ本題のほうに移りたいと思います。

 
 
 

■独自ページから直接フォームを表示する方法

さて、いよいよ独自ページから直接フォームを表示する方法をご紹介します。
たった2つの手順で完了できるので、とても簡単に設置できますよ。

 

手順1:ボタンを設置したい箇所に以下のhtmlを設置します

※javascript:openEnqueteWindow(‘201709110’)の「201709110」の部分は、フォーム専用ページのURL末尾の数字とイコールです。

 

手順2:以下のformタグとscriptタグを設置します

※formのinputにあるvalueの値はご自身のショップIDに変換してください

 

 

以上で設置が完了しました。スマートフォンも同じソースコードをコピペするだけでOK!
ただし、そのままだと味気のないボタンになってしまいますので、各自CSSでお好みのデザインに調整してくださいね。

 

それでは来月、またお米を買う頃にお会いしましょう。

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • リープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • イーチャンス
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!