플러그인 없이 WordPress에서 양식을 만드는 방법

게시 됨: 2023-07-25

플러그인을 사용하지 않고 WordPress에서 양식을 만들고 싶습니까? 양식은 웹 사이트에서 가장 중요하고 사용되는 요소 중 하나이며 플러그인을 사용하지 않고 만들면 여러 가지 이점이 있습니다.

플러그인 없이 WordPress에서 양식을 만드는 이유

양식을 만드는 데 사용할 수 있는 WordPress 양식 플러그인이 많이 있습니다. 그러나 플러그인을 사용하지 않고 WordPress에서 양식을 만드는 것은 다음과 같은 여러 가지 이유로 유익할 수 있습니다.

단순성과 경량성: 플러그인 없이 양식을 만들 때 플러그인 설치 및 유지 관리와 함께 제공되는 추가 오버헤드를 피할 수 있습니다. 사용자 지정 코드로 만든 간단한 양식은 플러그인을 사용하여 만든 것보다 더 가볍고 효율적일 수 있습니다.
사용자 지정: 처음부터 양식을 작성하면 디자인과 기능을 완벽하게 제어할 수 있습니다. 웹 사이트의 특정 요구 사항에 맞게 양식을 조정하고 그에 따라 사용자 정의할 수 있습니다.
학습 경험: 플러그인 없이 양식을 작성하는 것은 코딩 기술 향상에 관심이 있는 개발자 또는 사용자에게 훌륭한 학습 경험이 될 수 있습니다. 양식 처리 및 데이터 처리의 기본 메커니즘을 이해하게 됩니다.
종속성 감소: 플러그인에 의존하지 않음으로써 외부 코드에 대한 웹 사이트의 의존도를 줄입니다. 여러 플러그인을 사용하여 발생하는 잠재적인 보안 위험이나 충돌을 최소화하려는 경우에 유용할 수 있습니다.
성능: 사용자 지정 코딩 양식은 플러그인에 비해 가볍기 때문에 웹 사이트에 더 나은 성능과 속도를 제공할 수 있습니다. 이러한 사용자 지정 양식에는 필요한 기능만 포함되어 있으며 사용할 수 없는 플러그인에서 제공하는 추가 기능은 없습니다.
유연성: 사용자 정의 양식은 웹 사이트 또는 사용자 정의 게시물 유형의 다른 부분과 통합하기 위한 더 큰 유연성을 제공합니다. 고유한 요구 사항에 따라 양식의 기능을 확장할 수 있습니다.
물론 대부분의 플러그인은 단축 코드를 사용하여 유사한 옵션을 제공합니다. 그러나 사용자 지정 코딩 양식을 사용하면 원하는 표시 방법에 따라 웹 사이트의 특정 위치에 양식을 추가할 수 있습니다.

플러그인 없이 WordPress에서 양식을 만드는 방법

플러그인을 사용하지 않고 WordPress에서 만들 수 있는 많은 유형의 양식이 있습니다. 그러나 연락처 양식은 가장 필수적이고 대중적인 것 중 하나입니다. 따라서 이 자습서에서는 연락처 양식을 만드는 방법을 보여 드리겠습니다.

시작하기 전에 HTML 및 PHP와 같은 스크립팅 언어와 마크업 언어를 사용할 것이므로 프로그래밍에 대한 기본적인 이해가 있기를 바랍니다. 필요한 지식이 없는 경우 프로그래머의 도움을 받아 양식을 만드는 것이 좋습니다.

WordPress에서 연락처 양식을 만들려면 먼저 연락처 페이지를 만들어야 합니다. 그래서 그것부터 시작합시다.

1) 양식 페이지 만들기

WordPress 대시보드에서 페이지 > 새로 추가 로 이동합니다.

이렇게 하면 실제 연락처 양식과 별도로 페이지 제목과 추가로 필요한 설명을 입력할 수 있는 페이지 편집기가 열립니다. 그러나 양식이 이 페이지에서 필요한 유일한 항목인 경우 계속해서 양식을 직접 만들 수 있습니다.

2) Editor에서 Form에 대한 HTML 코드 추가

 이제 화면 왼쪽 상단에서 옵션(세로 점 3개) > 코드 편집기를 클릭하여 코드 편집기로 이동합니다. 그런 다음 편집기에서 양식에 대한 HTML 코드를 추가하십시오. 다음 코드를 기반으로 필요한 필수 양식 필드를 추가할 수 있습니다. 
<양식 방법="포스트">
  <label for="name">이름:</label>
<입력 유형="텍스트" 이름="이름" 필수="">

<label for="email">이메일:</label>
<입력 유형="이메일" 이름="이메일" 필수="">

<label for="message">메시지:</label>
<textarea name="message" required=""></textarea>

<입력 유형="제출" 값="제출">
</form>

이 코드는 WordPress에서 간단한 연락처 양식을 만드는 데 도움이 됩니다. 그러나 쉽게 수정하여 WordPress 웹 사이트에서 원하는 양식을 만들 수 있습니다.

필요한 모든 양식 필드를 코드에 추가한 후 게시 또는 업데이트를 클릭하여 연락처 페이지에 변경 사항을 저장하십시오.

html 코드는 wordpress에서 양식을 만듭니다.

페이지를 미리 보면 방금 만든 양식을 볼 수 있습니다. 그러나 양식을 작동시키고 양식에서 데이터를 추출하려면 양식 제출도 처리해야 합니다. 따라서 이후 양식 제출을 위한 데이터베이스를 만들어야 합니다.

양식 미리보기 페이지 WordPress에서 양식 만들기

3) 양식 제출을 위한 데이터베이스 테이블 생성

양식 제출을 위한 데이터베이스를 생성하려면 phpMyAdmin과 같은 데이터베이스 관리 도구를 사용할 수 있습니다. cPanel에 로그인하여 액세스할 수 있습니다. 필요한 자격 증명이 없는 경우 호스팅 서비스나 사이트 소유자에게 문의하는 것이 좋습니다.

이제 데이터베이스 섹션까지 아래로 스크롤하고 phpMyAdmin을 클릭합니다. 그러면 모든 웹 사이트의 데이터베이스를 볼 수 있는 phpMyAdmin 대시보드가 열립니다.

웹 사이트 데이터베이스의 테이블을 확장하고 새 데이터베이스 테이블을 만들 수 있는 페이지 하단으로 스크롤합니다. 여기에 테이블 이름을 " wp_contact_form_submission "으로 입력하고 Go를 클릭하여 새 테이블을 생성합니다.

그런 다음 테이블의 열과 해당 유형에 양식 필드에 대한 데이터 필드를 입력해야 합니다. 방금 만든 양식에 따라 다음 열 이름과 유형을 추가합니다.

이름: 텍스트
이메일: 텍스트
메시지: TEXT
submit_time: DATETIME

마지막으로저장을 클릭하여 데이터베이스 테이블의 변경 사항을 저장합니다.

우리가 만든 연락처 양식을 기반으로 데이터베이스 테이블의 이름을 지정했습니다. 따라서 처음에 만든 양식에 따라 테이블 이름을 변경할 수 있습니다. 마찬가지로 양식에서 다른 양식 필드를 사용한 경우 그에 따라 열을 추가할 수 있습니다.

4) 양식 제출을 처리하는 코드 추가

데이터베이스를 생성한 후에도 웹 사이트의 테마 기능 파일에서 양식 제출을 처리하기 위한 일련의 코드를 추가해야 합니다.

그러나 웹 사이트의 핵심 파일 중 일부를 편집할 것이므로 계속하기 전에 웹 사이트를 백업하는 것이 좋습니다. 그리고 의도하지 않은 변경으로 인해 웹 사이트에 추가 문제가 발생할 수 있습니다. 도움이 필요한 경우 WordPress 웹 사이트를 백업하는 방법에 대한 자세한 가이드를 볼 수 있습니다.

4.1) 테마 기능 파일에 액세스

WordPress 대시보드에서 모양 > 테마 파일 편집기 로 이동하여 테마 기능 파일에 액세스합니다. 여기에서 웹사이트의 모든 핵심 테마 파일을 찾을 수 있습니다. 그런 다음 화면 오른쪽에서 코드를 추가할 Theme Functions ( functions.php) 파일을 선택합니다.

양식 제출 코드 페이지 wordpress에서 양식 만들기

4.2) 테마 파일 편집기에 코드 추가

다음을 사용하여 웹 사이트에서 양식 제출을 처리할 수 있습니다. 따라서 편집기 끝에 다음 코드를 추가하십시오.

 if ($_SERVER["REQUEST_METHOD"] === "게시") {
  $name = sanitize_text_field($_POST["이름"]);
  $email = sanitize_email($_POST["이메일"]);
  $message = sanitize_textarea_field($_POST["메시지"]);

  // 양식 데이터를 데이터베이스에 저장하는 코드 추가
  글로벌 $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $데이터 = 배열(
    '이름' => $이름,
    '이메일' => $이메일,
    '메시지' => $메시지,
    'submission_time' => current_time('mysql')
  );
  $insert_result = $wpdb->insert($table_name, $data);

  if ($insert_result === 거짓) {
    $응답 = 배열(
      '성공' => 거짓,
      'message' => '양식 데이터를 저장하는 중에 오류가 발생했습니다.',
    );
  } 또 다른 {
    $응답 = 배열(
      '성공' => 참,
      'message' => '양식 데이터가 성공적으로 저장되었습니다.'
    );
  }

  // JSON 응답 반환
  header('콘텐츠 유형: 애플리케이션/json');
  echo json_encode($response);
  출구;
}

이 코드는 양식에서 입력한 양식 데이터를 방금 만든 양식 제출 데이터베이스 테이블에 저장합니다. 코드를 편집할 때 양식에 올바른 데이터베이스 테이블 이름과 필드를 추가했는지 확인하기 위해 JSON 응답도 포함했습니다. 양식 데이터가 데이터베이스에 성공적으로 저장된 후에 제거할 수 있습니다.

코드에 필요한 모든 변경을 수행한 후 파일 업데이트를 클릭하기만 하면 됩니다.

5) 대시보드에 양식 제출 표시

양식 데이터가 데이터베이스에 저장되면 대시보드 메뉴를 생성하여 양식 제출을 볼 수 있습니다. 따라서 이를 표시하는 코드도 포함할 것입니다.

이전 단계와 마찬가지로 테마 함수 파일 ( funtions.php) 에 다음 코드를 추가할 수 있습니다.

 함수 display_contact_form_submissions_page() {
  글로벌 $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE name <> '' AND email <> '' AND message <> '' ORDER BY submit_time DESC", ARRAY_A);

  ?>
  <사업부 클래스="랩">
    <h1>문의 양식 제출</h1>
    <table class="wp-list-table widefat 고정 스트라이프">
      <머리>
        <TR>
          <th>이름</th>
          <th>이메일</th>
          <th>메시지</th>
          <th>제출 시간</th>
        </tr>
      </thead>
      <티바디>
        <?php foreach ($form_data를 $data로) : ?>
          <TR>
            <td><?php echo esc_html($data['이름']); ?></td>
            <td><?php echo esc_html($data['이메일']); ?></td>
            <td><?php echo esc_html($data['message']); ?></td>
            <td><?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </테이블>
  </div>
<?php }

함수 register_contact_form_submissions_page() {
  add_menu_page(
    '문의 양식 제출',
    '양식 제출',
    'manage_options',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'dashicons-피드백'
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

다시 한 번 생성한 양식과 데이터베이스 테이블에 따라 코드를 붙여넣고 편집한 후 파일 업데이트를 클릭합니다.

이제 WordPress 대시보드로 이동하면 " 문의 양식 제출 " 메뉴를 볼 수 있습니다. 이렇게 하면 처음에 만든 양식의 모든 제출 양식이 표시됩니다.

양식 제출 페이지 표시 wordpress에서 양식 만들기

양식 제출을 표시하는 디버그 옵션

폼 데이터가 보이지 않을 경우 해당 코드에 디버그 출력 및 SQL 쿼리를 위한 코드를 추가하는 것을 권장합니다. 코드를 추가할 수 있습니다 var_dump($form_data); 그리고 var_dump($wpdb->last_query); 쿼리 후 각각.

따라서 코드는 다음과 같이 보일 수 있습니다.

 함수 display_contact_form_submissions_page() {
  글로벌 $wpdb;
  $table_name = $wpdb->prefix . 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submit_time DESC", ARRAY_A);

  var_dump($form_data); // 디버그 출력
  var_dump($wpdb->last_query); // SQL 쿼리 디버그

  ?>
  <!-- 나머지 코드... -->
  <?php
}

디버그 보고서를 기반으로 양식 데이터가 올바르게 표시되도록 코드를 추가로 편집할 수 있습니다. 그러나 사용한 코드에 오류가 없는지 확인하기 위해 다음 섹션의 요점을 살펴볼 수도 있습니다.

효율적인 사용자 지정 양식을 만들기 위한 필수 고려 사항

사용자 지정 양식을 만들기 위해 코드를 편집하는 동안 고려해야 할 몇 가지 요소는 다음과 같습니다. 프로세스 중에 오류가 발생 하면 도움이 될 수 있습니다.

데이터베이스 확인: 양식 데이터가 올바른 테이블에 올바르게 저장되었는지 확인하십시오. 이 자습서에서는 'wp_contact_form_submissions' 테이블입니다.
오류 확인: PHP 오류 로그를 확인하거나 오류 보고를 활성화하여 양식 제출 또는 데이터 표시와 관련된 오류가 있는지 확인하십시오. 오류는 무엇이 잘못되고 있는지에 대한 단서를 제공할 수 있습니다.
양식 제출 프로세스 확인: 양식 데이터가 올바르게 제출되고 양식 데이터 저장을 위한 PHP 코드가 오류 없이 실행되는지 확인하십시오. 양식을 제출할 때 양식 데이터가 PHP 코드에 올바르게 전달되고 있는지 확인하십시오.
테이블 이름 확인: 'display_contact_form_submissions_page()' 함수에 사용된 테이블 이름이 데이터베이스의 실제 테이블 이름과 일치하는지 다시 확인합니다. 'wp_contact_form_submissions'인지 확인하거나 데이터베이스 테이블에 따라 테이블 이름을 조정하십시오.
캐시 지우기: 캐싱 플러그인 또는 서버 측 캐싱을 사용하는 경우 최신 데이터를 보려면 캐시를 지우십시오.
권한: 로그인한 사용자 역할에 사용자 정의 관리 페이지에 액세스할 수 있는 'manage_options' 기능이 있는지 확인하십시오. 이 기능을 통해 관리자는 기본적으로 페이지에 액세스할 수 있습니다.

WordPress에서 연락처 양식을 만들 수 있는 일련의 코드를 언급했습니다. 그러나 다른 양식이나 데이터 필드가 다른 대체 양식을 만들려면 코드를 편집해야 합니다. 따라서 위의 사항은 WordPress에서 사용자 지정 양식을 만드는 데 도움이 될 수 있습니다.

결론

이것은 플러그인을 사용하지 않고 WordPress에서 양식을 만드는 방법입니다. 플러그인을 사용하여 양식을 만들 수도 있습니다. 그러나 프로그래밍에 대한 기본적인 이해가 있는 경우 사용자 지정 코딩 양식을 생성하면 많은 이점이 있습니다.

이 자습서에 포함된 기본 코드 집합을 사용하여 양식을 쉽게 만들 수 있습니다. 요약하면 효과적인 단계를 구축하기 위한 기본 단계는 다음과 같습니다.

페이지 편집기에서 양식에 대한 코드 추가
양식 제출을 위한 데이터베이스 생성
양식 제출을 처리하고 표시하는 데 필요한 코드를 추가합니다.

이제 이 튜토리얼에서 언급한 코드를 사용하여 자신 있게 웹 사이트에서 양식을 만들 수 있기를 바랍니다. 필요에 따라 추가 양식 필드를 포함하도록 편집할 수 있습니다. 문제가 발생하는 경우 WordPress에서 사용자 지정 코드를 빌드하는 동안 고려해야 할 몇 가지 디버그 옵션 및 요소도 추가했습니다.

그렇다면 플러그인 없이 WordPress에서 양식을 만들어 본 적이 있습니까?

아래 의견에 알려주십시오.

그 동안 WordPress 웹 사이트를 개선하고 사용자 지정하는 데 도움이 되는 다음 문서를 자유롭게 살펴보십시오.

WooCommerce 등록 양식을 사용자 정의하는 방법
Divi 문의 양식이 작동하지 않습니까? 문제를 해결하는 방법은 다음과 같습니다!
WordPress에 팝업 양식을 추가하는 방법