AmebaOwndにフォームメーラーのメールフォームを設置する(PC)

ここではAmebaOwndに「フォームメーラーのメールフォームを設置する方法」を見ていきます。なお、メールフォームの設置方法は大きく分けると以下の2パターンありますので分けて説明していきます。


  • ページ内に埋め込む方法
  • フォームにリンクする方法


また、以下の説明では、すでにメールフォームが作成済みであることを前提に手順を説明しています。メールフォームを作成していない場合は、フォームメーラーでメールフォームを作成してから読み進めてください。 


ページ内に埋め込む

まず、ページ内に埋め込む方法から見ていきます。


フォームメーラーにログインし、作成したメールフォームの[コード表示]をクリックします。

すると、「埋め込みコード」という欄が表示されますので内容を全てコピーします。

これでメールフォームを設置するために必要な情報が取得できましたので、この情報をAmebaOwndに貼り付けていきます。


では、今回はAmebaOwndのページにメールフォームを設置していきます。メールフォームを設置したいページを編集状態にして[HTML]を選択します。

続けて、メールフォームを設置したい位置にHTMLブロックを配置します。

すると、下の画像のような画面が表示されますので、先ほどコピーした内容を貼り付けて[OK]をクリックします。

これで、メールフォームの設置は完了です。ただ、今回使用したHTMLブロックは、プレビューしなければ内容を表示することができません。なので、右上の[プレビュー]をクリックして表示を確認します。

このようにメールフォームが表示されればOKです!確認できたら、右上の[プレビューを終了]をクリックしてこのページを閉じます。

なお、上の画像のようにフォームの一部が隠れてしまった場合は、先ほど貼り付けたタグの一部(「高さ」の部分)を書き換えると全体を表示できるようになります。「height」の後ろの数値を書き換えて調整します。書き換える時は全角ではなく半角で入力します。

上のように書き換えてから、もう一度プレビューすると。フォーム全体が表示できるようになります。

フォームにリンクする方法 

リンクする場合も手順はほぼ同じです。まず、フォームメーラーにログインし、作成したメールフォームの[コード表示]をクリックします。

すると、「URLリンク」という欄が表示されますので、ここに表示されているURLをコピーします。

これでリンクするために必要な情報が取得できましたので、この情報を利用してリンクしていきます。


それでは今回は、AmebaOwndのページからメールフォームにリンクします。リンクにする範囲を選択してリンクボタンをクリックします。

(テキストブロックを配置していない場合は、テキストブロックを配置してから行ってください。)

そして、先ほどコピーした「フォームのURL」を貼り付けて[OK]します。

これで、作成したメールフォームにリンクできます。

ちなみに、フォームメーラーの無料版を使用する場合は、サイトのどこかにバナーを貼る必要があるようです。

バナーは絶対に貼らないといけませんか?また、どのページに設置したらいいでしょうか。


僕は、サイドバーの下に貼り付けておきました。

0コメント

  • 1000 / 1000