フォームの「回答する(問い合わせ/診断する)」ボタンをアメブロ(amebaブログ)に埋め込む


amebaブログをお持ちの方も多いのではないでしょうか?
古くからブログを運営されているお店では、多くのお客様がアメブロを見ていることでしょう。

SELECTで作成したメールフォームやアンケートの「回答する(問い合わせ/診断する)」ボタンをアメブロに簡単に埋め込むことが出来ます。
ブログを閲覧してくれているお客様に、SELECTで作ったメールフォームやアンケート、診断テストをお知らせするには
「回答する(問い合わせ/診断する)」ボタンがとても便利です。

このブログエントリーでは作成したフォームの「回答するボタン」をアメブロに埋め込む方法をご案内します。

フォームの「回答する(問い合わせ/診断する)」ボタンをアメブロ(amebaブログ)に埋め込む

SELECTにログインしたらページ上部ヘッダーより「フォーム」→「作成フォーム一覧」をクリックします。
0.ヘッダーからフォーム一覧へ

表示されたフォーム一覧より、目的のフォームの「共有」アイコンをクリックします。
1.目的のフォームの「共有」アイコンをクリック

フォームの共有画面が表示されました。
ページ上部に「回答する」ボタンの共有情報が表示されたエリアがあります。
2.「コード」を入手する
この例では「問い合わせ」となっていますが、フォームタイプによって最初に表示されているラベルは変わります。
また、フォームの内容によって相応しいラベルに変更することが可能です。
「ラベル」を操作しましょう。

ボタンの体裁の調整が出来たら、「コード」に表示された回答するボタンのHTMLコードを入手しまう。
※ これは後でブログに貼り付ける情報です。大切にとっておきます。

 

アメブロのサイドメニューに「回答する」ボタンを埋め込む

まずアメブロのサイドメニューにフォームの回答するボタンを埋め込みます。
アメブロにログインしたら「ブログ管理トップ」へ移動しましょう。
3.アメブロにログインして「ブログ管理トップ」へ

ブログ管理トップ画面より、設定・管理をクリックします。
4.ブログ管理トップ画面の「設定・管理」をクリック

次に「サイドバーの設定」より「フリースペース編集」をクリックします。
5.「フリースペース編集」をクリック

フリースペース編集画面が表示されました。
SELECTより入手した「回答する」ボタンのHTMLコードを貼り付けて保存します。
6..先ほどのコードを貼り付けて保存

 

次に、このフリースペースをサイドバーのどの位置に表示するか設定しなければなりません。
ブログの設定・管理画面より「配置設定」をクリックします。
7.次はサイドバーの「配置設定」へ

サイドバーのパーツ表示位置を設定する「配置設定」画面が表示されました。
フリースペース」を「使用する機能」エリアにドラッグ・ドロップします。
8.「フリースペース」を「使用する機能」エリアへ移動する

例ではサイドメニューの一番上に配置しました。
「保存」をクリックすると設定が反映されます。
9.配置したら保存

 

これでアメブロのサイドメニューに常に「回答する」ボタンが表示されるようになりました。
10.ブログのサイドメニューに表示されるようになりました

 

サイドメニューは、スマホ版のアメブロでは表示されません。
スマホ版アメブロにも「回答する」ボタンを設置したい場合には、記事内に先ほど入手した「回答するボタンのHTMLコード」を貼り付けましょう。
11.記事内に張り付ければ、スマホでもボタンが表示される。

 

回答するボタンは、綺麗な体裁のフォームへのリンクボタンが簡単に設置できる機能です。
ぜひご活用ください。

 

SELECT!: 無料でWEBサイト/予約フォーム作成/アンケート作成/診断テスト,心理テスト作成