フォームをWordPressに埋め込む

ヘルプドッグのフォームで作成したフォームは、WordPressに埋め込むことができます。WordPressに、お問い合わせフォームを埋め込んだページを簡単に作成できます。

この記事でわかること

  • WordPressにフォームを埋め込む2つの方法の違い

  • WordPressプラグイン「Helpdog Form」を利用してフォームを埋め込む手順

  • カスタムHTMLブロックにスクリプトを貼り付けてフォームを埋め込む手順

埋め込みコードの取得方法だけを確認したい場合は、「フォームの埋め込みコードを取得する」をご確認ください。

埋め込み方法の比較

方法

フォームでコピーするコード

WordPressでの操作

WordPressプラグイン「Helpdog Form」を利用する

リンク

プラグインをインストールし、記事ページで「/helpdog」と入力して「Helpdog Form」にリンクを入力します。

カスタムHTMLブロックにスクリプトを貼り付ける

スクリプト

埋め込みたい場所に「カスタムHTML」を追加し、スクリプトを貼り付けます。

WordPressプラグイン「Helpdog Form」を利用して埋め込む

1. フォームを開く

  1. https://app.helpdog.ai/forms にアクセスし、埋め込みたいフォームを開きます。

2. 「コードを表示」をクリックする

  1. ウェブサイトにフォームを埋め込む直下にある「コードを表示」ボタンをクリックします。

ウェブサイトにフォームを埋め込む直下にある「コードを表示」ボタン
「コードを表示」ボタン

3. 埋め込み用のリンクをコピーする

  1. 「リンク」をクリックし、埋め込み用のリンクをコピーします。

「リンク」を選択して埋め込み用のリンクをコピーする画面
埋め込み用のリンク

4. WordPressプラグイン「Helpdog Form」をインストールする

  1. WordPressプラグイン「Helpdog Form」をインストールします。

WordPressプラグイン「Helpdog Form」のページ
WordPressプラグイン「Helpdog Form」

5. 記事ページで「Helpdog Form」を追加する

  1. WordPressの記事ページで「/helpdog」と入力し、「Helpdog Form」をクリックします。

記事ページで「/helpdog」と入力して表示される「Helpdog Form」
「/helpdog」と入力して「Helpdog Form」をクリックします

6. リンクを入力して「Embed」をクリックする

  1. 入力フィールドに、「3. 埋め込み用のリンクをコピーする」でコピーしたリンクを入力します。

  2. 「Embed」をクリックします。

「Helpdog Form」の入力フィールドにリンクを入力し「Embed」をクリックする画面
リンクを入力して「Embed」をクリックします

以上で、WordPressの記事にフォームを埋め込む操作は完了です。

補足:編集画面でのフォームのサイズ

WordPressの都合により、編集画面ではフォームのサイズを変更できません。記事を公開すると、フォームのサイズは自動的に調整されます。

WordPressの記事に埋め込まれたフォーム
WordPressの記事に埋め込まれたフォーム

カスタムHTMLブロックにスクリプトを貼り付けて埋め込む

1. フォームを開く

  1. https://app.helpdog.ai/forms にアクセスし、埋め込みたいフォームを開きます。

2. 「コードを表示」をクリックする

  1. ウェブサイトにフォームを埋め込む直下にある「コードを表示」ボタンをクリックします。

ウェブサイトにフォームを埋め込む直下にある「コードを表示」ボタン
「コードを表示」ボタン

3. 埋め込み用のスクリプトをコピーする

  1. 「スクリプト」をクリックし、埋め込み用のスクリプトをコピーします。

「スクリプト」を選択して埋め込み用のスクリプトをコピーする画面
埋め込み用のスクリプト

4. 埋め込みたい場所の「+」をクリックする

  1. WordPressの編集画面で、埋め込みたい場所の「+」(プラスアイコン)をクリックします。

WordPressで埋め込みたい場所にある「+」(プラスアイコン)
埋め込みたい場所の「+」(プラスアイコン)

5. 「カスタムHTML」を選択する

  1. 表示されたメニューに「HTML」と入力します。

  2. 「カスタムHTML」をクリックします。

6. スクリプトを貼り付ける

  1. 「3. 埋め込み用のスクリプトをコピーする」でコピーしたスクリプトを貼り付けます。

「カスタムHTML」にスクリプトを貼り付けた状態
「カスタムHTML」にスクリプトを貼り付けます

以上で、フォームをWordPressに埋め込む操作は完了です。

WordPressに埋め込まれたフォーム
WordPressに埋め込まれたフォーム

よくある質問

Q. WordPressの編集画面でフォームのサイズを変更できますか?

いいえ、WordPressの都合により、編集画面ではフォームのサイズを変更できません。記事を公開すると、フォームのサイズは自動的に調整されます。

関連記事

このページはお役に立ちましたか?