Squarespace

【Squarespace】お問い合わせフォームを設置する方法

squarespaceの画像
昔のomochi

Squarespaceを使ってお問い合わせフォームを作りたい!

ブログにもお問い合わせフォームがあった方が、そのブログに安心感や信頼感が生まれるので設置したい方もいらっしゃると思います。

こちらの記事ではSquarespaceを使ってブログを運用されている方がお問い合わせフォームを設置する方法について、

現在職場でSquarespaceを使ってWebサイトの作成・運用に携わっているomochiが解説していきます。

Suquarespaceにお問い合わせフォームを設置する方法

それでは早速フォームを設置していきます!

フォームの設置

フォームを追加したいところで、「+」ボタンをクリックして「Form」をクリックします。

送信ボタンの表示名変更

フォームのテンプレートが既に出来上がっているのでこれを修正していきます。
まずは、「Button Text」の欄で送信ボタンに表示させたいテキストを入力します。

入力エリアのタイトル変更

Edit Form Fields」をクリックして、入力エリアのタイトルを変えていきます。

この赤枠にあるものが、入力エリアになっています。

LABEL」を変えるとタイトルが変わります。

お問い合わせフォームのタイトルを設置する

フォームの「+」ボタンをクリックするとメニュが出るので、「Text」をクリックします。

好きなタイトルを入力します。(HeadingかParagraph1にした方が良かったかも。)

名前のFirst Name/Last Nameの表記を消したい

「First Name」と「Last Name」 の表記を削除するか、姓・名にしたかったのですが、できなさそうだったので、テキストエリアと交換することにしました。

ADD FIELD」をクリックします。

Text」をクリックします。

LABEL」を「名前」に変えます。

メニュー右上の「EDIT」をクリックして、三本線のマークが表示されたら、ドラッグ&ドロップで一番上に持っていきます。

もともとあった「名前」フィールドの「」をクリックして削除します。

完成です!こちらはパソコン画面

こちらがスマホ画面です。

お問い合わせ送信後の表示を設定

お問い合わせフォームを送信した後に、表示させるテキストを設定することができます。

Post-Submit」をクリックします。

MESSAGE」の欄に表示させたいテキストを入力します。

テストでフォームを送信してみます。

ちゃんと表示されました!

登録していたメールアドレスにメールも届きました

HTML / CSSでお問い合わせフォームを作ろうと思ったら、いろいろ覚えないといけないことが多いですが、これなら簡単ですね!

Google Driveと連携してデータを蓄積させる方法

SquarespaceではGoogle Driveと連携して、お問い合わせデータを保管することができます。

Google Driveと連携

フォームのメニューにある「Storage」をクリックして、Google Driveの「CONNECT」をクリックします。

SPREAD SHEET NAME」欄に、作成されるGoogleスプレッドシートにつけたいタイトルを入力します。

テストでフォームを送信すると、スプレッドシートが作成されました⬇︎

中身を開くとこのようにデータが入力されてました。

このようにデータが保管されれば、データ分析もやりやすいですね♪

まとめ

Squarespaceではお問い合わせフォームも、コードを書くことなく簡単に設置できます。

Squarespaceの編集ページからのテスト送信でもメール送信やGoogleスプレッドシートへのデータ保管までしてくれるので、助かります。

項目にはテキストやメールアドレスの他にもチェックボックスやラジオボックスなど、いろんな項目を追加できるので、アンケートなども作成ができますよ♪