はじめに
Webサイトやブログでアンケートやフィードバックを収集する際、より効果的な方法としてTypeformが人気を集めています。WordPressのウェブサイトでは簡単にTypeformを埋め込むことができます。これにより、訪問者からの情報を効率的に取得し、ユーザー体験を向上させることが可能になります。
症状・背景
このテーマが必要になる主な場面:
- ウェブサイトにアンケート機能を追加したい
- 訪問者からのフィードバックを集める必要がある
- ログイン不要で簡単にウェブフォームを作成したい
- WordPressページ上でインタラクティブな形式の問い合わせフォームを設置する
手順・設定方法
ステップ1: Typeformアカウントを作成し、新しいフォームを作成する
# ブラウザを使用してTypeform公式サイトにアクセスします。
https://www.typeform.com/
# アカウント登録またはログイン後、新しいフォームを作成します。
https://admin.typeform.com/form/create/ステップ2: WordPressのウェブページに埋め込むコードを取得する
# Typeformで作成したフォームを選択し、「共有」メニューを開きます。
https://admin.typeform.com/forms/{your_form_id}/share/
# 「埋め込み」というオプションを選んで、表示されるHTMLコードをコピーします。
<div class="typeform-styling" data-url="{your_typeform_url}"></div>
<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,e=d.getElementsByTagName("head")[0];qs="?publisher_id={your_publisher_id}&embed=1";js=f"https://embedded.typeform.com/iframe.js"+qs;ce.async=true;ce.src=js;ce.type="text/javascript";ce.charset="utf-8";s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ce,s);})();</script>ステップ3: WordPressのページでTypeformを表示する
# WordPressダッシュボードにログインし、「ページ」から対象ページを選択します。
https://your-site.com/wp-admin/post.php?post={page_id}&action=edit
# 「ウィジェット」というタブをクリックして、新しいウィジェット領域を作成または選抂します。
# 対象のウィジェットエリアに移動し、「テキスト」ウィジェットを選択して追加します。
https://your-site.com/wp-admin/widgets.php
# 「テキスト」ウィジェットで先ほどコピーしたTypeform埋め込みコードを貼り付けます。
# 設定が完了したら「保存」ボタンをクリックし、変更を反映させます。ステップ4: Typeformの表示を確認する
# WordPressダッシュボードから「ページ」メニューを開き、「公開」ボタンを押してページを公開します。
# 対象のWordPressページにアクセスし、Typeformが正しく表示されることを確認します。
https://your-site.com/{page_slug}/注意事項
- Typeformアカウントは無料で作成できますが、機能制限があります。より多くのオプションや機能を利用するには有料プランへのアップグレードが必要です。
- ブラウザのJavaScriptを無効にしている場合、Typeformの埋め込みコードは正常に表示されない可能性があるため注意してください。
- Typeformのフォームデザインとインタラクティブな要素は、WordPressページ全体のUX/UI設計と調和させることが重要です。
まとめ
1. Typeformアカウント作成: ウェブサイトでアンケートやフィードバックを収集するには、まずTypeformアカウントが必要になります。
2. フォーム作成: Typeform上で新しいフォームを作成し、必要な質問項目とデザインを設定します。
3. 埋め込みコード取得: 作成したフォームの「共有」メニューから埋め込みコードを取得します。
4. WordPressページにコード挿入: WordPressのテキストウィジェットを利用して、取得したTypeform埋め込みコードをページに追加します。
5. 確認とテスト: 公開前のページでTypeformが正しく表示され、動作するかを確認します。
関連記事: