dedede Snow Monkey Formsで横並びにする方法
最近ノーコードでクオリティの高いサイトを作れる有料テーマ Snow Monkey が話題ですが、そのSnow Monkey で使える拡張プラグインSnow Monkey Formsがあります。
名前の通りフォームを作れるブロック機能ですが、デフォルトではカラム追加で横並びにするということができません。
そこで、横並びにするカスタムCSSを作ってみました。
以下のようなものが作れます。
Snow Monkey Fomrs の設定
2つ並びの設定
まずはブロックエディター側の”メールアドレス・電話番号” の設定をします。
新規追加からメールアドレスのところに、+マークを押して、Tel ブロックを追加してください。
追加するとメールアドレスの上に追加されるので、下がTelになるように移動してください。
その後カスタムCSSをあてるために、class名をつけます。文書→フォーム→項目 の高度な設定で
form-flex two-column この二つを追加してください。この”項目”につけないと正常に横並びにならないので気をつけてましょう。
3つ並びの設定
同様に3つ並びの”ご希望機種”の設定をします。（お問い合わせで好きなスマホと台数を送信できるフォームを想定しています)
先ほどと同様に”項目”を作成します。先程の項目を複製し、高度な設定のtwo-columnをthree-columnに変えてください。その後emailとTelのブロックを削除して、“段落”, “セレクトボックス”, “テキスト” の順にブロックを追加しそれぞれ次のように設定してください。
- “段落” :スマートフォン と記載。(例ではフォントオウサムのアイコンを使ってますが割愛)
- “セレクトボックス”: optionsを以下に設定
“IphoneX” : “iPhoneX”
“iPad” : “iPad” - “テキスト”: placeholderを”台数”に設定。
以上でフォームブロック側の設定はOKです。公開を忘れずにしておきましょう。
カスタムCSSの設定
次はカスタムCSSに追加していきます。具体的にはflexを使って横表示にするいうだけです。
微調整も含めたCSSですので、以下そのままコピペしていただければお使いできます。
管理画面の”外観”→”カスタマイズ” の”追加CSS” に以下のコードを貼ったらOKです。
レスポンシブにも対応するように作ってありますので、実際に使ってみてください。
/* この下からform 2カラムの設定 */
.custom-form-section .wp-block-snow-monkey-forms-item{
margin-bottom:15px;
}
.form-flex .smf-item__controls{
display:flex;
justify-content: flex-start;
}
.snow-monkey-form{
/* 灰色に */
background:#F6F6F6;
padding:25px;
border-radius:3px;
box-shadow:2px 2px 12px;
}
.smf-item__controls{
justify-content:space-around
}
.form-flex .smf-placeholder{
margin:8px;;
margin-left:0;
}
.form-flex .form-flex-text{
display:inline-block;
width:100%;
line-height:3.5;
}
@media screen and (max-width:550px){
/*スマホ用お問い合わせフォーム*/
.three-column .smf-item__controls{
flex-wrap: wrap;
}
.two-column .smf-item__controls{
flex-wrap:nowrap;
}
.form-flex .smf-placeholder{
margin:8px;;
width:40%;
}
.form-flex .form-flex-text{
display:inline-block;
width:100%;
line-height:2.5;
}
.two-column .form-flex-text{
line-height:4;
}
}
/* ここまでがtwo-colomun*/まとめ
フォームが長くなりすぎて嫌な場合にこの横並びは使えるので、ぜひお使いください。
なお、微調整はまだまだ詰められる部分がありますので、適宜調整お願いします。
