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

이전에 웹 양식을 사용한 적이 있다면, 이를 통해 리드를 직접 Freshsales CRM으로 캡처할 수 있는 엄청난 잠재력을 알고 있을 것입니다. 웹 양식을 생성하지 않았다면, 지금이 설정하는 방법을 배울 좋은 기회입니다.

레이아웃을 변경하고 필드를 열로 그룹화하여 웹 양식을 좀 더 창의적으로 사용자 정의하고 싶다면, 이 문서가 필요한 수정을 쉽게 수행할 수 있도록 도와줄 것입니다.

중요:

- 이 문서는 “Freshsales에서 웹 양식을 설정하는 방법?”의 연속입니다. 웹 양식을 사용자 요구에 맞게 사용자 정의하기 전에 설정해야 합니다. 웹 양식을 아직 설정하지 않았다면, 이 지침을 따라 설정하세요.

- 양식의 사용자 정의는 CSS의 몇 가지 필드를 변경하여 수행됩니다. 이러한 지침을 수행하기 위해 CSS를 알 필요는 없지만, 개념에 대한 간단한 복습은 고유한 사용자 정의를 수행하는 데 도움이 될 수 있습니다.

상세 단계:

1. 웹 양식의 자바스크립트 코드가 포함된 웹페이지의 코드베이스로 이동합니다. 이 경우, 우리는 "블로거" 페이지에 웹 양식을 포함했습니다.

2. 편집 옵션을 찾아 HTML로 페이지를 편집하도록 선택합니다.

3. 본문에 포함된 웹 양식 자바스크립트 코드를 찾습니다. 다음과 같이 보입니다:
   
   

4. 이것은 요구 사항에 맞게 변경해야 하는 코드입니다. HTML의 <style> 클래스를 사용하여 변경할 수 있으며, 이는 모든 스타일을 결정합니다. </script> 뒤에 <style> </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>

  
  

  “margin-top: __ px” 및 “margin-bottom: __ px” 값을 변경하여 필드 간의 간격을 결정하고 원하는 값을 설정할 수 있습니다.
  양식이 다음과 같이 나타납니다:
  

이것들은 CSS 코드를 변경하여 웹 양식에서 수행할 수 있는 몇 가지 사용자 정의입니다. 더 고급 사용자 정의를 위해서는 색상, 글꼴 및 스타일과 같은 양식의 다른 측면을 변경하기 위해 전담 HTML 개발자의 지원을 받는 것이 좋습니다.