EMBED

埋め込みフォームのカスタマイズ

Inqbox のフォームは CSS を一切持たずに、お使いのサイトの中へそのまま描かれます。つまり、サイト側の CSS だけで見た目を決められます。項目ごとに目印（data-field など）が付くので、1 項目だけ幅を変えるような調整もできます。

1タグを貼る#

フォームを置きたい場所に、次の 2 行を貼ってください。公開キーは設定画面に表示されています。

Pro プランのみFree プランで作れるフォームは 1 つまでです。2 つ目以降を作るには Pro プランへの変更が必要です。

<script src="https://inqbox.jp/widget.js" data-key="あなたの公開キー"></script>
<div data-inqbox-form></div>

script に async は付けないでください（公開キーを読めなくなります）。フォームは<div data-inqbox-form> の中に描かれます。

2React / Vue のサイトに置く#

React や Vue では、スクリプトが走った時点ではまだフォームを置く場所が画面にありません。自動では見つけられないので、描画が終わってからwindow.inqbox.mount(要素) を呼んでください。専用のパッケージは要りません。

import { useEffect, useRef } from "react";

export function ContactForm() {
  const ref = useRef(null);

  useEffect(() => {
    // 画面を行き来して戻ってきたときは、読み込み済みのものをそのまま使う
    if (window.inqbox) {
      window.inqbox.mount(ref.current);
      return;
    }
    const script = document.createElement("script");
    script.src = "https://inqbox.jp/widget.js";
    script.dataset.key = "あなたの公開キー";
    script.onload = () => window.inqbox.mount(ref.current);
    document.head.appendChild(script);
  }, []);

  return <div ref={ref} data-inqbox-form />;
}

Vue なら同じ形で：

<script setup>
import { onMounted, ref } from "vue";

const el = ref(null);

onMounted(() => {
  if (window.inqbox) return window.inqbox.mount(el.value);
  const script = document.createElement("script");
  script.src = "https://inqbox.jp/widget.js";
  script.dataset.key = "あなたの公開キー";
  script.onload = () => window.inqbox.mount(el.value);
  document.head.appendChild(script);
});
</script>

<template>
  <div ref="el" data-inqbox-form></div>
</template>

Next.js の App Router では "use client" を付けたコンポーネントに書いてください。同じ要素に対して mount を二度呼んでもフォームは 1 つだけです（React の Strict Mode で読み込み時に二度呼ばれても増えません）。

3出てくる HTML#

設定した項目の順に、次のような HTML が作られます。クラス名は付きません。

<div data-inqbox-form>
  <div data-field="body" data-type="textarea" data-required>
    <label><span>お問い合わせ内容 *</span><textarea rows="5"></textarea></label>
  </div>
  <!-- 項目に説明を付けると、項目名の直後に span[data-description] が入る -->
  <div data-field="companyName" data-type="text">
    <label><span>会社名</span><span data-description style="white-space: pre-wrap">法人の方のみ</span><input type="text"></label>
  </div>
  <div data-field="subject" data-type="select">
    <label><span>ご用件</span><select>…</select></label>
  </div>
  <div data-field="source" data-type="checkbox">
    <fieldset>
      <legend>弊社を知ったきっかけ</legend>
      <div>
        <label><input type="checkbox" value="検索"><span>検索</span></label>
        …
      </div>
    </fieldset>
  </div>
  <div data-field="plan" data-type="radio">
    <fieldset>
      <legend>ご検討中のプラン</legend>
      <div>
        <label><input type="radio" name="plan" value="無料"><span>無料</span></label>
        …
      </div>
    </fieldset>
  </div>
  <!-- 「その他（自由記述）」を出すと、選択肢の後ろに input が 1 つ足される -->
  <!-- 説明文に書いた http(s) の URL は a になる（前後の文字は span に入る） -->
  <div data-field="privacy" data-type="note">
    <p style="white-space: pre-wrap">個人情報は<a href="https://example.com/privacy" target="_blank" rel="noopener noreferrer">こちら</a>。</p>
  </div>
  <button type="button">送信</button>
  <p></p>
</div>
目印入る値使いどころ
data-field項目の id（本文なら body、追加した項目は英数字の長い id）特定の 1 項目だけ幅や位置を変える
data-typetext / textarea / select / checkbox / radio / note種類ごとにまとめて整える
data-description項目名の下に出る補足に付く補足だけ小さく薄くする
data-required必須の項目にだけ付く必須の項目名を目立たせる

追加した項目の data-field は自動で付く長い id なので、設定画面の項目ごとに「CSS セレクタ」として表示しています。そのままコピーして使えます。

4CSS の例#

そのままサイトの CSS に貼れる例です。2 カラムに並べ、チェックボックスをピル型にしています。色や余白はサイトに合わせて変えてください。

/* 2 カラムに並べ、本文とチェックボックス群だけ横いっぱいにする */
[data-inqbox-form] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  max-width: 44rem;
}
[data-inqbox-form] [data-type="textarea"],
[data-inqbox-form] [data-type="checkbox"],
[data-inqbox-form] [data-type="radio"],
[data-inqbox-form] [data-type="note"],
[data-inqbox-form] > button,
[data-inqbox-form] > p { grid-column: 1 / -1; }

[data-inqbox-form] label { display: flex; flex-direction: column; gap: .375rem; }
[data-inqbox-form] label > span,
[data-inqbox-form] legend { font-size: .8125rem; font-weight: 700; }
/* 必須の項目名だけ色を変える */
[data-inqbox-form] [data-required] > label > span { color: #0d6f63; }

[data-inqbox-form] input,
[data-inqbox-form] textarea,
[data-inqbox-form] select {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .7rem;
  border: 1px solid #d5ddda;
  border-radius: .375rem;
}
[data-inqbox-form] textarea { min-height: 8.5rem; resize: vertical; }
[data-inqbox-form] :focus-visible { outline: 2px solid #0d6f63; outline-offset: 1px; }

/* 項目名の下に出る補足 */
[data-inqbox-form] [data-description] { font-size: .8125rem; font-weight: 400; color: #5b6660; }

/* 説明文（入力欄ではなく文章を出すだけの項目） */
[data-inqbox-form] [data-type="note"] p { margin: 0; font-size: .875rem; color: #5b6660; }

/* チェックボックス / ラジオ群はピルに。fieldset の既定の枠は必ず消す */
[data-inqbox-form] fieldset { border: 0; margin: 0; padding: 0; }
[data-inqbox-form] fieldset > div { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
[data-inqbox-form] fieldset label {
  flex-direction: row;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  border: 1px solid #d5ddda;
  border-radius: 999px;
}
[data-inqbox-form] fieldset input { width: auto; }
/* 「その他」の自由記述欄。未選択のあいだは hidden 属性で隠れている */
[data-inqbox-form] fieldset input[type="text"] { width: 100%; }

/* 送信ボタン */
[data-inqbox-form] > button {
  justify-self: start;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: .625rem 1.75rem;
  border: 0;
  border-radius: .375rem;
  background: #0d6f63;
  color: #fff;
}
/* 送信ボタンの直後の <p> がエラー欄。空のときは畳む */
[data-inqbox-form] > button + p { color: #b3261e; font-size: .875rem; }
[data-inqbox-form] > p:empty { display: none; }

5つまずきやすいところ#

  • チェックボックスの枠が出る
    ブラウザが fieldset に枠と余白を付けます。border: 0; padding: 0; で消してください。
  • 必須の「*」を消したい
    「*」は項目名の文字として入るため CSS では消せません。[data-required] を使って色や下線で示すのがおすすめです。
  • 空の隙間ができる
    エラー文用の <p> が常にあるためです。> p:empty { display: none; } で畳めます。
  • 項目が本文だけになることがある
    通信が不安定で項目の設定を読み込めなかったときは、問い合わせを取りこぼさないよう本文だけのフォームを表示します。[data-field="body"] は必ずある前提で書いてください。

見た目をどう変えても、迷惑な売り込みの判定には影響しません。何を歓迎するかの書き方は設定の書き方にまとめています。