[그누보드] 연락처 or 이메일주소 입력란 인풋 분할/필드 하나에 넣기

#그누보드 #연락처input분할 #이메일input분할 #한필드에넣기

 

 

 

견적문의 폼을 제작중에 이메일, 연락처 input이 다 나뉘어져 있어 구글링 중 찾아서 적용한 정보입니다.

 

견적문의같은 사용자만 글쓰기를 작성하고 수정이 없을거라 판단되는 경우 게시판 글쓰기 화면에서 퍼블리싱 하는 것 보단 서브페이지에 따로 작성하는 것이 퍼블리싱 하기에는 더 편리한 것 같습니다.

 

글쓰기 화면에서는 name, value, 상단 explode만 잘 해주시면 작동합니다.

 

이메일 전송 시에도 합쳐진 이메일주소, 연락처로 발송 됩니다.

 

 

HTML

<?php $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http'; $domain = $_SERVER['SERVER_NAME']; // www가 있을 경우 제외 if (substr($domain, 0, 4) === 'www.') { $domain = substr($domain, 4); } $currentDomain = $domain; ?>

  <form id="contact" name="fwrite" action="<?php echo G5_BBS_URL ?>/write_update.php" method="post"autocomplete="off" onsubmit="return chk_fun(this);" enctype="multipart/form-data" class="frm-wrap">
<input type="hidden" name="uid" value="<?php echo get_uniqid(); ?>">
<input type="hidden" name="w" value="<?php echo $w ?>">
<input type="hidden" name="bo_table" value="inquiry">
<input type="hidden" value="html1" name="html">
<input type="hidden" name="wr_email" value="admin@<?=($currentDomain)?>">
<input type="hidden" name="ret" value="<?=($_SERVER['REQUEST_URI'])?>">
    <div class="frm-ipt-box">
      <div class="frm-ipt-line">
        <h3 class="ipt-tit frm-required">
          <span>
            연락처
          </span>
        </h3>
        <div class="ipt-smallbox tel-line">
          <select name="hp[0]" id="wr_1_1" class="n-ipt" required>
            <option value="010" selected>010</option>
            <option value="011">011</option>
            <option value="016">016</option>
            <option value="017">017</option>
            <option value="018">018</option>
            <option value="019">019</option>
          </select>
          <span>-</span>
          <input type="text" name="hp[1]" class="n-ipt" maxlength="4">
          <span>-</span>
          <input type="text" name="hp[2]" class="n-ipt" maxlength="4">
        </div>
      </div>
    </div>

    <div class="frm-ipt-box frm-email-ipt-box">
      <div class="frm-ipt-line">
        <h3 class="ipt-tit frm-required">
          <span>이메일</span>
        </h3>
        <div class="ipt-smallbox email-line">
          <div class="front">
            <input type="text" name="email[0]" class="n-ipt" required maxlength="30">
            <span>@</span>
          </div>
          <div class="back" id="email_back">
            <select name="email[1]" id="email_1" required class="n-ipt">
              <option value="naver.com">naver.com</option>
              <option value="hanmail.net">hanmail.net</option>
              <option value="hotmail.com">hotmail.com</option>
              <option value="nate.com">nate.com</option>
              <option value="yahoo.co.kr">yahoo.co.kr</option>
              <option value="empas.com">empas.com</option>
              <option value="dreamwiz.com">dreamwiz.com</option>
              <option value="freechal.com">freechal.com</option>
              <option value="lycos.co.kr">lycos.co.kr</option>
              <option value="korea.com">korea.com</option>
              <option value="gmail.com">gmail.com</option>
              <option value="hanmir.com">hanmir.com</option>
              <option value="paran.com">paran.com</option>
              <option value="text">직접입력</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="submit-box">
      <button type='submit' class='frm-submitbtn'>등록</button>
    </div>
  </form>

 

 

write_update.head.skin.php

<?php 
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

// 전화번호
$wr_1 = "$hp[0]-$hp[1]-$hp[2]";
// 이메일
$wr_2 = "$email[0]@$email[1]";

?>

 

 

CSS

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 600px;
}
form{
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 30px;
  border: 1px solid #f1f1f1;
}
.frm-ipt-box{
  margin-bottom: 20px;
}
.frm-ipt-box .frm-ipt-line{
  display: flex;
  align-items: center;
  gap: 12px;
}
.frm-ipt-box .ipt-tit{
  width: 120px;
  position: relative;
}
.frm-ipt-box .ipt-tit > span{
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.8px;
  color: rgb(0, 0, 0);
  position: relative;
  display: inline-block;
}
.frm-required span::after{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: rgb(230, 0, 18);
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: -8px;
}
.frm-ipt-box .ipt-smallbox{
  width: calc(100% - 132px);
}

.frm-ipt-box .ipt-smallbox.tel-line{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}
.frm-ipt-box .ipt-smallbox.tel-line > span{
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.8px;
  color: rgb(0, 0, 0);
}
.frm-ipt-box .ipt-smallbox.tel-line > .n-ipt{
  width: 196px;
}
.frm-ipt-box .ipt-smallbox.email-line{
  display: flex;
  gap: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.frm-ipt-box .ipt-smallbox.email-line .front{
  width: 430px;
  position: relative;
}
.frm-ipt-box .ipt-smallbox.email-line .front .n-ipt{
  padding-right: 90px;
}
.frm-ipt-box .ipt-smallbox.email-line .front span{
  position: absolute;
  top: 50%;
  right: 62px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.8px;
  color: rgb(143, 143, 143);
}
.frm-ipt-box .ipt-smallbox.email-line .back{
  display: flex;
  align-items: center;
  gap: 10px;
}
.frm-ipt-box .ipt-smallbox.email-line .back .n-ipt{
  width: 219px;
}

.n-ipt{
  width: 100%;
  background-color: rgb(248, 248, 248);
  outline: none;
  border: none;
  padding: 23px 37px;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.8px;
  text-align: left;
  color: rgb(0, 0, 0);
}

.submit-box button{
  display: block;
  width: 300px;
  font-size: 24px;
  font-weight: bold;
  border: 1px solid #ccc;
  text-align: center;
  border-radius: 5px;
  padding: 12px 0;
  margin: 0 auto;
  margin-top: 50px;
}

 

 

Write value 출력

write.skin.php 상단

$hp = explode("-",$write['wr_1']); 추가

 

따로 출력

<?php echo $hp[0]; ?> - <?php echo $hp[1]; ?> - <?php echo $hp[2] ?>

 

 

list, view 출력

<?php echo $view['wr_1]; ?>
<?php echo $list[$i]['wr_1']; ?>

 

 

 

출처 : https://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=32

배열을 사용해서 여분필드 한 개로 연락처 입력란 3등분하기 - 게시판스킨강좌, 그누보드5강좌