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 플러그인에 자동 저장 됩니다.