컨택트폼 필드사이즈 조절 및 전화번호 란 필드 변경 문의

컨택트폼 스킨의 입력 필드(성함, 연락처)사이즈를 조절하고 싶은데 사용자 정의해서 css를 입력하는 것으로는 적용이 되지 않네요. 스타일css어디를 수정하면 될까요?

또한 전화번호를 입력하는 칸을 하나의 필드가 아닌 010▼- 0000 - 0000 와 같이 세칸의 필드로 나누고, 입력된 정보를 엑셀로 다운로드할 수 있도록 하고 싶습니다.(엑셀시트 한 셀에 전화번호 000-0000-0000로 표시) 가능할까요?

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

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

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

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

     

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

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

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

     

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

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

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

     

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

    고맙습니다.

  • http://iibest.co.kr/ 여기의 맨 아래 링크입니다. 

    그리고 체크박스의 경우 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 코드는

    워드프레스 관리자 -> 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://imgur.com/a/JLEUn8K

  • 라벨을 안 보이게 하고 필드를 한 줄에 2개씩 표시되게 하시려면

    아래의 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/HOulJDB 현재는 이런 상태로 리스트가 출력되는데

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

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

  • 1. 아이프레임으로 보기 기능을 사용하실 경우

    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 플러그인을 사용해서 코드를 추가할 수 있습니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기