株式会社レインボーリンク公式サイト

FAQ > All Post Contact Form　| WordPressプラグイン

「送信ボタン」のCSSをください。「送信ボタン」の位置を、固定ページごとに変更したいです。固定ページごと（送信フォームごと）に、「中央寄せ」にしたり、「左寄せ」にしたりしたいです。

はい。本プラグインのデフォルトの「送信ボタン」は、「中央寄せ」です。何もなさらなくても、ボタンは、「確認画面」（「送信内容を確認するための画面」）の、「送信内容確認テーブル」の真下、ちょうどテーブルの中央に当たる場所に、表示されていると存じます。御社が「フォームhtmlページ」にて「送信内容を確認するボタン」を「左寄せ」でご作成になった場合は、御社にお問い合わせを送信しようとしているかたの目には、同じデザインのボタンが、「確認する」から「送信する」に文言が変わったうえに、「真ん中に移動した」ように見えるはずです。

そこで、ここでは、「左寄せ」の方法だけをご案内しとうございます。

本プラグインは、「送信ボタン」に、「btn_confirm」というクラスを割り当てています。「確認画面上に表示されるボタン」という意味です。この「確認画面上に表示されるボタン」は、「apcf_confirmation_btn」というidを持つ、「送信ボタンを表示するための専用div」の中に入っています。「左寄せ」のデザインは、この２つの要素を組み合わせて作ります。


「送信ボタン」を「左寄せ」にする方法

（１）allpost-contactform.cssを開いてください。

＊プラグインファイル（/wp-content/plugins/allpost-contactform）の中から「allpost-contactform.css」を取り出し、お使いのテーマの中に移してテーマのほうで独自に読み込んでおられる場合は、テーマの中にあるCSSファイルを開いてください。

（２）「確認、送信ページ」（該当のフォームhtmlページと連動する、本プラグインのショートコードを貼りつけたページ）を開いて、<body>タグの中の固定ページのidをご取得ください。ここでは、仮に、page_id=7777とします。

（３）CSSの一番下に、次の内容をコピペしてください。

#post-7777 #apcf_confirmation_btn { /* 確認ページ上に表示されるボタン（＝お問い合わせフォームの送信ボタン）の位置は左寄せになります */
margin-left: 0 !important;
padding-left: 0 !important;
text-align: left !important;
display: relative !important;
}
#post-7777 #apcf_confirmation_btn .btn_confirm {
text-align: left !important;
border: #000;
background: #000;
display: absolute;
top: 15px; /* 確認テーブルとボタンとの間隔を設定します */
left: 0;
}



（３）CSSを保存して、サーバーにアップロードし、既存ファイルを上書きしてください。


以上です！

( , JST )