ブロックで設置し簡単な変更をする
通常、wpforms を使ったお問い合わせを設置する場合、ショートコードを固定ページに貼り付けて反映させていたと思います。
ですが、バージョン6.0以降ではブロック要素として呼び出すことができます。そうすることによって、少しですがカスタマイズが可能になりました。
こちらの公式の動画も、英語ではありますが何ができるのかを把握するのに役立つので一度ご覧ください。
ブロック要素として wpforms を設置する方法
まずは通常の流れでフォームを作成しましょう。フォームの作成方法については詳しく解説をされているブログさんがたくさんあるので、それらを参考にしてください。
フォームの作成ができたら、お問い合わせ用の固定ページを作ります。
固定ページでブロックを追加します。ブロックに WPforms が追加されているのでそれをクリックします。
すると、例のロゴが現れて、使用するフォームを選択できます。あらかじめ作っておいたフォームを選択しましょう。
作成したフォームがブロックとして出てきたはずです。ブロック内の適当なところをクリックすると、右のナビゲーションに編集画面が出てきます。
ここで編集出来ることをまとめておきます。
- フォームそのものの切り替え
- フォームのタイトルと説明の表示/非表示
- 入力枠の大きさと色、角丸、背景の色
- ラベル（お名前etc）のサイズと色の変更
- エラーメッセージの色
- 送信ボタンの大きさ、背景色、文字色の変更
ショートコードで反映させるとこれらの変更は行うことができないので、これから新規にフォームを作る人は、ブロックで作ったほうがよさそうです。
さて、ここからは追加ＣＳＳで行う見た目の変更について触れていきましょう。
追加ＣＳＳで行う見た目の変更
フォームの左のへこみを解消する
ページタイトルとコンテンツ（フォーム本体）の左端がそろっていないのが気になる場合に、それを揃える追加CSSです。
これはお問い合わせページ以外の固定ページすべてに有効になるのでご注意ください。でもこの際に、ほかの固定ページも合わせてデザインの統一をしてしまってもよいかもしれませんね。
/* 固定ページのコンテンツをそろえる */
.l-mainContent__inner .post_content{
padding: 0;
}送信完了メッセージの背景と枠
デフォルトの送信完了メッセージはこんな感じで緑背景の枠線あり、というちょっとインパクト強めの見た目になっています。これを任意のものに変更する追加CSSです。
セレクタがやたら長くてちょっと複雑に見えますが、background にお好きな色を指定し、border に線の太さや色をしてすると、お好みの見た目に変更することが可能です。
/* 送信完了メッセージの見た目 */
div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message){
background: #f1f1f1;
border: none;
}上の例では背景がグレーで枠線無しとなっています。
ご存じだとは思いますが、送信完了メッセージの中身は WPformsの「設定」→「確認」→「確認メッセージ」で変更が可能です。
