Cyfonsの登録フォームをXeory Base用にカスタムしてみた

パソコンとマウス

バズ部が提供している無料WordPressテンプレートXeory Baseの記事下やランディングページにCyfonsの登録フォームを埋める場合のCSSのカスタマイズをしてみました!

コンテンツSEOブログを運営する時に人気を博しているのがXeoryです。Cyfonsのメルマガフォームをうまくカスタマイズしてメルマガ登録率をアップさせちゃいましょう!

スポンサーリンク

CyfonsフォームのHTMLソースを該当箇所に貼る

フォーム自体にあったstyleを外したシンプルなフォームです。実際に埋め込んだものがこれ。

 

お名前  
メールアドレス

 

xeorybaseのランディングページに貼ると下図のようになった。

Cyfonsをxeoryに導入

 

CSSでカスタマイズ

まずは<form></form>全体をdiv class=”cyfons”タグで囲む。

 

背景色を指定する

次にテーマ編集か、jetpackのカスタムCSSで以下のようなCSSを設定しよう。ここではjetpackのカスタムCSSに追加する。以下のCSSを指定しよう。

すると下図のようになった。 CyfonsをXeory用にカスタム ちなみに左側の「姓名」と「メールアドレス」は不要なので削除した。HTMLソースとCSSをそれぞれ記載しておきます。

 

>>サンプルページ

 

iPhone6とiPad miniで見た時のブラウザ画面

iPhone

Cyfonsをカスタマイズ

iPad mini

Cyfonsをxeoryにカスタム

 

 

以上です。何か不具合があればコメントよろしくです!

 

 

パソコンとマウス

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。