간단한 WordPress 연락처 폼 플러그인 구축

대부분의 사이트는 일반적으로 표준에 부합되는 인터넷 실천으로 설계되는데, 그 중에는 전문적인 페이지를 포함하고, 그 중에는 연락처 리스트가 있다.
이것은 방문자에게 사이트 소유자와 연락하는 간단한 방식을 제공했다.
간단하게 말하면 연락처 양식에는 방문객이 작성한 문제와 필드가 포함되어 있다.
정보는 일반적으로 전자 우편을 통해 사이트 관리자나 다른 지정된 전자 우편 계정에 자동으로 발송된다.
주의해야 할 것은 이 전자메일 주소는 방문자에게 표시되지 않기 때문에 연락처 리스트를 사용하면 로봇이 인터넷에서 누드 전자메일 주소를 받을 때 보내는 스팸메일을 줄일 수 있다.
연락표는 사이트에서 매우 중요한 역할을 하는데 사용자의 피드백, 문의와 기타 데이터를 수집하는 데 쓰인다.
만약 당신의 사이트가WordPress에서 지원한다면, 많은 플러그인들이 당신의 사이트의 연락처 리스트를 빈틈없이 집적할 수 있습니다.
본문에서, 나는 무료WordPress 연락처 폼 플러그인의 목록을 제공할 것이다.
나는 또 왜 당신이 자신의 연락처를 굴려야 하는지를 토론할 것이다.
그리고, 나는 당신에게 자신의 WordPress 연락처 폼 플러그인을 구축하는 방법을 보여 주는 간단한 강좌를 제공할 것입니다.

WordPress 연락처 양식 플러그인


시작하기 전에, WordPress 플러그인 디렉터리에서 유행하는 무료 연락처 폼 플러그인을 찾아보겠습니다.
이것들은 매우 유용하지만, 당신이 자신의 플러그인을 구축하기 시작할 때, 그것들을 배우는 것이 더욱 좋을 것이다.
다음은 WordPress에서 가장 좋은 무료 연락처 양식 플러그인입니다.
  • 연락처 7:
    이것은 두 번째로 가장 인기 있는 플러그인으로 다운로드량이 1800만 번을 넘어서WordPress 사이트의 사실상 연락처 폼 플러그인으로 거의 여겨질 수 있다.
    연락처 폼 7은 여러 개의 연락처 폼을 관리할 수 있으며 사용자 정의 폼과 이메일 내용을 간단하게 표시할 수 있습니다.
    양식 기능에는 Ajax가 지원하는 제출, 인증번호, Akismet 스팸 필터 등이 포함됩니다.
  • e-메일로 연락처:
    이 플러그인은 연락처 폼을 만들고 지정한 이메일 주소로 데이터를 보낼 뿐만 아니라 연락처 폼 데이터를 데이터베이스에 저장하여 인쇄 가능한 보고서와 선택한 데이터를 CSV/Excel 파일로 내보내는 옵션을 제공합니다.
  • FormGet 연락처:
    간단한 온라인 드래그 연락처 폼 생성기 도구
    당신이 해야 할 일은 폼에서 원하는 필드를 클릭하는 것입니다. 몇 초 안에 연락처 폼이 준비됩니다.
  • Bestwebsoft 연락처:
    웹 페이지나 게시물에 대한 피드백 폼을 쉽게 실현할 수 있습니다.
    이것은 아주 간단하다. 설령 쓸만한 발휘가 있다 하더라도, 너는 어떠한 추가 설정도 필요 없다.
  • 왜 자신의 연락처 폼 플러그인을 내놓습니까?


    더 나은 개발자가 되다


    자신의WordPress 플러그인을 개발하면WordPress가 어떻게 막후에서 일을 하는지 이해할 수 있고, 이것은 당신이 더욱 경험이 있는 웹 개발자가 되는 데 도움을 줄 수 있다.
    WordPress Plugin Directory 수만 개의 플러그인을 사용할 수 있지만 다른 플러그인을 수정하고 확장할 수 있는 것은 매우 유용한 기술이다.

    더 나은 형식을 세우다


    많은 WordPress 연락처 폼 플러그인이 비대합니다.
    그것들은 당신이 영원히 사용하지 못할 수 있는 많은 기능을 포함한다.
    일부 표준 연락처 양식 플러그인에서는 JavaScript와 CSS 파일을 많이 사용하는 것도 흔합니다.
    이것은 HTTP 요청의 수를 증가시켜 WordPress의 성능에 불리한 영향을 미칠 수 있습니다.

    80% of the end-user response time is spent on the front-end.

    Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.

    Reducing the number of components in turn reduces the number of HTTP requests required to render the page.

    This is the key to faster pages.
    – According to Yahoo’s performance rules


    만약 나와 같고 간단한 연락처 플러그인을 원한다면 계속 읽어 주십시오.
    나는 너에게 자신의 플러그인을 개발하는 간단한 과정을 지도할 것이다. 그러면 너는 비대한 플러그인과 작별할 수 있을 것이다.
    이 예에서는 추가 CSS 및 JavaScript 파일이 필요하지 않으며 HTML5를 사용하여 유효성을 검사합니다.

    양식 플러그인 개발 문의


    5분 안에 당신은 간단한 WordPress 연락처를 어떻게 개발하는지 배울 것입니다. 이것은 약속입니다!
    준비됐나요?설정가자!
    모든 WordPress plugins는 PHP 파일이며 /wp-content/plugins/ 디렉토리에 있습니다.
    우리의 예시에서, 이 파일은 호출될 것이다. formtact.php나는 당신이 FTP/SFTP/SCP 또는 SSH를 사용하여 서버에 연결할 수 있다고 가정합니다.
    계속하려면 formtact라는 파일을 만듭니다.php (마지막 완전한 예는 본문 말미에 제공됩니다):
    <?php
    /*
    Plugin Name: FormTact
    Plugin URI: https://sysa.ml/build-simple-wordpress-contact-form-plugin/
    Description: Simple non-bloated WordPress Contact Form
    Version: 1.0
    Author: shoaiyb sysa
    Author URI: https://sysa.ml
    */
        //
        // the plugin code will go here..
        //
    ?>
    
    
    다음으로 연락처 양식 HTML이 포함된 function formtact_html()를 추가합니다.
    function formtact_html() {
        echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
        echo '<p>';
        echo 'Your Name (required) <br />';
        echo '<input type="text" name="ft-name" pattern="[a-zA-Z0-9]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
        echo '</p>';
        echo '<p>';
        echo 'Your Email (required) <br />';
        echo '<input type="email" name="ft-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
        echo '</p>';
        echo '<p>';
        echo 'Subject (required) <br />';
        echo '<input type="text" name="ft-subject" pattern="[a-zA-Z]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
        echo '</p>';
        echo '<p>';
        echo 'Your Message (required) <br />';
        echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
        echo '</p>';
        echo '<p><input type="submit" name="ft-submit" value="Send"/></p>';
        echo '</form>';
    }
    
    
    기본 검증은 패턴을 통해 속성을 입력하여 폼에 추가합니다.
    연락처 양식의 정규 표현식은 다음 필드 유효성 검사를 수행합니다.
  • a-zA-Z0-9: 명칭 필드에는 자모, 빈칸과 숫자만 사용할 수 있습니다.특수 기호는 유효하지 않은 것으로 간주됩니다.
  • a-zA-Z: 주제 필드에는 문자와 공백만 사용할 수 있습니다.

  • email 폼 컨트롤러가 전자메일 필드를 검증하기 때문에 모드 속성이 필요하지 않습니다.

    빨리!


    네, 우리 몇 분 남았어요?4분!우리는 아직 이 일을 끝낼 시간이 있다.function deliver_mail() 폼 데이터를 정리하고WordPress 관리자의 이메일 주소로 메일을 보냅니다.
    function deliver_mail() {
    
        // if the submit button is clicked, send the email
        if ( isset( $_POST['ft-submit'] ) ) {
    
            // sanitize form values
            $name = sanitize_text_field( $_POST["ft-name"] );
            $email = sanitize_email( $_POST["ft-email"] );
            $subject = sanitize_text_field( $_POST["ft-subject"] );
            $message = esc_textarea( $_POST["ft-message"] );
    
            // get the blog administrator's email address
            $to = get_option( 'admin_email' );
    
            $headers = "From: $name <$email>" . "\r\n";
    
            // If email has been process for sending, display a success message
            if ( wp_mail( $to, $subject, $message, $headers ) ) {
                echo '<div>';
                echo '<p>Thanks for contacting me, expect a response soon.</p>';
                echo '</div>';
            } else {
                echo 'An unexpected error occurred';
            }
        }
    }
    
    
    양식 데이터 정리는 다음 WordPress 내부 함수로 수행됩니다.
  • sanitize_text_field(): 사용자가 입력한 데이터를 정리합니다.
  • sanitize_email(): e-메일에서 허용되지 않는 모든 문자를 삭제합니다.
  • esc_textarea(): 이스케이프 메시지 텍스트 영역 값.
  • 코드get_option( 'admin_email' )는 프로그래밍 방식으로 전자 우편으로 보내는 데이터베이스에서WordPress 관리자의 전자 우편 주소를 검색한다.
    관리자에게 메일을 보내는 것을 원하지 않습니까?변수$to를 원하는 이메일 주소로 설정하기만 하면 됩니다.
    만약 function wp_mail() 전자메일을 성공적으로 처리하고 아무런 오류가 없다면, "연락 주셔서 감사합니다. 가능한 한 빨리 회답해 주십시오"라는 텍스트가 표시됩니다. 그렇지 않으면 의외의 오류가 표시됩니다.

    1분 30초 남았습니다.

    function ft_shortcode()는 연락처 폼 단축번호 [formtact]가 활성화될 때 호출되는 리셋 함수입니다.
    function ft_shortcode() {
        ob_start();
        deliver_mail();
        formtact_html();
    
        return ob_get_clean();
    }
    
    
    상기 함수는 각각 formtact_html()deliver_mail() 함수를 호출하여 연락처 폼 HTML 폼과 검증 폼 데이터를 표시한다.
    마지막으로 짧은 코드 [formtact]는WordPress에 등록됩니다.그래서 간단하게 덧붙인다.
    add_shortcode( 'formtact', 'ft_shortcode' );
    
    

    3, 2, 1... 땡!


    축하합니다. 우리는 이미 자신의WordPress 연락처 폼 플러그인을 성공적으로 개발했습니다. 나는 이미 나의 이전의 약속을 실현했습니다.
    현재 웹 사이트에서 이 플러그인을 사용하려면WordPress 계기판의 '플러그인' 부분에서 이 플러그인을 활성화한 다음 게시물이나 페이지를 만들고, 원하는 폼에 단축 코드 [formtact]를 추가하십시오.
    페이지를 미리 보면 다음과 같은 연락처를 볼 수 있습니다.

    결론


    플러그인이 어떻게 구축되었는지, 그리고 WordPress 사이트에서 이를 어떻게 실현하는지 알아보기 위해 아래의 코드를 복사하여 파일에 붙여넣고 /wp-content/plugins/ 디렉터리에 업로드하십시오.
    다음은 전체 플러그 인의 예입니다.
    <?php
    /*
    Plugin Name: FormTact
    Plugin URI: https://sysa.ml/build-simple-wordpress-contact-form-plugin/
    Description: Simple non-bloated WordPress Contact Form
    Version: 1.0
    Author: shoaiyb sysa
    Author URI: https://sysa.ml
    */
    
    function formtact_html() {
        echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
        echo '<p>';
        echo 'Your Name (required) <br/>';
        echo '<input type="text" name="ft-name" pattern="[a-zA-Z0-9]+" value="' . ( isset( $_POST["ft-name"] ) ? esc_attr( $_POST["ft-name"] ) : '' ) . '" size="40" />';
        echo '</p>';
        echo '<p>';
        echo 'Your Email (required) <br/>';
        echo '<input type="email" name="ft-email" value="' . ( isset( $_POST["ft-email"] ) ? esc_attr( $_POST["ft-email"] ) : '' ) . '" size="40" />';
        echo '</p>';
        echo '<p>';
        echo 'Subject (required) <br/>';
        echo '<input type="text" name="ft-subject" pattern="[a-zA-Z]+" value="' . ( isset( $_POST["ft-subject"] ) ? esc_attr( $_POST["ft-subject"] ) : '' ) . '" size="40" />';
        echo '</p>';
        echo '<p>';
        echo 'Your Message (required) <br/>';
        echo '<textarea rows="10" cols="35" name="ft-message">' . ( isset( $_POST["ft-message"] ) ? esc_attr( $_POST["ft-message"] ) : '' ) . '</textarea>';
        echo '</p>';
        echo '<p><input type="submit" name="ft-submit" value="Send"></p>';
        echo '</form>';
    }
    
    function deliver_mail() {
    
        // if the submit button is clicked, send the email
        if ( isset( $_POST['ft-submit'] ) ) {
    
            // sanitize form values
            $name = sanitize_text_field( $_POST["ft-name"] );
            $email = sanitize_email( $_POST["ft-email"] );
            $subject = sanitize_text_field( $_POST["ft-subject"] );
            $message = esc_textarea( $_POST["ft-message"] );
    
            // get the blog administrator's email address
            $to = get_option( 'admin_email' );
    
            $headers = "From: $name <$email>" . "\r\n";
    
            // If email has been process for sending, display a success message
            if ( wp_mail( $to, $subject, $message, $headers ) ) {
                echo '<div>';
                echo '<p>Thanks for contacting me, expect a response soon.</p>';
                echo '</div>';
            } else {
                echo 'An unexpected error occurred';
            }
        }
    }
    
    function ft_shortcode() {
        ob_start();
        deliver_mail();
        html_form_code();
    
        return ob_get_clean();
    }
    
    add_shortcode( 'formtact', 'ft_shortcode' );
    
    ?>
    
    
    평론에서 너의 생각과 문제를 나에게 말해라.

    좋은 웹페이지 즐겨찾기