contact와 관련된 내용은 많은 사이트에서 사용하고 다양항 형식으로 이용할 수 있는 플러그인이기 때문에 지도 부분과 분리해서 내용을 다루려고 합니다.

• Contact Form 7: 기본적인 세팅 작업을 진행
• main.css: CF7의 기본적인 레이아웃을 변경
• Bootstrap Grid: bootstrap grid sort 기능을 통해 레이아웃 순서를 변경

우선 Contact Form 7 에 기본 세팅을 하겠습니다.
플러그인에 기본적인 사용법과 코드 입력 방법이 정리되어 있으니 참고하면서 입력 하시기 바랍니다.

Contact Forms

<div class="row">
  <div class="col-md-12 col-lg-6">
    <div class="form-group">
      [text* your-name id:yourName class:form-control placeholder "Name *"]
    </div>
  </div>
  <div class="col-md-12 col-lg-6">
    <div class="form-group">
      [email* your-email id:yourEmail class:form-control placeholder "E-mail *"]
    </div>
  </div>
  <div class="col-md-12 col-lg-12">
    <div class="form-group">
      [text* your-title id:yourTitle class:form-control placeholder "Sbuject *"]
    </div>
  </div>
  <div class="col-lg-12">
    <div class="form-group">
      [textarea* your-message x5 id:yourMessage class:form-control placeholder "Message *"]
    </div>
  </div>
  <div class="col-lg-12">
    <div class="wpcf7-message"><p>[response]</p></div>
  </div>
  <div class="col-lg-12 text-center">
    <button type="submit" class="zeein-button">SEND MESSAGE</button>
  </div>
</div>

위 같이 내용을 입력하고 제목을 contact 라고 저장을 하면

위와 같이 저장이 되고 Shortcode 부분의 값을 저장해서 index.php 파일에 해당 내용을 붙혀넣기 합니다.

index.php

        <!-- contact -->
        <section id="section_6" class="contact pb-0">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h4 class="under-bar text-center">CONTACT US</h4> 
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-sm-12 col-md-6 order-2 order-sm-2 order-md-1">
                        <?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
                    </div>
                    <div class="col-sm-12 col-md-6 order-1 order-sm-1 order-md-2">
                        <div class="contact-wrap">
                            <figure>
                                <img src="/wp-content/uploads/2017/11/icon-contact-address.svg" alt="address">
                            </figure>
                            <div class="desc">
                                <h6>ADDRESS</h6>
                                <p>Coludfolder 2F, 19-12, Dosan-daero 89-gil, Gangnam-gu, Seoul, Republic of Korea</p>
                            </div>
                        </div>
                        <div class="contact-wrap">
                            <figure>
                                <img src="/wp-content/uploads/2017/11/icon-contact-email.svg" alt="email">
                            </figure>
                            <div class="desc">
                                <h6>E-MAIL</h6>
                                <p>zeein81@gmail.com</p>
                            </div>
                        </div>
                        <div class="contact-wrap">
                            <figure>
                                <img src="/wp-content/uploads/2017/11/icon-contact-phone.svg" alt="phone">
                            </figure>
                            <div class="desc">
                                <h6>PHONE</h6>
                                <p>010-2738-1110</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

221: Contact Form 플러그인에서 자동으로 생성된 Shortcode를 php 파일에서 실행하기 위해서는 <?php echo do_shortcode(‘ Shortcode ‘) ?> 같은 형식으로 저장합니다.
220, 223: order-* 라는 Class가 처음 사용되었습니다. 이는 사이즈에 따라 column 의 순서를 임의로 지정하고자 할때 사용합니다.

main.css

/* wpcf7 : contact form 7 */
input[type="text"],input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, .form-control {
    border: 1px solid #FC9E21;
    font-size: 0.875rem;
    font-weight: 300;
    padding: 0.6rem 1rem;
    border-radius: 20px; }

/* placeholder font style : italic */
::-webkit-input-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.4) !important;  }
::-moz-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.4) !important; }
:-ms-input-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.4) !important; }
:-moz-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.4) !important; }

.form-control.wpcf7-not-valid {
    border-color: #F00; }
span.wpcf7-not-valid-tip {
    display: none; }
.wpcf7-message .wpcf7-response-output {
    font-size: 0.75rem;
    text-align: center;
    margin: 1rem 0;
    padding: 1rem;
    border: none;
    border-top: 1px solid #FFDC71;
    border-bottom: 1px solid #FFDC71; }

사이트에서 제대록 작동이 되는지 테스트 합니다.

테스트 환경이나 서버에 따라 메일이 가지 않는 경우가 많아서 아래와 같이 세팅 해주면 Contact Forms 플러그인에 자동 저장 됩니다.