お問い合わせフォームの設定

Question

お世話になっております。
メイクショップのお問い合わせフォーム設定についてお伺いさせていただきます。

現在、PCのヘッダー右上部に「お問い合わせ」が表示されていて、クリックすると
お問い合わせフォームが立ち上がります。

PCフッターにメールアドレスを表示させているのですが、その部分を
「お問い合わせはこちら」にし、クリックするとお問い合わせフォームが立ち上がるように
設定するにはどのようにすればよろしいでしょうか？

また、スマホ用のトップページにも、同じように設定したい箇所があります。
こちらは独自デザイン⇒スマホ⇒トップページ編集からインラインフレームで
表示させています。

PCとスマホそれぞれの設定方法が知りたいです。
ショップURLは「投稿内容について報告する」からご連絡差し上げます。
お手数ですが何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。

Makeshopのお問い合わせフォームは
JavaScriptを利用して表示する仕組みになっており、
内のHTMLから起動させるには
JavaScriptを駆使して仕組みを作る必要がございます。

以下、PC・スマホ共用となっておりますので、ご活用ください。

最初に、を埋め込んでいる側、親のページに
下記タグをご記載ください。

= この下の行から ====================

addEventListener("message", function(e){
  if (e.origin !== "https://gigaplus.makeshop.jp") return;
  if (e.data === "inquiry" ) try{ top_sendmail(); }catch{ sslContact(); } 
}, false);

= この上の行まで ====================

次に、で埋め込まれている側、ギガプラス10内で作成したページ（fooder.htmlなど）に
下記タグをご記載いただきますようお願いします。

= この下の行から ====================

document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('a[href*="@shop.rakuten.co.jp"], a[href*="top_email"]').forEach(function(){
  this.addEventListener("click",function(e){
    e.preventDefault();
    parent.postMessage("inquiry","*");
  });
});
});

= この上の行まで ====================

Answer

ご返答いただきありがとうございます。


下記はメイクショップのスマホ⇒トップページ編集⇒HTML編集(を埋め込んでいる箇所)
に追記しました。

= この下の行から ====================

addEventListener("message", function(e){
if (e.origin !== "https://gigaplus.makeshop.jp") return;
if (e.data === "inquiry" ) try{ top_sendmail(); }catch{ sslContact(); }
}, false);

= この上の行まで ====================


下記はスマホTOPページ用としてギガプラス10内で作成したページ「index.html」
に追記しました。

= この下の行から ====================

document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('a[href*="@shop.rakuten.co.jp"], a[href*="top_email"]').forEach(function(){
this.addEventListener("click",function(e){
e.preventDefault();
parent.postMessage("inquiry","*");
});
});
});

= この上の行まで ====================


実際のページを確認してみましたが、特に変化がありませんでした。
上記に「href*="@shop.rakuten.co.jp」となっている箇所がありますが、こちらは違うものを記載した方が
いいのでしょうか？

Answer

ECマスターズの田中です。

私にて、スマートフォン用ページを確認したところ、
ページ末尾「SHOPPING INFORMATION」に含まれる
「お問い合わせ」をクリックすると、
https://www.makeshop.jp/ssl/contact/
に正しくジャンプしました。

ビビオさんの環境にて同じ動作をご確認いただけない場合、
過去に読み込んだページの内容（キャッシュ）を
読み込んでいる可能性がございますので、
別のブラウザを使う、プライベートブラウズを使う、
などして、最新のページをご確認いただきますようお願いします。

もし、違う場所を想定されていた場合は、
正しい場所を改めてご指定いただきますようお願いします。

Answer

ECマスターズの田中です。

大変失礼しました、
現在の埋め込まれている側のソースでは、
リンク以外のページ全体に対して、お問い合わせにジャンプする動作が
設定されておりましたので、

お手数ですが、
ギガプラス10内で作成したページ「index.html」に追記していただいたソースを、
下記内容に差し替えていただきますようお願いいたします。

= この下の行から ====================

document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('a[href*="@shop.rakuten.co.jp"], a[href*="top_email"]').forEach(function(a){
a.addEventListener("click",function(e){
e.preventDefault();
parent.postMessage("inquiry","*");
});
});
});

= この上の行まで ====================

差し替えていただいた上で、
異なるブラウザにて、動作をご確認いただきますよう、
よろしくお願いいたします。

Answer

お世話になっております。
無事にお問い合わせフォームを設定することが出来ました。
いつも本当にありがとうございます。