「送信ボタン」のCSSをください。「送信ボタン」の位置を、固定ページごとに変更したいです。固定ページごと(送信フォームごと)に、「中央寄せ」にしたり、「左寄せ」にしたりしたいです。
はい。本プラグインは、「送信ボタン」に、「btn_confirm」というクラスを割り当てています。「確認画面上に表示されるボタン」という意味です。この「確認画面上に表示されるボタン」は、「apcf_confirmation_btn」というidを持つ、「送信ボタンを表示するための専用div」の中に入っています。デザインは、この2つの要素を組み合わせて作ります。
「送信ボタン」を「中央寄せ」や「左寄せ」にする手順
(1)allpost-contactform.cssを開いてください。
*プラグインファイル(/wp-content/plugins/allpost-contactform)の中から「allpost-contactform.css」を取り出し、お使いのテーマの中に移してテーマのほうで独自に読み込んでおられる場合は、テーマの中にあるCSSファイルを開いてください。
(2)「確認、送信ページ」(該当のフォームhtmlページと連動する、本プラグインのショートコードを貼りつけたページ)を開いて、<body>タグの中の固定ページのidをご取得ください。ここでは、仮に、page_id=7777とします。
(3)下の「中央寄せ」または「左寄せ」の枠内をコピペしてください。
(4)CSSを保存して、サーバーにアップロードし、既存ファイルを上書きしてください。
以上です!
中央寄せのCSS
#post-7777 #apcf_confirmation_btn { /* 確認ページ上に表示されるボタン(=お問い合わせフォームの送信ボタン)の位置は中央寄せになります */
margin: 0 auto;
text-align: center;
}
#apcf_confirmation_btn,#apcf_confirmation_btn .btn_confirm {
margin: 0 auto;
text-align: center;
}
margin: 0 auto;
text-align: center;
}
#apcf_confirmation_btn,#apcf_confirmation_btn .btn_confirm {
margin: 0 auto;
text-align: center;
}
左寄せの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;
}
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;
}
( 2023/02/13, 02:12:16, JST )