HTMLやCSSでGoogleフォームのカスタマイズを完全解説

Tony Yan

·2024年12月23日

·90分で読める

HTMLやCSSでGoogleフォームのカスタマイズを完全解説 — Image Source: pexels

GoogleフォームのカスタマイズをHTMLやCSSで行うことで、フォームのデザインを自由に変更できます。これにより、あなたのブランドイメージに合ったプロフェッショナルな外観を実現できます。さらに、入力完了率や回答率の向上も期待できます。例えば、入力項目を減らしたり、エラーをその場で表示させることで、ユーザーがストレスなくフォームを利用できる環境を作れます。カスタマイズされたGoogleフォームは、ユーザーからの信頼を高め、顧客満足度を向上させる重要なツールとなります。

Googleフォームのカスタマイズを始める準備

GoogleフォームをHTMLやCSSでカスタマイズする前に、基本的な準備を整えることが重要です。このセクションでは、Googleフォームの作成手順、必要な情報の取得方法、そしてHTMLとCSSの基礎知識について解説します。

Googleフォームの基本的な作成手順

Googleフォームを作成するには、まずGoogleアカウントにログインしてください。その後、Googleドライブにアクセスし、「新規」ボタンをクリックして「Googleフォーム」を選択します。フォームのタイトルや説明を入力し、質問を追加していきます。質問形式は、選択肢、記述式、チェックボックスなどから選べます。

ヒント: フォームの目的に応じて、質問形式を適切に選ぶことで、回答者にとって使いやすいフォームを作成できます。

作成が完了したら、「送信」ボタンをクリックしてフォームのリンクを取得します。このリンクを利用して、フォームを共有したり、ウェブサイトに埋め込むことが可能です。

必要な情報（action属性やname属性）の取得方法

GoogleフォームをHTMLやCSSでカスタマイズする際には、フォームのaction属性とname属性が必要です。これらの情報は、フォームの送信先や各入力フィールドの識別に使用されます。

Googleフォームの「送信」ボタン横にある「︙」メニューをクリックします。
「HTMLを取得」を選択し、埋め込み用のコードをコピーします。
コピーしたコードをテキストエディタに貼り付けて、HTML構造を確認します。

注意: コピーしたHTMLコード内に、actionやnameといった属性が含まれています。これらを正確に把握し、カスタマイズ時に適切に使用してください。

HTMLとCSSを使用するための基礎知識

Googleフォームのカスタマイズには、HTMLとCSSの基本的な知識が必要です。以下に、最低限知っておくべきポイントをまとめました。

HTMLの基礎

HTMLタグ: <form>や<input>など、フォーム作成に必要なタグを理解しましょう。
属性: typeやplaceholderなど、各タグに設定する属性の役割を学びます。
構造: フォーム全体のHTML構造を把握することで、効率的にカスタマイズできます。

CSSの基礎

セレクタ: 特定のHTML要素を選択してスタイルを適用する方法を学びます。
プロパティ: colorやfont-sizeなど、デザインを変更するためのプロパティを理解します。
レスポンシブデザイン: モバイルやタブレットでも見やすいフォームを作成するために、メディアクエリを活用します。

ポイント: HTMLとCSSの知識があれば、Googleフォームのデザインを自由にカスタマイズできます。初心者の方は、基本的なチュートリアルを参考にしながら学習を進めてください。

これらの準備を整えることで、Googleフォームのカスタマイズをスムーズに進めることができます。次のセクションでは、具体的なHTMLとCSSを使ったカスタマイズ方法について詳しく解説します。

HTMLとCSSでGoogleフォームをカスタマイズする方法

GoogleフォームをHTMLとCSSでカスタマイズすることで、より魅力的で使いやすいフォームを作成できます。このセクションでは、HTMLでフォームの基本構造を作成し、CSSでデザインを調整する方法を解説します。また、Googleフォームのaction属性とname属性を正しく設定する方法についても説明します。

HTMLでフォームの基本構造を作成

HTMLを使用してGoogleフォームの基本構造を作成する際、まずGoogleフォームから取得した埋め込みコードを活用します。このコードを基に、必要な要素を整理し、カスタマイズ可能なHTMLを構築します。

Googleフォームの埋め込みコードを取得
Googleフォームの「送信」ボタンをクリックし、「HTMLを取得」を選択します。表示されたコードをコピーして、テキストエディタに貼り付けます。

HTML構造を整理
コピーしたコードには、<form>タグや<input>タグが含まれています。これらを確認し、不要な要素を削除してシンプルな構造にします。例えば、以下のような基本構造を作成します：

<form action="https://docs.google.com/forms/d/e/フォームID/formResponse" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="entry.123456789" required>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="entry.987654321" required>
    <button type="submit">送信</button>
</form>

必要な属性を確認
各<input>タグには、Googleフォームから取得したname属性を正確に設定します。これにより、フォームの送信データが正しく処理されます。

ポイント: HTML構造を整理することで、後のCSSカスタマイズが簡単になります。

CSSでフォームのデザインをカスタマイズ

CSSを使用してフォームのデザインを調整することで、ブランドイメージに合ったスタイルを適用できます。以下の手順で進めてください。

CSSファイルを作成
新しいCSSファイルを作成し、HTMLファイルにリンクします。例えば：
```
<link rel="stylesheet" href="style.css">
```

フォーム全体のスタイルを設定
フォーム全体の背景色や余白を設定します。

form {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    margin: auto;
}

入力フィールドのデザインを調整
入力フィールドの幅やフォントサイズを調整します。

input[type="text"], input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

送信ボタンのスタイルを設定
ボタンを目立たせるために、色やホバー効果を追加します。

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;
}

ヒント: レスポンシブデザインを意識して、モバイルデバイスでも見やすいフォームを作成しましょう。

Googleフォームのaction属性とname属性を正しく設定する方法

Googleフォームを正しく動作させるためには、action属性とname属性を正確に設定する必要があります。

action属性の確認
Googleフォームの埋め込みコードからaction属性を取得します。この属性は、フォームの送信先URLを指定します。例えば：
```
<form action="https://docs.google.com/forms/d/e/フォームID/formResponse" method="post">
```
name属性の設定
各入力フィールドには、Googleフォームから取得したname属性を設定します。この属性は、送信データを識別するために使用されます。例えば：
```
<input type="text" name="entry.123456789">
```
動作確認
フォームをテストして、データが正しく送信されることを確認します。Googleフォームの回答スプレッドシートで送信結果を確認できます。

注意: action属性やname属性を間違えると、フォームが正しく動作しません。慎重に設定してください。

これらの手順を実行することで、Googleフォームのカスタマイズが可能になります。次のセクションでは、サンクスページの作成とGoogleフォームとの連携方法について詳しく解説します。

サンクスページの作成とGoogleフォームとの連携

Googleフォームを送信した後、ユーザーに感謝の気持ちを伝えるサンクスページを表示することで、より良いユーザー体験を提供できます。このセクションでは、サンクスページをHTMLとCSSで作成する方法と、Googleフォーム送信後にそのページへリダイレクトする手順を解説します。

サンクスページのHTMLとCSS作成

サンクスページは、ユーザーがフォーム送信後に最初に目にするページです。このページを魅力的にデザインすることで、ユーザーにポジティブな印象を与えられます。

HTMLで基本構造を作成
サンクスページのHTMLはシンプルで構いません。以下のような基本構造を作成します：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンクスページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="thank-you-container">
        <h1>ご回答ありがとうございます！</h1>
        <p>フォームの送信が完了しました。</p>
        <a href="https://example.com" class="back-link">ホームページに戻る</a>
    </div>
</body>
</html>

CSSでデザインを調整
サンクスページのデザインをCSSでカスタマイズします。以下の例を参考にしてください：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.thank-you-container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.thank-you-container h1 {
    color: #4CAF50;
}

.back-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.back-link:hover {
    background-color: #45a049;
}

ポイント: サンクスページのデザインは、ブランドイメージに合わせてカスタマイズしてください。色やフォントを調整するだけで、プロフェッショナルな印象を与えられます。

Googleフォーム送信後にサンクスページへリダイレクトする方法

Googleフォームの純正サンクスページではなく、自作のサンクスページにリダイレクトするには、少し工夫が必要です。以下の手順で設定を行います。

Googleフォームの埋め込みコードを取得
Googleフォームの「送信」ボタンをクリックし、「HTMLを取得」を選択します。このコードをコピーして、テキストエディタに貼り付けます。

リダイレクト用のJavaScriptを追加
コピーしたHTMLコードに、以下のJavaScriptを追加します。このコードは、フォーム送信後に指定したURL（サンクスページ）へリダイレクトします。

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault(); // デフォルトの送信動作を停止
        const form = e.target;
        const action = form.action;
        const formData = new FormData(form);

        fetch(action, {
            method: 'POST',
            body: formData,
        }).then(() => {
            window.location.href = 'https://example.com/thank-you.html'; // サンクスページのURL
        }).catch(error => {
            console.error('送信エラー:', error);
        });
    });
</script>

動作確認
フォームをテストして、送信後にサンクスページへ正しくリダイレクトされるか確認します。ブラウザのデベロッパーツールを使用して、エラーが発生していないかもチェックしてください。

注意: この方法では、Googleフォームの純正サンクスページをスキップします。リダイレクト先のURLを間違えないように設定してください。

ヒント: サンクスページを別タブで開く設定も可能です。この方法を使うと、ユーザーが元のサイトから離脱するのを防げます。

これらの手順を実行することで、Googleフォームのカスタマイズにおいて、より魅力的なサンクスページを実現できます。次のセクションでは、Googleフォームのカスタマイズにおける注意点について詳しく解説します。

Googleフォームのカスタマイズにおける注意点

GoogleフォームをHTMLやCSSでカスタマイズする際、いくつかの重要な注意点があります。これらを理解し、適切に対応することで、フォームの品質とユーザー体験を向上させることができます。

フォームの動作確認手順

カスタマイズしたGoogleフォームが正しく動作するか確認することは、非常に重要です。動作確認を怠ると、ユーザーがフォームを利用できない問題が発生する可能性があります。以下の手順で確認を行いましょう。

フォームの送信テストを実施
実際にフォームに入力し、送信ボタンを押してみてください。送信後、Googleフォームの回答スプレッドシートにデータが正しく記録されているか確認します。
異なるデバイスでのテスト
パソコン、スマートフォン、タブレットなど、複数のデバイスでフォームを開き、表示や操作性を確認します。特にモバイルデバイスでの動作は、ユーザー体験に大きな影響を与えます。
ブラウザ互換性の確認
Google Chrome、Safari、Firefox、Microsoft Edgeなど、主要なブラウザでフォームをテストしてください。ブラウザによっては、CSSのスタイルが異なる場合があります。
エラーメッセージの確認
必須項目を空欄のまま送信しようとした場合や、無効なデータを入力した場合に、適切なエラーメッセージが表示されるか確認します。

ヒント: 動作確認は、フォームを公開する前に複数回行うことをおすすめします。これにより、予期しない問題を未然に防ぐことができます。

スパム対策の重要性とその方法

Googleフォームを公開すると、スパムや不正な回答が送信されるリスクがあります。これを防ぐために、スパム対策を講じることが必要です。以下の方法を参考にしてください。

reCAPTCHAの導入
Googleフォームには、スパム対策としてreCAPTCHAを追加する機能があります。これにより、自動化されたスパム送信を防ぐことができます。
回答制限の設定
Googleフォームの設定で、回答を1人1回に制限することが可能です。これにより、同じユーザーからの繰り返し回答を防げます。
メールアドレスの収集
回答者にメールアドレスの入力を求めることで、匿名のスパム回答を減らすことができます。ただし、プライバシーに配慮し、必要な場合のみ使用してください。
回答の手動確認
スプレッドシートに記録された回答を定期的に確認し、不審な回答を削除することも有効です。

注意: スパム対策を強化しすぎると、正規のユーザーがフォームを利用しにくくなる場合があります。バランスを考慮して設定を行いましょう。

Googleフォームの仕様変更への対応方法

Googleフォームは、Googleのサービスの一部であるため、仕様が変更されることがあります。これにより、カスタマイズしたフォームが正しく動作しなくなる可能性があります。以下の方法で、仕様変更に対応しましょう。

定期的な確認
Googleフォームの公式ヘルプページやアップデート情報を定期的に確認してください。新しい機能や変更点を把握することで、迅速に対応できます。
カスタマイズコードの見直し
Googleフォームの仕様変更により、HTMLやCSSのカスタマイズが影響を受ける場合があります。コードを見直し、必要に応じて修正してください。
バックアップの作成
カスタマイズしたコードやフォームの設定を定期的にバックアップしておくことで、問題が発生した際に迅速に復元できます。
代替ツールの検討
Googleフォームの仕様変更が頻繁に発生し、対応が難しい場合は、他のフォーム作成ツールを検討するのも一つの方法です。他のツールには、より洗練されたデザインや高度な機能を提供するものもあります。

ポイント: GoogleフォームはGoogleシートと簡単に統合できる点が大きな利点です。この特徴を活かしつつ、仕様変更に柔軟に対応することが重要です。

これらの注意点を押さえることで、Googleフォームのカスタマイズをより効果的に行うことができます。次のステップとして、実際のフォームを作成し、これらのポイントを実践してみてください。

実際のGoogleフォームカスタマイズ例

Googleフォームをカスタマイズすることで、シンプルなデザインからブランドに特化したフォームまで、さまざまなスタイルを実現できます。このセクションでは、具体的なカスタマイズ例を紹介します。これを参考にすることで、あなたの目的に合ったフォームを作成できるでしょう。

シンプルなデザインのフォーム

シンプルなデザインは、ユーザーにとってわかりやすく、回答しやすいフォームを提供します。特に、情報収集やアンケート調査など、迅速な回答を求める場合に適しています。

作成手順

背景色と余白の調整
フォーム全体に落ち着いた背景色を設定し、余白を適切に確保します。これにより、視覚的な負担を軽減できます。
```
form {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 500px;
    margin: auto;
}
```
フォントの統一
フォーム内のテキストに統一感を持たせるため、シンプルなフォントを選びます。
```
body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
}
```

入力フィールドのデザイン
入力フィールドをシンプルにしつつ、視認性を高めます。

input[type="text"], input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

送信ボタンのスタイル
ボタンを目立たせるために、シンプルながらも視覚的に引き立つデザインを採用します。

button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}

ポイント: シンプルなデザインは、回答者が迷わず入力できる環境を提供します。特に、複雑な質問がない場合に最適です。

ブランドに合わせたフォームデザイン

企業やブランドのイメージを反映したフォームは、プロフェッショナルな印象を与えます。特に、顧客との接点として使用するフォームでは、ブランドカラーやロゴを活用することが重要です。

作成手順

ブランドカラーの適用
フォーム全体にブランドカラーを取り入れることで、統一感を演出します。

form {
    background-color: #f0f8ff; /* ブランドカラー例 */
    padding: 30px;
    border: 2px solid #1e90ff; /* ブランドアクセントカラー */
    border-radius: 10px;
    max-width: 600px;
    margin: auto;
}

ロゴの配置
フォームの上部にロゴを配置し、ブランドの認知度を高めます。

<div class="logo-container">
    <img src="logo.png" alt="ブランドロゴ" style="max-width: 150px; margin-bottom: 20px;">
</div>

カスタムフォントの使用
ブランドイメージに合ったフォントを使用し、デザイン性を向上させます。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}

ボタンのデザイン強化
ブランドカラーを基調としたボタンデザインを採用します。

button {
    background-color: #1e90ff; /* ブランドカラー */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}
button:hover {
    background-color: #104e8b;
}

レスポンシブ対応
モバイルデバイスでも見やすいデザインを実現するため、メディアクエリを活用します。
```
@media (max-width: 768px) {
    form {
        padding: 20px;
        max-width: 100%;
    }
    button {
        width: 100%;
    }
}
```

ヒント: ブランドに合わせたフォームデザインは、顧客に信頼感を与えます。特に、企業の窓口として使用するフォームでは、デザインの一貫性が重要です。

これらのカスタマイズ例を参考にすることで、Googleフォームのカスタマイズを効果的に行えます。シンプルなデザインで使いやすさを重視するか、ブランドに特化したデザインでプロフェッショナルな印象を与えるかは、あなたの目的次第です。ぜひ、これらの手法を活用して、理想的なフォームを作成してください。

Googleフォームのカスタマイズを行うことで、視覚的に見やすく、使いやすいフォームを作成できます。入力項目を減らしたり、エラーをその場で表示させるだけでも、回答率の向上が期待できます。また、カスタマイズされたデザインは回答者にとって魅力的で、回答意欲を高める効果があります。企業の窓口として使用する場合、自社のブランドイメージに合わせたフォームは信頼感を与えます。

次のステップとして、実際にカスタマイズを試してみましょう。シンプルなデザインから始め、徐々に高度なデザインに挑戦することで、より効果的なフォームを作成できます。あなたの目的に合ったフォームを作り上げてください。

FAQ

Googleフォームをカスタマイズする際、よく寄せられる質問をまとめました。これらの回答を参考に、疑問を解消してください。

GoogleフォームをカスタマイズするためにHTMLやCSSの知識は必要ですか？

はい、基本的なHTMLとCSSの知識が必要です。フォームの構造を理解し、デザインを変更するためには、HTMLタグやCSSプロパティの使い方を知っておくと便利です。ただし、初心者でも簡単なカスタマイズから始められるので、少しずつ学びながら進めてください。

ヒント: 初心者向けのHTMLやCSSのチュートリアルを活用すると、スムーズに学習できます。

Googleフォームの埋め込みコードはどこで取得できますか？

Googleフォームの「送信」ボタンをクリックし、「HTMLを取得」を選択してください。表示されたコードをコピーして、テキストエディタに貼り付けることで確認できます。このコードには、フォームのaction属性やname属性が含まれています。

注意: コピーしたコードを編集する際は、元の構造を壊さないように注意してください。

カスタマイズしたGoogleフォームはスマートフォンでも使えますか？

はい、CSSでレスポンシブデザインを適用すれば、スマートフォンやタブレットでも快適に利用できます。@mediaクエリを活用して、画面サイズに応じたデザインを設定してください。

@media (max-width: 768px) {
    form {
        padding: 15px;
        max-width: 100%;
    }
    button {
        width: 100%;
    }
}

ポイント: モバイルユーザーの体験を向上させるために、テストを複数のデバイスで行いましょう。

Googleフォーム送信後に自作のサンクスページを表示できますか？

はい、可能です。フォーム送信後にリダイレクトするJavaScriptを追加することで、自作のサンクスページを表示できます。ただし、Googleフォームの純正サンクスページをスキップする設定が必要です。

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault();
        const form = e.target;
        const action = form.action;
        const formData = new FormData(form);

        fetch(action, {
            method: 'POST',
            body: formData,
        }).then(() => {
            window.location.href = 'https://example.com/thank-you.html';
        }).catch(error => {
            console.error('送信エラー:', error);
        });
    });
</script>