CSS 코드는 사용자 정의하기 쪽이 아닌

KBoard 대시보드 페이지에서 커스텀 CSS 입력 필드에 코드를 추가해주셔야 합니다.

2. 필드와 필드 사이 간격은 margin 속성을 이용해보시겠어요?

자세한 내용은 아래의 링크를 참고해보세요.

https://www.w3schools.com/css/css_margin.asp

3. KBoard 입력 필드는 보안 문제로 인해 필드명 표시할 때 이스케이프 처리를 하고 있습니다.

필드명에 HTML 태그가 적용될 수 있게 하시려면

아래의 코드를 활용해보시겠어요?

add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20200706', 10, 4);
function kboard_get_template_field_html_20200706($html, $field, $content, $board){
	if($board->id == '1'){ // 실제 게시판 id로 적용해주세요.
		$fields = $board->fields();
		$meta_key = isset($field['meta_key']) ? esc_attr($field['meta_key']) : '';
		$field_type = isset($field['field_type']) ? $field['field_type'] : '';
		$required = isset($field['required']) ? 'required' : '';
		$field_name = isset($field['field_name'])&&$field['field_name'] ? esc_attr($field['field_name']) : esc_attr($field['field_label']);
		$default_value = isset($field['default_value']) ? esc_attr($field['default_value']) : '';
		
		if($field_type == 'checkbox'){
			ob_start();
			?>
			<?php if(isset($field['row']) && $field['row']):?>
			<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> meta-key-<?php echo esc_attr($meta_key)?> <?php echo esc_attr($required)?>">
				<label class="attr-name" for="<?php echo esc_attr($meta_key)?>"><span class="field-name"><?php echo esc_html($field_name)?></span><?php if($required):?> <span class="attr-required-text">*</span><?php endif?></label>
				<div class="attr-value">
					<input type="hidden" name="<?php echo esc_attr($fields->getOptionFieldName($meta_key))?>" value="">
					<?php foreach($field['row'] as $option_key=>$option_value):?>
						<?php if(isset($option_value['label']) && $option_value['label']):?>
							<?php if($content->option->{$meta_key}):?>
								<label class="attr-value-label"><input type="checkbox" name="<?php echo esc_attr($fields->getOptionFieldName($meta_key))?>[]"class="<?php echo esc_attr($required)?>"<?php if($fields->isSavedOption($content->option->{$meta_key}, $option_value['label'])):?> checked<?php endif?> value="<?php echo esc_attr($option_value['label'])?>"> <?php echo $option_value['label']?></label>
							<?php else:?>
								<label class="attr-value-label"><input type="checkbox" name="<?php echo esc_attr($fields->getOptionFieldName($meta_key))?>[]"class="<?php echo esc_attr($required)?>"<?php if($default_value && in_array($option_value['label'], $default_value)):?> checked<?php endif?> value="<?php echo esc_attr($option_value['label'])?>"> <?php echo $option_value['label']?></label>
							<?php endif?>
						<?php endif?>
					<?php endforeach?>
					<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
				</div>
			</div>
			<?php endif?>
			<?php
			$html = ob_get_clean();
		}
	}
		
	return $html;
}

위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주세요.

테마의 functions.php 파일에 코드를 추가하거나 Code Snippets 플러그인을 사용해서 코드를 추가할 수 있습니다.

고맙습니다.

사용자 정의로 추가하는 경우 사이즈조정이 되지 않는듯 하네요...

필드와 필드 사이의 간격 수정 및 체크박스텍스트를 이미지로 표시하려면 어떻게 해야 하나요?

아래의 CSS 코드를 활용해보세요.

#kboard-contact-form-editor .kboard-attr-row { width: 50%; }
#kboard-contact-form-editor .kboard-attr-row .attr-name { display: none; }

크롬 브라우저 개발자 도구(F12)를 활용하시면

CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.

고맙습니다.

아이프레임을 해제했더니 필드 세로길이가 너무 길어지는데 스타일시트를 수정해야 할까요?

혹시 이런식으로 필드를 수정하려면 어디를 고쳐야 할까요?

https://imgur.com/a/JLEUn8K

아이프레임으로 보기가 적용되어 있는 듯합니다.

특별한 이유가 있어서 적용하신 건지요?

아이프레임으로 보기 적용 시 CSS 코드는

워드프레스 관리자 -> KBoard -> 대시보드 페이지에서 커스텀 CSS 입력 필드에 추가해보시겠어요?

아래의 코드처럼 추가해보세요.

#kboard-contact-form-editor .kboard-attr-row.kboard-attr-author input { width: 300px !important; }
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-title input { width: 300px !important; }

위의 코드에서 픽셀 크기는 적절히 조절해보세요.

KBoard 입력 필드 기능으로 체크박스를 추가하시면

필수 설정을 하실 수 있습니다.

https://imgur.com/a/5kRrPFx

고맙습니다.

그리고 체크박스의 경우 https://wallel.com/kboard-%ec%b2%b4%ed%81%ac%eb%b0%95%ec%8a%a4-%ed%95%84%ec%88%98%eb%a1%9c-%ec%84%a0%ed%83%9d%ed%95%98%ea%b2%8c-%ed%95%98%ea%b8%b0/ 여기를 참조하여 script에 

	if ( ! jQuery('input[name="kboard_option_checkbox"]:checked').val() ) {
    alert('체크박스에 체크해주세요.');
    jQuery('input[name="kboard_option_checkbox"]').focus();
    return false;
}
	

를 추가했는데 딱히 변경이 되지 않네요. 어떻게 해야 할까요?

일단 필드 사이즈만이라도 조절하고 싶습니다.

성함, 연락처 필드는 별도로 추가하신 건지요?

CSS 코드 수정 관련해서는 저희가 페이지를 봐야 도움을 드릴 수 있을 듯합니다.

비회원으로도 확인 가능한 페이지 주소 알려주시겠어요?

연락처 필드를 말씀하신 것처럼 3칸의 필드로 나누시려면 커스텀이 필요합니다.

아래 링크를 참고해보시겠어요?

KBoard(케이보드) 게시판에 새로운 필드 추가하기

엑셀 다운로드의 경우 KBoard 플러그인에 대량관리 기능을 지원하고 있습니다.

워드프레스 관리자 -> KBoard -> 게시판 목록 -> 게시판 선택 -> 대량관리 탭에서

CSV 파일을 다운로드하실 수 있습니다.

원하시는 데이터 형태로 표시되게 하시려면 직접 코드를 작성해주셔야 합니다.

고맙습니다.