CSS 코드를 사용하여 양식 사용자화하기

2023년 12월 7일

기본 제공 양식 디자이너 외에도 양식 빌더에서 CSS를 사용하여 양식을 사용자화할 수도 있습니다. 이 가이드에는 양식에서 시도하거나 사용할 수 있는 CSS 코드의 몇 가지 예가 포함되어 있습니다. 양식에 CSS를 적용하려면 사용자 정의 CSS 코드 삽입을 참조하십시오 .

Youtube Embed Poster: v2apY6221Ro

페이지에 배경 이미지 추가

다음 CSS 코드를 사용하면 양식에 대한 사용자 정의 배경 이미지를 추가할 수 있습니다.

바다 배경의 문의하기 양식
.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로 대체하세요.

메모

혼합 콘텐츠 차단을 방지하려면 이미지 URL에 보안 HTTPS 주소를 사용하세요 .

페이지 배경을 투명하게 만들기

임베드 양식에서 유용하며, 웹 페이지의 배경을 사용하기 위해 양식이 필요한 경우 다음 코드를 사용할 수 있습니다.

CSS 코드를 사용하여 양식 사용자화하기 Image-1
.supernova, body {
background: none;
}

양식 배경을 투명하게 만들기

다음 코드는 양식의 배경과 그림자를 제거하여 평평하고 투명하게 만듭니다.

CSS 코드를 사용하여 양식 사용자화하기 Image-2
.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
body, .form-all {
margin-top: 0;
}

머리글 배경색 변경

다음 코드를 사용하여 양식에 있는 모든 머리글 요소의 배경색을 변경합니다.

파란색 배경의 "문의하기" 제목 섹션을 가리키는 화살표가 있는 문의 양식
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

색상 관련 속성의 경우 이 색상 선택기를 사용하여 색상의 16진수 값(예: #a1b2c3)을 생성할 수 있습니다.

부제목 색상 변경

다음 코드는 모든 머리글 요소의 하위 제목의 텍스트 색상을 변경합니다.

녹색 24시간 부제목을 가리키는 화살표가 있는 문의 양식
.form-subHeader {
color: #00b000 !important;
}

모든 하위 레이블 색상 변경

다음 CSS 코드를 사용하여 양식의 모든 하위 레이블 색상을 변경하십시오.

주황색 이름 하위 레이블을 가리키는 화살표가 있는 문의 양식
.form-sub-label {
color: #ffb21d;
}

하이라이트 효과 색상 변경

다음 코드를 사용하여 입력 필드의 배경 강조 표시를 변경할 수 있습니다.

녹색 배경으로 설정된 활성 이름 필드를 가리키는 화살표가 있는 문의 양식
.form-line-active {
background: #ccffcc;
}

양식 필수항목의 별 색상 변경

기본적으로 빨간색이며 아래 코드는 필드의 “필수” 표시를 변경합니다.

이름 필드 레이블 옆에 있는 파란색 별표를 가리키는 화살표가 있는 연락처 양식
.form-required {
color: cyan !important;
}

양식을 왼쪽으로 정렬

임베드 양식에 유용하며 다음 코드를 사용하여 양식을 왼쪽으로 이동할 수 있습니다.

화면 왼쪽으로 치우쳐 있는 문의 양식
.form-all {
margin: 0;
}

양식을 사용자 정의하는 데 도움이 필요하면 언제든지 Jform 지원 에 문의해주세요.

고객지원 문의하기:

저희 고객 지원팀은 주 7일 24시간 동안 언제든지 도와드릴 수 있으며 저희의 평균 반응시간은 1~2 시간입니다.
저희 팀은 다음을 통해 연락될 수 있습니다:

고객지원 게시판: https://www.jotform.com/answers/

Contact Jform Support: https://www.jform.co.kr/contact/

코멘트 보내기:

Jform Avatar
이 사이트는 reCAPTCHA 및 Google 개인정보 보호정책 정책으로 보호되며 이용약관이 적용됩니다.

Podo Comment 제일 먼저 댓글 달아주세요.