> For the complete documentation index, see [llms.txt](https://help.smallbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smallbuilder.com/ko/smallbuilder-forms/undefined-1/setup-lookup-selector.md).

# 폼 테마 생성

**폼의 머리글, 바닥글, 스타일 등을 설정을 위해 폼 테마를 생성합니다.**

<figure><img src="/files/E5eHv5Y2RJuDlx6CFZVG" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="180">항목</th><th width="469">설명</th><th>필수</th></tr></thead><tbody><tr><td>Form Theme Name</td><td>폼 테마의 이름을 기재합니다.</td><td><mark style="color:red;">✔️</mark></td></tr><tr><td>머리글</td><td>폼의 머리글을 기재합니다.</td><td></td></tr><tr><td>바닥글</td><td>폼의 바닥글을 기재합니다.</td><td></td></tr><tr><td>테마 CSS</td><td>폼에 적용될 css를 기재합니다.</td><td></td></tr><tr><td>전송 버튼 레이블</td><td>전송 버튼의 레이블을 기재합니다.</td><td></td></tr></tbody></table>

### 테마 CSS 기본값

:root 에 있는 색상코드를 변경하여 쉽게 Style을 변경 할 수 있습니다.

```css
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

body, td {
font-family: "Pretendard", Arial, Helvetica, sans-serif;
}
:root{
/* 섹션 배경색 */
--custom-brand-background-color:#231f20;
/* 섹션 왼쪽 테두리색 */
--custom-brand-border-color:#231f20;
/* 섹션 내용 글자 색 */
--custom-brand-h3-color:#fff;
/* 섹션 제목 글자 색 */
--custom-brand-h3-title-color:#EF4023;
/* 제출 버튼 배경 색 */
--custom-brand-button-background-color:#231f20;
/* 제출 버튼 글자 색 */
--custom-brand-button-txt-color:#fff;
}
/* 템플릿 type 분류 */
.subject-wrap h3 {
font-size: 1.25rem;
font-weight: 500;
color: var(--custom-brand-h3-color);
background-color: var(--custom-brand-background-color);
border-left: 4px solid var(--custom-brand-border-color);
}
.subject-wrap h3 strong {
display: inline-block;
color: var(--custom-brand-h3-title-color);
padding: 0.5rem 1rem;
margin-right: 1rem;
}
.submit-wrap button {
font-size: 1.125rem !important;
font-weight: 600 !important;
color: var(--custom-brand-button-txt-color) !important;
width: 100% !important;
height: 4.375rem !important;
background: var(--custom-brand-button-background-color) !important;
border: 0 !important;
border-radius: 0.5rem !important;
transition: 0.5s !important;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .3) !important;
}
```