Webflowでお問い合わせフォームを作成する方法【9Dsys/Webflow大学】

メインセクション

早速作っていきます…がその前にブレイクポイントに設定しているか確認しましょう。

新しく作成する時は毎回、確認することをオススメします。『タブレットサイズで作っていることに途中で気が付き、作り直しになった。』なんてこともたまにあります。ブレイクポイントで作成しているか確認したらスタートです。

‍

まずはいつもどおりSection、Containerから作成し、各要素を入れていきます。

• Section、Containerを挿入
• H1 Headerを挿入
  ・クラスはHERO Headingをコピーして「Larger Heading」と設定
  ・文字の大きさ：48px　Height 1-(ハイフン)
  ・文字色を変更。(おまかせ)
  ・Margin bottom：60px
• シンボルのコンタクトフォームを挿入

ナビゲーションバー、フッター

この2つを入れるだけで一気に完成度が上がった気がしませんか？僕はなんだかちょっとだけ上がります。アゲアゲです。

• シンボルに保存したナビゲーションバーとフッターを挿入
  

正直ここでお問い合わせページは完成。と言っても良いのですが、あまりにも短すぎるのでフッターとナビバーに少しだけよく見る小細工をしようと思います。

まずはフッターから

‍

フッターを下に貼り付ける

ブレイクポイントよりも大きさなサイズで表示すると、フッターが地に足をつけずに浮いてしまいます。これを改善すべく以下の設定をします。
※作業はブレイクポイントで行います。

• Bodyを選択
• ピンクタグ(ALL Body)を設定
• Flex boxを設定して縦並びに

‍

次にフッター編集していきます。

• シンボルをダブルクリックしてフッターのsectionを選択
• Margin top：Auto

Autoで設定することによりマージンが自動で伸縮し、どのサイズでもフッターを一番下に配置する事ができます。ホームページのCMSを作成するパートで「詳しく見る」を下に配置したときと同じ方法です。便利な機能なので覚えておきましょう。

このコースの参考にしているWebflowの公式動画ではフッターにこの設定をして終了していますが、今回このブログではナビバーにも一つ小細工したいと思います。

‍

ナビバーを常に上部に表示させる

• ナビバーを選択
• 写真のように設定
  

これだけでナビバーを上部に固定して表示できます。わかりやすいデザインなのですぐにできますね。

‍

ナビバーにはその他にも様々な小細工を使用したサイトがあります。その設定はまた他の記事で紹介したいと思います。

まとめ

今回は短い回でしたね。お問い合わせは重要な機能なのでオリジナルでもう少し改造しても良いかもしれません。

別記事にてナビバー様々なナビバー特集をしてみようかな、と思いつつたまには早く終わらせて、体を動かす日にしようと思います。

‍

それでは今日もお疲れ様でした。次回は「reCAPTCHAの導入」です。必要ないと思う方もいるかも知れませんが、人気になったら必要なので、予めやり方を知っていても損はないですね。それでは次回また頑張りましょう。

情報追加はツイッターで告知します。

Webflowの最新情報や使い方は新しくなる度に更新していく予定です。

情報の更新や便利な使い方はツイッターでつぶやきます！

是非フォローお願いします！