「商品について問い合わせる」をクリックしたあと、問い合わせフォームに商品名を自動で反映させたい

Store Design

Topic summary

目的: 商品詳細ページの「問い合わせ」ボタンから遷移後、問い合わせフォームに商品名を自動入力したい。

実装内容:

  • contact-form.liquid にJSを追加。URLのクエリパラメータ product を URLSearchParams で取得し、textarea（name=“contact[body]”) が空なら「商品名: …」と初期値を挿入（decodeURIComponent 使用）。
  • main-product.liquid のボタンリンクを /pages/contact?product={{ product.title | url_encode }} に変更（スタイル指定・target=“_blank”）。

現状: 実装を試したが商品名がフォームに反映されず未達成。原因は不明。

補足: 重要要素はクエリパラメータ product の受け渡しと、問い合わせフォーム側の textarea セレクタの一致有無。

ステータス: 解決策募集中。未解決・継続中。

Summarized with AI on December 25. AI used: gpt-5.
1

表題の件の通りになります。
いくつか方法を試しましたがダメでした😭

お分かりになる方いらっしゃいましたら、よろしくお願い致します！

▼該当ページ

「商品について問い合わせる」をクリックしたあと、問い合わせフォームに商品名を自動で反映させようと思ってます。

①contact-form.liquidの変更
以下を追加

②main-product.liquidに以下を追加

<a href=“/pages/contact?product={{ product.title | url_encode }}”

class=“button button–full-width” style=“background: {{ block.settings.color_btnBk }}; color: {{ block.settings.color_btnTxt }};” target=“_blank”>{{ block.settings.btn_txt }}

-––

以上になります。

初歩のCSS程度の知識でAIを用いながら試しましたが、実現には至らず…

ぜひ、お力お借り出来たら嬉しいです！

2

①の追加内容が消えていたので下記に記載します👇

←——script>

document.addEventListener(‘DOMContentLoaded’, function() {

const urlParams = new URLSearchParams(window.location.search);

const productName = urlParams.get('product');



if (productName) {

  const messageField = document.querySelector('textarea\[name="contact\[body\]"\]');

  

  if (messageField && !messageField.value) {

    messageField.value = '商品名: ' + decodeURIComponent(productName) + '\\n\\nお問い合わせ内容:\\n';

  }

}

});

</——script>

3

こんにちは @km8

テーマファイルにアクセスできないと、テーマファイル内でカスタムコーディングが必要になるため、それは絶対に不可能です。共同編集者リクエストのコードをプライベートメッセージで共有していただけますか？そうすれば、対応させていただきます。

よろしくお願いします。
Moeed

4

Dear Moeed！

お返事ありがとうございます！

費用を使ってまでのプロジェクトではないので、お言葉だけ有難く頂戴しておきます :grin: