カラーミーお問い合わせフォームのカスタマイズ方法を紹介!CSSとHTMLに対応

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーのお問い合わせフォームについて知りたい
という方のために、カスタマイズについて解説をします。

この記事を読むことで、

  1. 既存フォームでできることがわかる
  2. CSSでデザイン変更方法がわかる
  3. フリーページでのお問い合わせフォーム作成がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、カラーミーのお問い合わせフォームカスタマイズについて解説していきます。

 

カラーミーの既存お問い合わせフォームでできること

カラーミーには、標準でお問い合わせフォームがあります。

既存のフォームでも多少のカスタマイズは可能なため、

ショップに合わせて内容を変えてみましょう。

簡単なカスタマイズでいい場合は、既存フォームを使ったカスタマイズがおすすめです。

表示するメッセージの変更

カラーミーにある既存のフォームは、以下の内容をカスタマイズできます。

• ショップのお問い合わせ用表示メッセージ
• 商品へのお問い合わせ用表示メッセージ

「お問い合わせフォーム」設定でこれらの表示内容を変更してください。

どちらの表示もタグの使用が可能です。

ただし、SSL対応のため画像表示タグは使えません。

「ショップのお問い合わせ用表示メッセージ」は、

ショップへのお問い合わせフォーム上部に表示されるメッセージ内容を変更できます。

初期の状態では、「当店に対するご意見ご感想、

お問い合わせなど、こちらのフォームよりお気軽にお尋ねください。」という表示です。

そのままでも問題ありませんが、必要に応じて変更してください。

また、「商品へのお問い合わせ用表示メッセージ」では、

商品へのお問い合わせフォーム上部に表示されるメッセージを変更できます。

同じく初期の状態では、「商品に関するご意見ご感想、お問い合わせなど、

こちらのフォームよりお気軽にお尋ねください。」の表示があります。

必要に応じて内容を変更してから、保存ボタンを押してください。

ショップと商品のお問い合わせを表示・非表示

同じく「お問い合わせフォーム設定」では、

ショップと商品のお問い合わせの表示と非表示設定ができます。

ショップによって必要ないフォームは、非表示設定をしましょう。

どちらも使用している場合は、

お問い合わせメールタイトルに「ショップ」や「商品」の文字が追加され、

どちらの問い合わせなのかわかるようになっています。

タイトルに文字があることで、メールを見逃しにくいです。

商品へのお問い合わせは、メール本文に商品IDが表示されています。

また、お問い合わせフォームでは、質問内容を追加することができます。

必要に応じて「お問い合わせ項目の追加と編集」から質問内容を追加してください。

質問内容は、以下の設定が可能です。

• 番号
• 質問内容
• 必須設定
• 質問を表示する場所
• 表示設定

例えば「ショップの情報をどこで知りましたか?」など、

お問い合わせした人に対するアンケートを取るような内容を追加できます。

CSSでデザインを変更する

スマホで表示されるお問い合わせフォームは、シンプルな作りです。

他のページとの統一感がないと感じる場合は、

CSSの変更でお問い合わせページのデザインを変更してみましょう。

CSSではレイアウトを大きく変更することはできませんが、

見た目を多少変えることは可能です。

カラーミーにログインしたら、スマートフォンショップの「デザイン設定」に移動します。

お問い合わせフォームのテンプレートの設定にある、

「デザイン設定」をクリックして、CSS変更をしてください。

なおレスポンシブテンプレートを使っている場合でも、

スマホ用のお問い合わせフォームを変更するためには、スマートフォンショップで変更します。

CSSの変更は、事前にバックアップを取っておくと便利です。

バックアップを取っておけば、間違った内容で保存してしまった場合でも、

以前のデザインに修正しやすくなります。

フリーページでお問い合わせフォームを作成する方法

既存のお問い合わせフォームでは、デザインを大きく変えることはできません。

背景の画像を変えるなど、デザインを大幅に変更したい場合は、フリーページを活用しましょう。

カラーミーのフリーページは自由度が高く、お問い合わせフォームも作成できます。

フリーページを新規作成

まずは、フリーページを新規作成しましょう。

カラーミーにログインしてから、ショップ作成から「デザイン」を選択します。

テンプレート編集の下に「フリーページ一覧」があるのでクリックしてください。

フリーページ一覧から「新規作成」をクリックすると、フリーページを作成できます。

HTMLを記入する

フリーページ編集欄で、ページタイトルを入力します。

ページタイトルに入力した文字は、ブラウザでタブを開いたときに表示される名前です。

「CONTACT」などお問い合わせを意味する英字を入れるといいでしょう。

次に、本文にある「ソース」をクリックしてHTMLの入力ができるようにします。

お問い合わせフォームの内容を、HTMLタグを使って記述します。

変更が済んだら保存をクリックしてください。

お問い合わせのリンクを変更

フリーページのリンクタグを、メモ帳などテキストエディタに保存しておいてください。

リンクタグは、フリーページを表示するために必要となります。

任意の場所にリンクタグを貼り付けることができます。

次に、既存のお問い合わせページのリンクを変更していきましょう。

ショップ作成のデザインから「テンプレート編集」ボタンをクリックします。

ページ種類の「共通」項目の右側にある「HTML・CSS編集」をクリック。

先ほど保存しておいたリンクタグに貼りかえます。

貼りかえる箇所は「<{$view_inq_url}>」の部分です。

フリーページで作成した「https://」から始まるURLへ貼りかえてください。

カラーミーのお問い合わせフォームをカスタマイズしよう

お問い合わせフォームのカスタマイズは、既存の機能を使うと簡単です。

表示される文字やCSSを使った見た目の変更ができます。

既存の機能ではショップのイメージに合わない場合は、フリーページを活用してください。

フリーページでお問い合わせフォームを作成する場合は、HTMLとCSSの知識が必要となるため、

上級者におすすめの方法です。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。