폼 테마 생성

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

항목설명 필수

Form Theme Name

폼 테마의 이름을 기재합니다.

✔️

머리글

폼의 머리글을 기재합니다.

바닥글

폼의 바닥글을 기재합니다.

테마 CSS

폼에 적용될 css를 기재합니다.

전송 버튼 레이블

전송 버튼의 레이블을 기재합니다.

테마 CSS 기본값

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

@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;
}

Last updated