お問い合わせフォームの専門の業者formrun（フォームラン）のフォームはコード型で実装すればHTML/CSSでデザインカスタマイズが可能です。Webデザイナー・コーダーの方に向けた内容になります。formrun（フォームラン）のヘルプページは充実しているのですが、自作のデモサイトに実装しているフォームを例に、今後迷わず実装できるための手順をまとめました。スパム対策としてGoogle reCAPTCHAを採用しています。

例えば一つの画像をタブレットとスマートフォンで違う見せ方にしたいとき、CSSのobject-fit: coverとaspect-ratioの設定によってレスポンシブ対応しながら任意の形にトリミングできます。

静的サイトの制作ではhtml/css/jsを変更した後にブラウザの再読み込み、キャッシュクリアなどをいちいち行っておりました。今回導入したBrowsersync+Gulpの環境では、ブラウザの再読み込みなどをしなくても自動更新が可能になります。導入にあたっていろいろな参考記事を参考にしたのですが、最初うまくいかずハマってしまいました。同じ様に困っている方の助けになれば幸いです。2023年1月現在の内容です。

CSSでテキストの上にドットを付ける方法です。radial-gradientを使用。spanタグで一文字づつ括る必要なし。参考記事のCSSをベースにSafariでもドットが表示されるように改良しました。

LPのお問い合わせフォーム、どうしてますか？プラグインを使う為にわざわざWordPress化するの、なんだかなあ・・と思っていたところ、PHP工房さんのフリーメールフォームが便利に使えそうなことがわかりました。前に作ったLPのデモサイトに、PHP工房さんのフォームを使用してお問い合わせフォームを実装してみました。