はじめに
ウェブサイトのユーザーとのコミュニケーションを強化するためには、フォームが欠かせません。JotFormはそのようなニーズに対応した高機能なオンラインフォーム作成ツールで、WordPressと連携することでより多くの可能性が広がります。
この記事では、WordPressプラグインを使用せずとも、純粋にHTMLや短コードを使ってJotFormを埋め込む方法について詳しく説明します。これにより、高度なカスタマイズが可能になり、ウェブサイトのUI/UX設計にも柔軟に対応できます。
症状・背景
- JotFormで作成したフォームをWordPressページや投稿記事内に直接表示したい。
- フォームのデザインや機能性をよりよくカスタマイズして、ユーザー体験を向上させたい。
- WordPressプラグインを使用せずにJotFormと連携する方法を探している。
手順・設定方法
ステップ1: JotFormから埋め込みコード取得
# JotFormにログインし、作成したフォームを選択します。
# フォーム詳細ページで「共有」ボタンをクリックします。
# 「エレメント埋め込み」オプションを選んで、「HTMLコード」タブを開きます。
# このタブでは直接HTMLコードが表示されますが、それをコピーして保存します。ステップ2: WordPressにJotFormの埋め込みコード挿入
# パネルメニューから「投稿」または「ページ」を選択し、編集モードに入ります。
# 対話型ウィジェットツールを使用して、HTMLブロックを追加します。
# HTMLエディタモードに切り替えると、プレビュー画面が非活性化されますのでご注意ください。
# コピーしたJotFormの埋め込みコードを貼り付けます。必要であればCSSでスタイル調整を行います。ステップ3: カスタムCSSの追加
# WordPressダッシュボードから「外観」>「カスタマイズ」を選択します。
# 「追加CSS」セクションを開き、JotFormフォームに適用したいスタイルを入力します。
# 例えば、フォーム背景色の変更やボタンのデザイン調整などを行います。ステップ4: フォーム動作確認とトラブルシュート
# WordPressで埋め込んだJotFormフォームが正しく表示され、機能していることを確認します。
# 必要に応じてブラウザの開発者ツールを使用してエラーを検索し、修正を行います。注意事項
- JotFormの埋め込みコードは定期的に更新される可能性があります。最新版のコードを使用することを確認してください。
- フォームが送信された際のメール通知設定やデータ保護ポリシーには十分注意してください。
- セキュリティ上の理由から、フォーム内での個人情報の取り扱いには特別な配慮が必要です。
まとめ
1. 埋め込みコード取得: JotFormで作成したフォームの「共有」ページからHTML埋め込みコードをコピーします。
2. WordPressへの挿入: コピーしたコードを直接WordPress記事またはページ内に貼り付けます。
3. カスタムCSS: 必要であれば、カスタマイズ用CSSを追加してフォームの見た目を調整します。
4. 動作確認: カスタマイズが完了したら、ブラウザでプレビューし、正常に機能していることを確認します。
関連記事: