前提条件
WordPress には自社サーバーに導入する「WordPress.org」と、ホスティングサービス版の「WordPress.com」があります。WordPress.org はオープンソースのため、プラン制限なく script タグを自由に使えます。一方 WordPress.com で script を含むカスタム HTML を使うには、Personal 以上の有料プランに加入したうえで、ホスティング機能を有効化する必要があります。以下では WordPress.org を例に、ブロックエディタでの手順を説明します。
- ミツモリンクでフォームを 1 個以上作成済み（フォーム ID を控えておく）
- WordPress の編集権限（管理者または編集者）
- WordPress.com をお使いの場合は有料プラン（Personal 以上）に加入し、ホスティング機能が有効化されていること
設置手順
- 01
ミツモリンクでフォーム ID を確認する
ミツモリンクのダッシュボードで対象のフォームを開き、「埋め込みコード」タブに表示される 1 行の script タグをコピーします。タグの中の data-widget-id 属性の値が、あなたのフォーム ID です。
- 02
固定ページまたは投稿を編集モードで開く
ダッシュボード固定ページ新規追加WordPress 管理画面から、フォームを設置したい固定ページ（または投稿）を編集モードで開きます。既存のページに追加する場合は、該当ページの「編集」ボタンをクリックしてください。
- 03
カスタム HTML ブロックを追加する
ブロック追加（+）ウィジェットカスタム HTMLブロック一覧の「ウィジェット」カテゴリーから「カスタム HTML」を選択します。お使いのバージョンによっては「その他」や「フォーマット」カテゴリーに分類されている場合もありますので、見つからないときは検索ボックスに「カスタム HTML」と入力してください。
- 04
埋め込みコードを貼り付ける
ミツモリンクでコピーした script タグをそのままペーストします。コード内に改行を入れず、1 行のまま貼り付けることをおすすめします。
- 05
公開する
画面右上の「公開」または「更新」ボタンを押して、変更を反映します。編集画面のプレビューではコードの動作が見えない場合があるため、公開後に実際の URL で確認してください。
<script src="https://mitsumolink.com/widget/widget.global.js" data-widget-id="YOUR_WIDGET_ID"></script>YOUR_WIDGET_ID の部分を、ミツモリンクでコピーしたコードの data-widget-id の値に置き換えてください。
動作確認
公開後、以下を確認してください。
- ページを開くとフォームが表示される
- 項目を選択すると合計金額がリアルタイムで更新される
- 「見積もりを送信する」ボタンから実際に送信できる
- Pro プランをご利用中の場合、事業者用メール通知が届く
よくあるトラブル
次のステップ
別の CMS にも設置したい方は、他のガイドをご覧ください。まだフォームを作っていない方は、無料で最初のフォームを数分で作成できます。
WordPress 公式の参考リンク
他の CMS ガイド