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

くりたまさと
Masato Kurita
栗田 将人 の過去を覗き見る↗︎
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専門家として事業を行っている栗田自身が実際に使用して便利だと感じたWebflowの使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。

これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

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

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

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

Read more...

【13Days/①】Webflowでアニメーションを作成しよう

Webflowを使ったアニメーションの付け方を解説します。最初はWebflowのアニメーション機能の基礎から解説。①ではタイムアニメーションを設定して次回②で完成させます。アニメーションの付け方の基礎から学ぶことができますよ。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup