웹 양식의 UI를 원하는 대로 사용자 정의하는 방법

이전에 웹 양식을 사용해본 적이 있다면, 웹 애플리케이션으로 리드를 직접 캡처하는 데 있어 그 엄청난 잠재력을 알고 있을 것입니다. 웹 양식을 만들어 본 적이 없다면, 지금이 설정 방법을 배우기에 좋은 시기입니다. 레이아웃을 변경하고 필드를 열로 그룹화하여 웹 양식을 좀 더 창의적으로 사용자 정의하고 싶다면, 이 문서는 필요한 수정 작업을 쉽게 수행할 수 있도록 도와줍니다.

중요:

• 이 문서는 "웹 양식 구성 방법"의 연속입니다. 웹 양식을 사용자 요구에 맞게 사용자 정의하기 전에 설정해야 합니다. 아직 웹 양식을 설정하지 않았다면, 다음 지침을 따라 설정하십시오.
• 양식의 사용자 정의는 CSS의 몇 가지 필드를 변경하여 수행됩니다. 이러한 지침을 수행하기 위해 CSS를 알 필요는 없지만, 개념에 대한 간단한 복습은 고유한 사용자 정의를 수행하는 데 도움이 될 수 있습니다.

상세 단계:

1. 웹 양식의 자바스크립트 코드가 포함된 웹페이지의 코드베이스로 이동합니다. 이 경우, 우리는 "블로거" 페이지에 웹 양식을 포함시켰습니다.
2. 편집 옵션을 찾아 HTML로 페이지를 편집하도록 선택합니다.
3. 본문에 포함된 웹 양식 자바스크립트 코드를 찾습니다. 이는 다음과 같이 보입니다:
4. 이것이 귀하의 사양에 맞게 변경해야 할 코드입니다. HTML에서 모든 스타일을 결정하는 <style> 클래스를 사용하여 변경할 수 있습니다. </script> 뒤에 <style> 클래스를 추가하면 양식의 스타일을 조정할 수 있습니다.
5. 웹 양식 스크립트 뒤에 링크를 포함하고 변경 사항이 적용되도록 페이지를 업데이트합니다.

다양한 사용자 정의를 수행하는 방법은 다음과 같습니다:

양식 컨테이너 너비 늘리기:

다음 스크립트를 포함하여 필드를 더 넓게 만드십시오:

<style type="text/css">
.fserv-container 
{
max-width: 1000px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style>

양식이 다음과 같이 나타납니다:

양식에 수평 레이아웃 제공:

이 스크립트는 세로로 배치된 양식 필드를 가로로 변환합니다. 이는 페이지 하단에 양식을 포함할 때 차지하는 공간을 줄이는 데 도움이 됩니다:

<style type="text/css"> 
.fserv-container {
max-width: 100%;
}
.fserv-container .fserv-form {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fserv-container .fserv-form .fserv-field+.fserv-field {
margin-top: 5px;
}
.fserv-container .fserv-form .fserv-field {
max-width: 25%;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) { 
border-top: 0;
width: 100%;
display: block;
text-align: center;
}
</style>

양식이 다음과 같이 나타납니다:

필드를 열로 그룹화하기:

이 스크립트는 필드를 2개 또는 3개의 열로 그룹화할 수 있게 해줍니다. 이는 웹 페이지의 길이를 줄이고 스크롤할 필요성을 없애는 데 도움이 됩니다. 웹 양식 스크립트 뒤에 링크를 포함하고 변경 사항이 적용되도록 페이지를 업데이트합니다.

2열의 경우:

<style type="text/css">
.fserv-container .fserv-form 
{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden)
{
margin-top: 0px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style>

양식이 다음과 같이 나타납니다:

3열의 경우:

<style type="text/css">
.fserv-container .fserv-form 
{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden){
margin-top: 0px;
}
.fserv-container .fserv-form .fserv-field {
max-width: 33.33%;
}
.fserv-container .fserv-form .fserv-field:nth-child(-n+3):not(.fserv-hidden)
{
margin-top: 0px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) 
{
display: block;
width: 100%;
text-align: center;
}
</style>

양식이 다음과 같이 나타납니다:

제출 버튼 위의 테두리 제거:

"제출" 버튼 위에 나타나는 테두리를 제거하려면 다음 스크립트를 포함하십시오:

<style type="text/css">
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) 
{ 
border-top: 0;
}
</style>

양식이 다음과 같이 나타납니다:

필드 간의 여백 공간 변경:

다른 필드 간의 공간을 늘리거나 줄이고 싶다면, </script> 뒤에 다음 코드를 붙여 넣고 여백 값을 요구 사항에 맞게 설정하십시오.

<style type="text/css">
.fserv-container .fserv-form > .fserv-field + .fserv-field,
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) 
{
margin-top: 30px;
margin-bottom:30px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style>