よもやまチョモランマ

メールフォームのカスタマイズあれこれ

ひとつひとつ記事にしてたらきりがないので、解決先リンクを列挙しておく。

◆生年月日や期間など入力欄が横に並ぶレイアウト
【参考】formタグを改行せずに横に並べる方法
<div style=”display:inline-flex”>ではさむ

◆チェックボックスやラジオボタンは文字をクリックしても反応するようにしたい
【参考】部品とラベルを関連付ける
<label>ではさむことで解決

◆項目の文の途中で改行させたくない
【参考】リキッド・レイアウトでチェックボックスを綺麗に並べる
<label>に「display: inline-block;」あてるだけ

◆郵便番号入れたら住所が自動で出るようにしたい
【参考】郵便番号から住所をフォームに自動入力するJS
JSだけどね。「zip2addr」をダウンロードしてJSフォルダにつっこんで、コード2行コピペするだけだし。

◆先入れ文字の色を変えたり、クリックしただけで消えるようにしたり
【参考】placeholder(プレースホルダ)の表示とCSSでの装飾方法

◆入力欄がスマホのときはみ出すのをなんとかしたい
【参考】スマホ対応じゃない問い合わせフォームを「とりあえず」レスポンシブにする方法
幅100%にできるんですね

◆テキストエリアをはみ出ないようにする
【参考】【CSS】テキストエリア等がはみ出ない様にする
「box-sizing:border-box;」あてるだけ
上のとどっちがいいのかな?要検証

◆スパムメールを排除する
【参考】
プラグイン「Akismet」を入れて、メール入力欄を「[email* your-email akismet:author_email]」にしておく