メインコンテンツにスキップ
すべてのコレクションEmbedForms エンベットフォームスタートガイド
CSSを書いてフォームをカスタマイズする方法
CSSを書いてフォームをカスタマイズする方法

EmbedFormsでカスタムCSSを使用してフォームをカスタマイズする手順

Yuka Isobe avatar
対応者:Yuka Isobe
6か月以上前に更新

EmbedFormsでは、レイアウトや質問フィールドの仕様を自由にカスタマイズいただけます。ただし、フォントの色や背景色の変更など、追加のカスタマイズを適用したい場合はカスタムCSSで追加いただけます。

この記事ではそのカスタムCSS書いていただく手順などを説明します。以下の手順に従ってください。

カスタムCSSを書くまでの手順

1. まず作成済のフォームを一つ開き、エディターの左側のセクションで「一般設定」を開きます。スクロールダウンすると、CSSコードを挿入できる「カスタムCSS」という白いボックスがあります。

2. コードを挿入したら、必ず「適用」をクリックし、最後に変更を保存するために右上隅の「保存」をクリックしてください。

以上です。

カスタムCSSの例

以下は、カスタムCSSとして使用されるコードの例です。

フォントの色や背景色を変更するためにカスタムCSSを使用する場合は以下のコードを適用してください。

.es-label {background-color: #ADD8E6; color: blue;}

質問テキストのフォントサイズと配置を変更する場合は、カラーのセミコロンの直後に、

次のように中括弧{}内に以下のコードを追加してください。

font-size: 16px;text-align: left;

送信ボタンのテキスト色、テキストの背景色、フォントサイズ、配置を変更する場合は、.es-submit-btnを使用してください。

.es-submit-btn {background-color: #000;color: yellow;font-size: 16px;text-align: left;}

カスタムCSSで行った変更は、フォームのプレビューにて確認できます。右上の保存ボタンの隣にある「プレビュー」ボタンを押してください。

詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。

こちらの回答で解決しましたか?