WordPress

フォームプラグインは WordPress の中で送信を処理します。フォームは自分のサイトに送信され、プラグインが結果を保存してメールで送ります。Ikiform に向けたプレーンな HTML フォームなら、プラグイン、データベース、メールの設定が不要で、WordPress の nonce を含まないのでキャッシュされたページでも動き続けます。

フォームを貼り付けられる人

WordPress は投稿や固定ページの HTML をフィルタリングします。unfiltered_html 権限を持たないユーザーの場合、コンテンツの保存時に <form> と <input> が削除されます。

Custom HTML ブロック

1. ブロックを追加する

   ブロックエディターで /html と入力し、Custom HTML を選びます。すべてのページにフォームを置くには、代わりにサイトエディターでフッターなどのテンプレートパーツにブロックを追加します。

2. フォームを貼り付ける

   <form class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
     <p><label>Name <input name="name" autocomplete="name" required></label></p>
     <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
     <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
     <input type="hidden" name="_redirect" value="https://example.com/thank-you/">
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <p><button type="submit" class="wp-element-button">Send</button></p>
   </form>

   wp-element-button を付けると、ブロックテーマではボタンにテーマのボタンスタイルが適用されます。フォームはテーマのフォントと入力欄のスタイルを引き継ぐので、通常 CSS は不要です。

3. プレビューしてから更新する

   ブロックの Preview タブを使ってから保存します。エディターを再読み込みしてブロックをもう一度開き、<form> と <input> のタグが消えていれば、そのアカウントでは保存できません。下のショートコードを使ってください。

_redirect が動くのは、フォームの許可ドメインに自分のサイトが含まれている場合だけです。それ以外の場合、訪問者には Ikiform のサンクスページが表示されます。フォームの設定で Redirect after submit（送信後のリダイレクト）を設定し、非表示の入力欄を削除することもできます。

ショートコード

ショートコードなら HTML を PHP の中に置けるので、コンテンツのフィルターの影響を受けず、投稿者や寄稿者もフォームを置けます。WordPress が自動で読み込む must-use プラグインとして保存してください:

<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'subject' => '',
        'redirect' => '',
        'button' => 'Send',
    ], $atts, 'ikiform');

    ob_start();
    ?>
    <form class="ikiform" action="<?php echo esc_url('https://ikiform.com/f/' . rawurlencode($atts['id'])); ?>" method="post">
      <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
      <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
      <?php if ($atts['subject']) : ?>
        <input type="hidden" name="_subject" value="<?php echo esc_attr($atts['subject']); ?>">
      <?php endif; ?>
      <?php if ($atts['redirect']) : ?>
        <input type="hidden" name="_redirect" value="<?php echo esc_url($atts['redirect']); ?>">
      <?php endif; ?>
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
      <p><button type="submit" class="wp-element-button"><?php echo esc_html($atts['button']); ?></button></p>
    </form>
    <?php
    return ob_get_clean();
});

あとは Shortcode ブロックを追加するか、任意のコンテンツにショートコードを入力します:

[ikiform subject="New enquiry" redirect="https://example.com/thank-you/"]

• 別のフォームを使うには id を渡します: [ikiform id="frm_..."]。
• PHP 内のフィールドをフォームに合わせて変更してください。name を持つ入力欄はすべて保存されます。
• クラシックエディターでは、生の HTML は テキスト タブにだけ貼り付けてください。ビジュアルエディターはフォーム内に <p> や <br> タグを追加します。ショートコードならこれを避けられます。

許可ドメイン

サイトが応答するすべてのアドレスを登録します。WordPress のサイトは、構築中に複数のアドレスを持つことがよくあります。

• wordpress.com や wpcomstaging.com だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。

テストのチェックリスト

1. ログアウトするか、プライベートウィンドウを開きます。ログイン中の管理者は一部のキャッシュをスキップし、少し違うページを見ています。
2. フォームを送信し、Ikiform で送信データがスパムではなく受信済みになっていることを確認します。
3. サンクスページに移動することを確認します。Ikiform のページが表示される場合は、サイトが許可ドメインに含まれていないか、_redirect の URL が https: ではありません。
4. 管理者以外のユーザーでページを編集し、保存してもフォームが残ることを確認するか、ショートコードを使います。

トラブルシューティング

関連ページ

• HTML フォームリダイレクト、予約済みフィールド、ハニーポット。
• サイトビルダーどのビルダーでも使える埋め込み。
• スパム対策ハニーポット、スコアリング、人間確認。
• トラブルシューティングCORS、オリジンの不一致、429。