기본 제공 양식 디자이너 외에도 양식 빌더에서 CSS를 사용하여 양식을 사용자화할 수도 있습니다. 이 가이드에는 양식에서 시도하거나 사용할 수 있는 CSS 코드의 몇 가지 예가 포함되어 있습니다. 양식에 CSS를 적용하려면 사용자 정의 CSS 코드 삽입을 참조하십시오 .
페이지에 배경 이미지 추가
다음 CSS 코드를 사용하면 양식에 대한 사용자 정의 배경 이미지를 추가할 수 있습니다.
![바다 배경의 문의하기 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-Clone-of-양식-Jotform-Form-Builder-2023-06-25-22-38-04.png)
.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}
{image_url} 을 원하는 배경화면 이미지 URL로 대체하세요.
페이지 배경을 투명하게 만들기
임베드 양식에서 유용하며, 웹 페이지의 배경을 사용하기 위해 양식이 필요한 경우 다음 코드를 사용할 수 있습니다.
![CSS 코드를 사용하여 양식 사용자화하기 Image-1](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-42-59.png)
.supernova, body {
background: none;
}
양식 배경을 투명하게 만들기
다음 코드는 양식의 배경과 그림자를 제거하여 평평하고 투명하게 만듭니다.
![CSS 코드를 사용하여 양식 사용자화하기 Image-2](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-44-15.png)
.form-all {
background: none !important;
box-shadow: none;
}
양식 위의 간격 제거
임베드 양식에 유용한 다음 코드는 양식 위의 추가 공간을 제거합니다.
![A side-by-side comparison of an embedded contact form before and after removing the space at the top](https://www.jotform.com/blog/wp-content/uploads/2011/03/form-remove-margin-top-min.png)
body, .form-all {
margin-top: 0;
}
머리글 배경색 변경
다음 코드를 사용하여 양식에 있는 모든 머리글 요소의 배경색을 변경합니다.
![파란색 배경의 "문의하기" 제목 섹션을 가리키는 화살표가 있는 문의 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-47-08.png)
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}
팁
색상 관련 속성의 경우 이 색상 선택기를 사용하여 색상의 16진수 값(예: #a1b2c3)을 생성할 수 있습니다.
부제목 색상 변경
다음 코드는 모든 머리글 요소의 하위 제목의 텍스트 색상을 변경합니다.
![녹색 24시간 부제목을 가리키는 화살표가 있는 문의 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-50-02.png)
.form-subHeader {
color: #00b000 !important;
}
모든 하위 레이블 색상 변경
다음 CSS 코드를 사용하여 양식의 모든 하위 레이블 색상을 변경하십시오.
![주황색 이름 하위 레이블을 가리키는 화살표가 있는 문의 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-51-30.png)
.form-sub-label {
color: #ffb21d;
}
하이라이트 효과 색상 변경
다음 코드를 사용하여 입력 필드의 배경 강조 표시를 변경할 수 있습니다.
![녹색 배경으로 설정된 활성 이름 필드를 가리키는 화살표가 있는 문의 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-53-01.png)
.form-line-active {
background: #ccffcc;
}
양식 필수항목의 별 색상 변경
기본적으로 빨간색이며 아래 코드는 필드의 “필수” 표시를 변경합니다.
![이름 필드 레이블 옆에 있는 파란색 별표를 가리키는 화살표가 있는 연락처 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-55-00.png)
.form-required {
color: cyan !important;
}
양식을 왼쪽으로 정렬
임베드 양식에 유용하며 다음 코드를 사용하여 양식을 왼쪽으로 이동할 수 있습니다.
![화면 왼쪽으로 치우쳐 있는 문의 양식](https://www.jotform.com/blog/wp-content/uploads/2023/06/Monosnap-양식-2023-06-25-22-56-46.png)
.form-all {
margin: 0;
}
양식을 사용자 정의하는 데 도움이 필요하면 언제든지 Jform 지원 에 문의해주세요.
코멘트 보내기: