FC2メールフォームをブログに掲載するときのデザインカスタマイズ

カスタマイズ HTML, CSS, JavaScript

2023/04/29

2023/04/30 0

vanillaice (Akira)

初心者向け

FC2ブログのメールフォームは大別して2つあります。

ひとつは『公式プラグイン』に存在しており、全FC2ブロガーが無料で気軽に利用できるもの。こちらはFC2ブロガー専用です。

もうひとつは外部サービスとして存在している『FC2メールフォーム』です。こちらについてはFC2ブログ以外でも利用可能で有料プランも用意されています。

FC2メールフォームへ

先日、FC2ブログとは無関係のwebデザイン案件でこの『FC2メールフォーム』を利用する機会がありました。ところがこれがまー、結構アクの強い構造というかなんというか。どんなサービスでも必ず『メリット(pros)』と『デメリット(cons)』がありますが、それが顕著なFC2メールフォーム。

本記事はFC2ブロガー向けに書いていますが、その他のホームページサービスやブログサービスでも流用できます。

はじめに

公式プラグインのメールフォームはテンプレート側で容易にスタイリングができ、テンプレート製作者によっては予めCSSを入れている場合もあります(私が制作したテンプレートもそうです)ので、本記事では言及しません。本記事では FC2メールフォームをFC2ブログに掲載するときのCSSスタイリングの仕方についてです。ただその前に個人的に一番のおすすめは公式プラグインのメールフォームを利用することなので、公式プラグインで条件が合う場合には素直にこちらを利用されると良いと思います。公式プラグインの条件とは

『名前』『件名』『メールアドレス』『本文』の4項目で事足りる

これだけ。この条件に合わない場合はFC2メールフォームの方を利用する、と。『項目』というのは専門的な言い方をすると input要素及び textarea要素です。

単純に「ユーザーに向けてなにかアナウンスの文言を入れたい」とか、「サイドメニューではなく記事内に入れたい」といった場合は公式プラグインで対応容易ですから、項目数だけを考えれば良い話です。それ以外は導入もスタイリングも簡単な公式プラグインを利用しましょう。

ここからは『FC2メールフォームを記事内に掲載する』ことを前提にしますけれども、FC2メールフォームはhtmlエラー構文で構成されているという点をお伝えする必要があります。この件については運営サイドで修正して頂きたいところではありますし、構文エラーを避けるためにhtmlをベタ打ちするという方法もあるんですが、今回は初心者向けなのでhtml構文エラーは譲歩することにします。
* ちなみに私個人の案件では構文修正も行いました。

目次へ戻る↑

FC2メールフォームの特徴

FC2メールフォームは外部サービスですから、リンクによってそのサービスへ移動し、そこで操作してもらうという方法が王道です。そうは言っても、ブログが主体であり、メールの受け渡しも別サービスへ移動せずブログ内で完結させたい、という方も。そのために用意されているのが埋め込みという方法です。

以下は『FC2メールフォームサービスへ移動した場合のページの見た目』と『FC2ブログの記事内に埋め込みをしたときのページの見た目』の比較です。

こんな感じで、ブログに埋め込んだ場合には全てのスタイルが消失しているという状態です。理由は簡単で、埋め込みはJavaScriptを利用して行われますが、その際にスタイルシートの挿入が行われないという仕様のためです。

ではFC2メールフォームサービスのページからスタイルシートのURLを拾って移設すれば良いのかというと、そう単純ではありません。なぜなら対象スタイルシートはあくまでも『FC2メールフォームサービス内での表示』を想定しているのであって、埋め込みに配慮していません(いまどきこれもどうかと思うけどねぇ)

配慮していないというのは、webデザインで最も避けて欲しい要素セレクタを利用したスタイリングが行われている点でわかります。例えば以下のようなボックスがあるとします。中に書いてあるのがそれぞれのクラス名(class属性の値)です。

box1

box2

box3

クラスセレクタを利用した場合

.box1 {
  color: blue;
}

結果

box1

box2

box3

要素セレクタを利用した場合

div {
  color: blue;
}

結果

box1

box2

box3

div要素を例にしましたが、要素セレクタというのは同じ要素全てに対する指定です。具体的にFC2メールフォームのスタイルシートでは

form {
  background: #000000;
  padding: 0 0 30px;
}

こんな感じで、要素セレクタによる指定が多数。上記の場合は、FC2メールフォームとは無関係な全ての form要素に『背景は黒』『下に30pxの余白』というスタイルが適用されてしまいます。

FC2ブログテンプレートの実際は、『要素セレクタ指定を行わない』という方針のデザイナーさんがほとんどで、要素セレクタよりも優先度の高いクラスセレクタでのスタイリングが基本です。なのでバッティングが必ず起きるとは限りません。とはいえスタイルシートというのは上書きが基本ですから、テンプレートスタイルシートよりもFC2メールフォームのスタイルシートが後(htmlの記述順)に記されていれば上書きが起こって無関係な部位のデザインが変わってしまう可能性があるわけです。form要素だけなら運が良ければ避けられそうですが、リンクの a要素なんかも要素セレクタ指定になっているので、まず間違いなく悪影響が出ます。

そういった事情があり、スタイルシートの移植はブログテンプレートのスタイルに影響してしまう可能性が高いため危険。埋め込みのシステム上でスタイルシートを除外しているのはそういった理由だろうと思います。FC2メールフォームのスタイルシートの抜本的改正よりも、スタイルシートを出力除外にする、という方法を取っているわけですね。

この点がデメリットであり、逆にメリットでもあるんです。ブログ用にスタイルを自分で書けば良いということになります。この手のサービスは iframe要素での埋め込みが多いんですが、FC2の場合はhtmlのみです。iframeは埋め込み先でのスタイル再形成がほぼ不可能ですが、htmlならなんとでもなります。すごく悪い仕組みでありすごく良い仕組み、というFC2メールフォームの埋め込み仕様(笑)

FC2メールフォームのスタイルシートを単純に移植(またはlink要素記載)するとハマりますよ。

目次へ戻る↑

FC2メールフォームをブログに埋め込むまでの流れ

アカウントの取得等は済んでいると仮定して割愛します。

定形デザイン・スタイルを選ぶ

外部でも利用するという場合に選出。ブログ埋め込みのみで利用するならばこの作業はしなくとも良い。
定形フォーム・テキストフォームを選ぶ

必要な入力項目などを選出。
パーツ利用の設置用タグデザイン設定

ここで埋め込みコードを取得します。
埋め込みコードを記事に記載

『HTML編集』を利用します。
FC2メールフォーム用のスタイリングを行う
- 専用スタイルシートを作成
- テンプレートスタイルシートに内容追加
- 記事内に記す(ブログ無料アカウントの方へは非推奨)

定形デザイン・スタイルを選ぶ

外部サービスとしても利用する、という場合は好きなデザインを選んでおくと良いでしょう。ブログ埋め込みのみの場合は、結局スタイルは外されるわけですから選択しても意味がありません。無駄な時間を使わずスルーしましょう(デフォルトデザインが適用されます)

定形フォーム・テキストフォームを選ぶ

このステップは重要です。必要な入力項目を選び、入力必須にするかどうかの指定も済ませます。本当に必要な項目のみに留めましょう。その場合は全てが必須になるはずです。無意味な入力はユーザーにとって手間でしかありませんので、『なんとなく入れておく』というのはナシです。顧客分析などに利用する、といった場合は必須でなくとも必要になるかもしれません。ここまでが基本設定です。

パーツ利用の設置用タグデザイン設定

これが一般的に言うところの埋め込みコードです。FC2メールフォームでの名称としては『フォーム表示用のタグ』となっています。

複数のメールフォームを登録している方は、取得対象のフォームを間違えないようにしましょう。埋め込みコード内には『フォーム設定を反映させるための固有ID』などが含まれます。正しい埋め込みコードを取得するようにしてください。

パーツ用テンプレートを登録すると埋め込み時もそのデザインが反映されるようになりますが、レスポンシブになりませんので非登録状態で行ってください。

埋め込みコードを記事に記載

そのままペタッとペーストするだけです。できれば『本文』ではなく『追記』への記載をおすすめします。理由は、例えばいきなり『本文』の書き始めにこのフォームを掲載してしまうと、本文の200文字以内は OGPの概要文の対象となりますので、この記事の説明文が「[FC2メールフォーム]」から始まってしまいます。記事のOGPに採用したい文言を『本文』に書き、フォーム本体はOGP対象外の『追記』へ記載すると良いでしょう。

FC2メールフォーム用のスタイリングを行う

実際のスタイリングは次の章で紹介します。そのCSSを『どこに記載するか』については以下の3通りです。

専用スタイルシートを作成
テンプレートスタイルシートに内容追加
記事内に記す(条件があります)

①の専用スタイルシートを作成する場合は、CSSを .css 拡張子で保存し、それをFC2ブログにアップロード、そしてテンプレートhtmlの

<link rel="stylesheet" href="<%css_link>" media="all">

の直下(下の行)に

<!--permanent_area-->
<link rel="stylesheet" href="作成したスタイルシートのURL" media="all">
<!--/permanent_area-->

上記を記載します(URLは書き換えてください)
FC2独自変数を利用して『個別記事』に該当するページ以外は読み込ませないようにします(ただし詳細なページ指定はできません)
この方法を取る場合、内容を変更したくなったときにファイル自体の内容修正を行っての再アップロードが必要なので面倒かもしれない点がデメリット。テンプレートCSSと混在させず単独でファイル管理できるので内容の特定が容易という点がメリット。

②のテンプレートスタイルシートに記載する場合は、コメントアウトを上手に利用して内容特定できるようにしておくと良いでしょう。この方法が最もおすすめですが、メールフォームが掲載されていないページでもCSSが読み込まれるため無駄といえば無駄です。

③の記事内への記載について、有料アカウント保持者は以下のページと同じ方法を取ることが可能です。そのページでだけスタイルを読み込みます。また、無料アカウントでも『画像高速表示の設定』を『使用しない』(つまり記事下テキスト広告の非表示) に設定している方も利用できます。

ただし視認性の悪い点がデメリットなので、この方法はhtml中級以上の自覚のある方のみ推奨。記事下広告の有無が何故関連するのかについては以下の記事を参照のこと。

記事内に記す他の手段として、style要素を用いる方法があります。上記記事にあるように記事内にstyle要素を書いてしまうとそれ即ちhtml構文エラーなんですが、FC2メールフォームそのものが構文エラー満載なので『気にしない』という選択肢もアリかと思います(笑)
気にしない方は記事の末尾(必ず『追記』へ)

<style>
CSS内容
<style>

という形で記載します。

目次へ戻る↑

FC2メールフォーム用スタイリング

いくつかスタイリングを紹介しますので、そのまま採用する場合はコピー&ペーストだけで済みますが、自力でスタイリングしたい方のために大雑把に説明をしておきます。

埋め込みコードのスクリプトで出力される内容は概ね以下の通りです。実際には固有の識別IDなどが含まれたり、設定項目の違いもありますので、ソースコードはコピー・流用しないよう注意してください。説明のためにサンプルとして掲載するだけです。

ソースコードを見る

<div id="output1094744">
  <div id="fc2form">
    <div class="toparea"></div>
    <div class="message">下記フォームへ入力し [ 確 認 ] ボタンを押してください。</div>
    <form name="formxxxxxxx">
      <div class="title">
        <li>お名前<b id="coution2"> ※ </b></li>
      </div>
      <div class="comment">
        <input name="name" type="text" class="form-textline" maxlength="50" value="">
      </div>
      <div class="title">
        <li>メールアドレス<b id="coution2"> ※ </b></li>
      </div>
      <div class="comment">
        <input name="mail" type="text" class="form-textline" maxlength="100" value="" style="ime-mode:disabled;">
      </div>
      <div class="title">
        <li>職　業<b id="coution2"> ※ </b></li>
      </div>
      <div class="comment">
        <select name="job">
          <option></option>
          <option value="会社員（事務系）">会社員（事務系）</option>
          <option value="会社員（技術系）">会社員（技術系）</option>
          <option value="会社員（管理職）">会社員（管理職）</option>
          <option value="会社役員">会社役員</option>
          <option value="教職員">教職員</option>
          <option value="専門職（医師・弁護士・会計士）">専門職（医師・弁護士・会計士）</option>
          <option value="自営業・フリーランス">自営業・フリーランス</option>
          <option value="派遣社員・契約社員・嘱託社員">派遣社員・契約社員・嘱託社員</option>
          <option value="主婦">主婦</option>
          <option value="パート・アルバイト">パート・アルバイト</option>
          <option value="大学生・短大生・専門学生">大学生・短大生・専門学生</option>
          <option value="高校生・中学生・小学生">高校生・中学生・小学生</option>
          <option value="公務員">公務員</option>
          <option value="家事手伝">家事手伝</option>
          <option value="無職">無職</option>
          <option value="その他">その他</option>
        </select>
      </div>
      <div class="title">
        <li>住　所</li>
      </div>
      <div class="comment">
        <input name="address" type="text" class="form-textline" maxlength="1000" value="">
      </div>
      <div class="title">
        <li>ＴＥＬ</li>
      </div>
      <div class="comment">
        <input name="tel" type="text" class="form-textline" maxlength="20" value=""><br>例）123-456-7890
      </div>
      <div class="title">
        <li>お問い合せ内容<b id="coution2"> ※ </b></li>
      </div>
      <div class="comment">
        <textarea maxlength="800" name="text1" cols="18" rows="5" class="form-textbox"></textarea>
      </div>
      <div class="submit">
        <div id="LoadingBoxxxxxxxx" style="clear:left;padding:3px;visibility:hidden;position:relative;top:23;background-color: #FFFFFF;border: 1px solid #999999;text-align: center;">
          <img src="https://form1ssl.fc2.com/parts/image/loading1.gif">
          <img src="https://form1ssl.fc2.com/parts/image/loading2.gif">
        </div>
      </div>
      <div class="submit">
        <input type="button" value="確認" onclick="sendJSRequestxxxxxxx(&quot;on_loaded1094744&quot;,&quot;&amp;name=&quot;+encodeURIComponent(this.form.name.value)+&quot;&amp;mail=&quot;+encodeURIComponent(this.form.mail.value)+&quot;&amp;job=&quot;+encodeURIComponent(this.form.job.options[this.form.job.selectedIndex].value)+&quot;&amp;address=&quot;+encodeURIComponent(this.form.address.value)+&quot;&amp;tel=&quot;+encodeURIComponent(this.form.tel.value)+&quot;&amp;text1=&quot;+encodeURIComponent(this.form.text1.value)+&quot;&amp;Submit1=&quot;+1+&quot;&amp;id=&quot;+1094744,&quot;https://form1ssl.fc2.com/parts/&quot;)" class="button">
      </div>
    </form>
    <div class="bottomarea"></div>
  </div>
  <div style="font-size:12px;margin-top:3px;">
    <a href="http://form.fc2.com/" target="_blank">[ FC2メールフォーム ]</a>
  </div>
  <style type="text/css"><!--#fc2form #coution1{color: #FF0000;}#fc2form #coution2{color: #FF0000;}--></style>
</div>

ソースコード中の div要素の子要素としての li要素なんかは完全にhtmlの構文に反しています。恐らくリストマーカーを表示させるためだけにliを使ってしまったのだろうと思います。あと id属性が重複していますね。必須を示すときの米印が #coution2 でマークアップされてます。必須項目はひとつとは限りませんので、必須が複数あればid重複です。それから、英語のスペルミスもあります(coution caution)
それからそれから米印を b要素としてマークアップされているのもちょっと… どうかなぁ、と思います。これはフォントのウェイトを変えるためだけに使ったのだろう。たぶん。

とまぁ、全体的に実にモヤモヤする構文ですね (∵`)
しかし今回はスルー。
良い点も強調しておくと、この手のメールフォームは途中まで滞在ページでできても、送信時に結局外部に飛ばされる、というパターンも多いです。FC2メールフォームの場合は全てが滞在ページのまま完結できるのでユーザーにとって歓迎できるのではないでしょうか。それにユーザーは構文エラーとか気にしませんしね(かと言って管理人も気にしなくて良いというわけではないが)

さて、スタイリングを忘れがちなものは以下の通りです。

アラート表示時
内容入力後の送信前確認画面(ページ変遷はありません, 表示のみ切り替わります)

下記は自力スタイリングの手助けのためのスクリーンショットです。各ブロックで id属性または class属性が与えられているものを書き出しておきます。

スクリーンショット内に記すのを忘れちゃったんですが、必須項目の米印は先に少し触れたように #coution2 というIDが付与されています。必須項目を入力せずに確認ボタンを押したときなどに表示されるアラートには #coution1 が付与されています。特定条件下で現れるスタイルもあって失念しがちですが、これらもしっかりスタイリングしていきます。

特に送信前の確認は表示状態が切り替わります。そしてここでのhtml構造が少しスタイリングしづらい。いずれにしろ今回はhtmlの内容を変更しませんので、与えられた構文に対して多少無理矢理っぽいCSSを充ててああります。

目次へ戻る↑

FC2メールフォームデザイン集

コピー&ペーストで使えるFC2メールフォームのデザイン集です。実際のフォームを掲載しますので動作の確認も可能です。ただし最終の『送信ボタン』は押せません。

FC2メールフォームサービス内で設定したデザインの踏襲は考慮していません。ブログでのオリジナル表示です。

初期状態で入力を済ませた後、『送信』ボタンを押すと、コンマ数秒のローディング画面が表示されます(表示秒数は通信状態によって異なります)
デフォルトのローディング画像の解像度が低く荒いので、画像ではなくhtml+CSSによるローディングスピナーに変更しています。

「!xxxを入力してください」などのアラート表記はフォームの『上』がデフォルトですが、この位置ではスマートフォンユーザーが気づきにくいので確認ボタンの上に変更しています。

セレクトボックスを採用している場合(サンプルでは『職業』)、select要素はCSS疑似要素によるスタイリングができませんので、ブラウザデフォルトスタイルのままにしてあります。

フォントのサイズ指定はrem単位設定が行われていないブログテンプレートに配慮して、px単位で記しています。

必須項目がひとつ以上あることを想定しています。

OSダークモード用のCSSを含んでいます。ご利用中のテンプレートがOSダークモード非対応の場合は該当部位を必ず削除してください。

オーソドックス

こちら、先程から何度か触れた個人案件で採用したデザインとほぼ同じです。色調を変えることで雰囲気も変わるかと思います。

CSSを見る

#fc2form {
  position: relative;
  margin: 60px auto 20px;
  border-radius: 2px;
  font-size: 16px;
}

#fc2form form {
  border-top: 1px solid rgb(200,200,200);
}

.message {
  margin: 0 0 1em;
}

.message + br {
  display: none;
}

.title {
  display: flex;/* タイトルを上下中央合わせにする場合のみ必要 1/2 */
  align-items: center;/* タイトルを上下中央合わせにする場合のみ必要 1/2 */
  padding: 10px;
  border: 1px solid rgb(200,200,200);
  border-top: 0;
  background: rgb(248,247,241);
  color: rgb(51,51,51);
  font-size: 14px;
}

.title li {
  list-style: none;
}

.comment {
  padding: 6px;
  border: 1px solid rgb(200,200,200);
  background: white;
  color: rgb(51,51,51);
  border-top: 0;
}

/* select要素がある場合のみ必要 ここから */
.comment > select {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;/* 適宜調整, 不要ならこの一行削除 */
  height: 3em;
  padding: .8em;
  border-radius: 0;
}
/* select要素がある場合のみ必要 ここまで */

/* アラート */
#coution1 {
  position: absolute;
  bottom: 42px;
  width: 100%;
  font-size: 13px;
  text-align: center;
}

/* 必須項目がある場合のみ必要 ここから */
#coution2::before {
  content: "必須";
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 0 -2em 0 1em;
  padding: .1em .8em;
  border-radius: 2px;
  background: rgb(231,143,152);
  color: rgb(255,255,255);
  font-size: 13px;
  vertical-align: middle;
}
/* 必須項目がある場合のみ必要 ここまで */

/* 電話番号の例が表記される場合のみ必要 ここから */
.comment > .form-textline[name="tel"] {
  position: relative;
  z-index: 1;
  height: initial;
  margin: 0px 0 -1.6em;
}

/* 電話番号の例が表記される場合のみ必要 ここまで */
.form-textline,
.form-textbox {
  display: block;
  width: 100%;
  height: 100%;
  padding: .8em;
  border-radius: 2px;
  border: 0;
  background: rgb(245,245,245);
  color: rgb(51,51,51);
  font-size: inherit;
  appearance: none;
}

#fc2form form .submit {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0!important;
}

/* 確認ボタン */
#fc2form .submit > .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 18px);
  max-width: 200px;
  margin: 50px 6px 0;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: rgb(239,239,239);
  color: rgb(51,51,51);
  font-size: 13px;
  cursor: pointer;
}

/* 送信ボタン */
#fc2form .submit > .button[value="送信"] {
  background: rgb(1,150,4);
  color: white;
}

/* loading */
@keyframes mailFormSpin {
  0% {
    transform: rotate(0)
  }

  50% {
    transform: rotate(180deg)
  }

  100% {
    transform: rotate(360deg)
  }
}
[id^=LoadingBox] {
  display: block;
  position: absolute !important;
  top: 0 !important;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0 !important;
  background: white !important;/* ローディング中のオーバーレイ背景色 */
  pointer-events: none;
}

[id^=LoadingBox] img {
  display: none;
}

[id^=LoadingBox]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid rgb(150,150,150);/* スピナーの色 */
  border-right-color: transparent;
  animation: mailFormSpin 1s linear infinite;
}

@media screen and (min-width: 768px) {
  #fc2form form {
    display: flex;
    flex-flow: wrap;
  }
  .title {
    width: 30%;
    border-right: 1px solid rgb(200,200,200)
  }
  .comment {
    width: 70%;
    border-left: 0;
  }
  #fc2form > form > div:not([class]) {
    display: flex;
    width: 100%;
  }
}

/* ダークモード対応 !ダークモード非対応テンプレートの場合は必ず削除 ここから */
@media (prefers-color-scheme: dark) {
  .form-textline,
  .form-textbox {
    background: rgb(230,230,230);
  }
  [id^=LoadingBox] {
    background: rgb(51,51,51) !important;
  }
}
/* ダークモード対応 !ダークモード非対応テンプレートの場合は必ず削除 ここまで */

独立系

主張強めのデザインです。記事内の他の内容としっかり区分したい場合などに適しています。ネイビー系と称していますが色調は好きなようにカスタマイズしてください。

このデザインを採用する際にはhtmlに若干の追加が必要です。

HTMLとCSSを見る

<div class="mail_form-wrapper">
ここに埋め込みコード
</div>

.mail_form-wrapper {
  margin: 30px auto;
  padding: 20px;
  border-radius: 6px;
  background: rgb(46,56,100);
}

#fc2form {
  position: relative;
  margin: 0 auto 20px;
  border-radius: 2px;
  font-size: 16px;
}

.message {
  margin: 1em 0 2em;
  font-size: 15px;
  color: white;
  text-align: center;
}

.message + br {
  display: none;
}

.title {
  display: flex;/* タイトルを上下中央合わせにする場合のみ必要 1/2 */
  padding: 1em 2em .8em 0;
  color: white;
  font-size: 14px;
}

.title li {
  list-style: none;
}

.comment {
  margin: 0 0 8px;
  color: white;
}

#fc2form form > .comment {
  font-size: 13px;
}

/* 確認画面 */
#fc2form > form > div:not([class]) > .comment {
  background: rgba(255,255,255,.2);
  padding: .8em;
}

/* select要素がある場合のみ必要 ここから */
.comment > select {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;/* 適宜調整, 不要ならこの一行削除 */
  height: 3em;
  padding: .8em;
  border-radius: 0;
  font-size: 16px;
}
/* select要素がある場合のみ必要 ここまで */

/* アラート */
#coution1 {
  position: absolute;
  bottom: 42px;
  width: 100%;
  font-size: 13px;
  text-align: center;
}

/* 必須項目がある場合のみ必要 ここから */
#coution2::before {
  content: "必須";
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 0 -2em 0 1em;
  padding: .1em .8em;
  border-radius: 2px;
  background: rgb(248,108,173);
  color: rgb(255,255,255);
  font-weight: normal;
  font-size: 13px;
  vertical-align: middle;
}
/* 必須項目がある場合のみ必要 ここまで */

/* 電話番号の例が表記される場合のみ必要 ここから */
.comment > .form-textline[name="tel"] {
  position: relative;
  z-index: 1;
  height: initial;
  margin: 0px 0 -1.2em;
}

/* 電話番号の例が表記される場合のみ必要 ここまで */
.form-textline,
.form-textbox {
  display: block;
  width: 100%;
  height: 100%;
  padding: .8em;
  border-radius: 2px;
  border: 0;
  background: rgba(255,255,255,.2);
  color: white;
  font-size: 16px;
  appearance: none;
}

#fc2form form .submit {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0!important;
}

/* 確認ボタン */
#fc2form .submit > .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 18px);
  max-width: 200px;
  margin: 50px 6px 0;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: rgb(248,108,173);
  color: white;
  font-size: 13px;
  cursor: pointer;
}

/* 送信ボタン */
#fc2form .submit > .button[value="送信"] {
  background: rgb(1,150,4);
  color: white;
}

/* loading */
@keyframes mailFormSpin {
  0% {
    transform: rotate(0)
  }

  50% {
    transform: rotate(180deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

[id^=LoadingBox] {
  display: block;
  position: absolute !important;
  top: 0 !important;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0 !important;
  background: rgb(46,56,100) !important;/* ローディング中のオーバーレイ背景色 */
  pointer-events: none;
}

[id^=LoadingBox] img {
  display: none;
}

[id^=LoadingBox]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid rgb(150,150,150);/* スピナーの色 */
  border-right-color: transparent;
  animation: mailFormSpin 1s linear infinite;
}

/* FC2メールフォームサービスへのリンク */
#fc2form + div > a {
  color: rgb(200,200,200);
}

@media screen and (min-width: 768px) {
  #fc2form form {
    display: flex;
    flex-flow: wrap;
  }
  #fc2form > form > div:not([class]) {
    display: flex;
    width: 100%;
  }
  .title {
    width: 30%;
    margin: 0 0 8px;
    justify-content: flex-end;
  }
  .comment {
    width: 70%;
    padding: .8em;
  }
}

/* ダークモード時の変更は特にありません */

写真つき

好きな画像を指定することができます。パソコンでは必然的に縦に長くなりますので、縦長の画像を準備すると良いでしょう。スマートフォンでは表示領域が逆に横長になりますので、画像内のオブジェクトの表示位置を調整してください。デフォルトは垂直下合わせ(bottom)にしてあります。

このデザインを採用する際にはhtmlに若干の追加が必要です。

HTMLとCSSを見る

<div class="mail_form-wrapper">
ここに埋め込みコード
</div>

.mail_form-wrapper {
  margin: 30px auto;
  border-radius: 6px;
  background: rgb(81,69,70);
  color: rgb(228,130,130);
}

.mail_form-wrapper::before {
  content: "CONTACT";/* 欧文を想定 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
  background: url(画像URL) center bottom /cover no-repeat;/* 表示位置は適宜調整 */
  color: rgb(255,255,255,.5);
  font-weight: bold;
  font-size: 3em;
  font-family: Georgia, serif;
}

.mail_form-wrapper > div[id^="output"] {
  padding: 10px 20px;
}

#fc2form {
  position: relative;
  margin: 0 0 20px;
  font-size: 16px;
}

.message {
  margin: 1em 0 2em;
  font-size: 15px;
  color: white;
}

.message + br {
  display: none;
}

.title {
  margin: 0 0 8px;
  color: white;
  font-size: 14px;
}

.title li {
  list-style: none;
}

.comment {
  margin: 0 0 16px;
  color: white;
}

#fc2form form > .comment {
  font-size: 13px;
}

/* 確認画面 */
#fc2form > form > div:not([class]) > .comment {
  background: rgba(255,255,255,.2);
  padding: .5em .8em;
}

/* select要素がある場合のみ必要 ここから */
.comment > select {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;/* 適宜調整, 不要ならこの一行削除 */
  height: 3em;
  padding: .8em;
  border-radius: 0;
  font-size: 16px;
}
/* select要素がある場合のみ必要 ここまで */

/* アラート */
#coution1 {
  position: absolute;
  bottom: 42px;
  width: 100%;
  font-size: 13px;
  text-align: center;
}

/* 必須項目がある場合のみ必要 ここから */
#coution2::before {
  content: "必須";
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 0 -2em 0 1em;
  padding: .1em .8em;
  border-radius: 2px;
  background: rgb(250,186,184);
  color: rgb(81,69,70);
  font-weight: normal;
  font-size: 13px;
  vertical-align: middle;
}
/* 必須項目がある場合のみ必要 ここまで */

/* 電話番号の例が表記される場合のみ必要 ここから */
.comment > .form-textline[name="tel"] {
  position: relative;
  z-index: 1;
  height: initial;
  margin: 0px 0 -1.2em;
}

/* 電話番号の例が表記される場合のみ必要 ここまで */
.form-textline,
.form-textbox {
  display: block;
  width: 100%;
  height: 100%;
  padding: .8em;
  border-radius: 2px;
  border: 0;
  background: rgba(255,255,255,.2);
  color: white;
  font-size: 16px;
  appearance: none;
}

#fc2form form .submit {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0!important;
}

/* 確認ボタン */
#fc2form .submit > .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 18px);
  max-width: 200px;
  margin: 50px 6px 0;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: rgb(249,122,120);
  color: white;
  font-size: 13px;
  cursor: pointer;
}

/* 送信ボタン */
#fc2form .submit > .button[value="送信"] {
  background: rgb(1,150,4);
  color: white;
}

/* loading */
@keyframes mailFormSpin {
  0% {
    transform: rotate(0)
  }

  50% {
    transform: rotate(180deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

[id^=LoadingBox] {
  display: block;
  position: absolute !important;
  top: 0 !important;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0 !important;
  background: rgb(81,69,70) !important;/* ローディング中のオーバーレイ背景色 */
  pointer-events: none;
}

[id^=LoadingBox] img {
  display: none;
}

[id^=LoadingBox]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid rgb(150,150,150);/* スピナーの色 */
  border-right-color: transparent;
  animation: mailFormSpin 1s linear infinite;
}

/* FC2メールフォームサービスへのリンク */
#fc2form + div {
  padding: 0 20px;
  text-align: right;
}

#fc2form + div > a {
  color: rgb(200,200,200);
}

@media screen and (min-width: 768px) {
  .mail_form-wrapper {
    display: flex;
  }
  .mail_form-wrapper::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    max-width: 400px;
    height: auto;
    font-family: Georgia, serif;
  }
  .mail_form-wrapper > div[id^="output"] {
    flex: 1;
    min-width: 0;
  }
}

/* ダークモード時の変更は特にありません */

目次へ戻る↑