【CSSコピペ】MW WP Formをおしゃれデザインにカスタマイズ|スマホ対応テンプレート付

こんにちは。
今回はMW WP Formのデザインカスタマイズ用のCSSとテンプレートを公開します。
コピー貼り付けだけで、こんなフォームができあがります。
私はプログラマーではないので、専門的な説明は省き、わかりやすく解説します。

スポンサーリンク

このデザインの特徴

PC版

お問い合わせフォームのカスタマイズCSS公開完成形

スマホ版

お問い合わせフォームのカスタマイズCSS公開スマホ対応完成形

完成形のデザインはこのような形です。

サロンや美容院、雑貨店など向けのおしゃれなデザイン。
女性向けの淡い色合い。
スマホ対応。

カスタマイズの流れ

  1. CSSを貼り付けます。
  2. MW WP Formの新規ページにテンプレートhtmlを貼り付けます。
  3. 新規固定ページでテストページを作成しショートコードを貼ります。
  4. テンプレートの内容を書き換えます。

以上です。

この時点でなんとなくわかる方や、CSSとhtmlだけわかれば変更できるという方は、
「1」と「2」の2つのコードだけコピー&貼り付けして進めてみてください。

1. CSSを貼り付けます

下記のCSSを全部コピーします。

 

CSSは少し重複した書き方をしています。
プログラマーから見たら汚いコードかもしれません。
理由は、テーマによって表示方法が異なる可能性があることと、なるべく初心者が見た時にわかりやすく分解してカスタマイズできるようにしたためです。
もしCSSに詳しい方は不要な部分を削除したりしながら整理してご利用ください。

WordPress管理画面左メニューにある「外観」→「カスタマイズ」をクリック。

WordPress管理画面カスタマイズ項目

追加CSSをクリック。

WordPress管理画面追加CSS

追加CSSの空欄に先ほどのCSSを貼り付けます。

WordPress管理画面追加CSSスクリーンショット

公開ボタンをクリックします。

2. MW WP Formのページにテンプレートhtmlを貼り付けます

下記htmlのいずれかをコピーします。表タイプと表なしの2種類を用意しました。

「表タイプデザイン」

 

「表なしデザイン」はこちら

 

「MW WP Form」→「新規追加」をクリック。

MW WP Formの画面

「タイトルを記入」→右上の「ビジュアル/テキスト」の切り替えを「テキスト」に変更。

MW WP Formのテキスト画面

タイトルはとりあえず何でもOKです。

コピーしたhtmlを貼り付けます。

テキストに切り替えたら空欄にコピーしたhtmlコードを貼り付けます。

ビジュアルにすると実際の表示内容に近い見え方でチェックできます。
編集もしやすいと思います。

「公開」または「更新」をクリック

MW WP Formのテキスト画面

ショートコードをコピーします。

画面右端のショートコード (フォーム識別子) をコピーします。

3. 固定ページでテストページを作成しショートコードを貼ります

固定ページにショートコードを貼る画面

WordPress管理画面の左メニューの「固定ページ」→「新規追加」をクリック。
「タイトルを記入」。

タイトルは仮で「お問い合わせ・予約フォーム」などと記入します。

本文にコピーしてあったショートコードを貼り付けます。

編集画面は「ビジュアル」でも「テキスト」でもどちらでも可。

公開をクリック。

プレビューで見るとデザインができあがったフォームを見ることができます。

テンプレートの内容を書き換えます。

MW WP Formのテストページに戻り、表の左枠と右枠の内容を書き換えます。

書き換えのコツ

テキスト表示とビジュアル表示をうまく切り替えて内容を書き換えます。

「必須」部分はCSS対応の<span>タグで囲っていますので、表示を「テキスト」に切り替えて前後のコードをまるごとコピーして貼り付けてみてください。

なお、表を使って2列にしたサンプルを載せていますが、表を使わずに1列で順番に作ってもOKです。

参考URLを紹介します。

ご予約フォーム |ウエディングビーチフォト-
ご予約までの流れ 日本語スタッフが親切に対応いたします...

最後に。

他にも素敵なコードを公開している方がいらっしゃいますので、ぜひそちらも覗いてみてください。

この記事の趣旨としては、
・初心者の方が公開されているCSSを利用できるようになる。
・基盤から自分のサイトに合うように中身を変更していく。
ということです。
このように世の中に無料で公開されている情報を上手に利用するのもひとつのスキルですし、その作業からさらなるスキルアップもできます。

タイトルとURLをコピーしました