埋め込みフォームをご利用の場合、CSSを利用して文字・ボタン・背景の色、フォームの幅を変更することができます。
デフォルトで以下のように設定されているため、変更したい場合はEventHubから取得できる埋め込みフォームのコードに本ページで紹介するコードを挿入してください。
| 場所 | デフォルト色 | EventHubから取得できる埋め込みフォームのコード |
| 文字 | 黒 | <div id="eh-root"></div> <link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" /> <script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/ get/xxxxxxxxxxxxxxx"></script></div> |
| ボタン | 背景：青 文字：白 |
|
| 背景 | 白 | |
| 幅 | 468px | |
| エラー メッセージ |
赤 |
埋め込みフォームの設定方法やコードの取得方法は、埋め込みフォームを作成するをご覧ください。
1. 文字色を変更する
デフォルトのコードに赤文字のコードを追加してください。[color: #FFFFFF] で指定した文字色に変更されます。
<div id="eh-root"></div>
<link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" />
<style type="text/css">
#eh-root {
color: #FFFFFF;
}
</style>
<script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/
get/xxxxxxxxxxxxxxx"></script></div>
2. ボタンの色を変更する
デフォルトのコードに赤文字のコードを追加してください。ボタンの背景色[background: #191970]、文字色[color: #FFFFFF]で指定した色に変更されます。
<div id="eh-root"></div>
<link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" />
<style type="text/css">
#eh-root button {
background: #191970;
color: #FFFFFF;
}
</style>
<script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/
get/xxxxxxxxxxxxxxx"></script></div>
3. フォームの背景色を変更する
デフォルトのコードに赤文字のコードを追加してください。[background: #6495ED]で指定した背景色に変更されます。
<div id="eh-root"></div>
<link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" />
<style type="text/css">
#eh-root {
background: #6495ED;
}
</style>
<script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/
get/xxxxxxxxxxxxxxx"></script></div>
4. フォームの幅を変更する
デフォルトのコードに赤文字のコードを追加してください。[max-width: 600px]で指定した幅に変更されます。
<div id="eh-root"></div>
<link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" />
<style type="text/css">
#eh-root form {
max-width: 600px;
}
</style>
<script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/
get/xxxxxxxxxxxxxxx"></script></div>
5. エラーメッセージのデザインを変更する
必須項目が未入力の場合や、参加登録期限が過ぎている等が原因でエラーが発生した場合に、登録ボタンを押下後 以下のようにエラーメッセージが表示されます。このデザインを変更する場合は、デフォルトのコードに赤文字のコードを追加してください。
<div id="eh-root"></div>
<link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" />
<style type="text/css">
#eh-root .error {
background-color: #F7E2FF;
}
#eh-root .errorMessages ul {
border: 1px solid #CE08FF;
color: #CE08FF;
background-color: #F3E1F7;
}
</style>
<script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/
get/xxxxxxxxxxxxxxx"></script></div>
6. 全てのデザインを変更する
1~5全てのデザインを変更する場合は、以下のようにコードを挿入してください。
<div id="eh-root"></div>
<link rel="stylesheet" type="text/css" href="https://client.eventhub.jp/assets/css/eventhub-script.css" />
<style type="text/css">
#eh-root {
color: #FFFFFF;
background: #6495ed;
}
#eh-root button {
background: #191970;
color: #FFFFFF;
}
#eh-root form {
max-width: 600px;
}
#eh-root .error {
background-color: #F7E2FF;
}
#eh-root .errorMessages ul {
border: 1px solid #CE08FF;
color: #CE08FF;
background-color: #F3E1F7;
}
</style>
<script async type="text/javascript" src="https://client-api.eventhub.jp/api/client/embeddedScript/
get/xxxxxxxxxxxxxxx"></script></div>