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

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を設定して縦並びに
Bodyの設定

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

  • シンボルをダブルクリックしてフッターのsectionを選択
  • Margin top:Auto
フッターを下に固定する

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

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


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

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

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

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

まとめ

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

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


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

併せて読むとおすすめの記事▼

Webflowで『reCAPTCHA』を設定する方法

WebflowにてreCAPTCHAの導入方法を解説します。不正アクセス対策に必要なreCAPTCHA。Googleが提供しているものを使用するので無料で導入できます。セキュリティー強化のため、導入をオススメします。

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。