WordPress

폼 플러그인은 WordPress 안에서 제출을 처리합니다. 플러그인의 폼은 여러분의 사이트로 POST하고, 플러그인이 결과를 저장하고 이메일로 보냅니다. Ikiform으로 연결한 일반 HTML 폼은 플러그인, 데이터베이스, 메일 설정을 모두 건너뛰며, WordPress nonce가 없으므로 캐시된 페이지에서도 계속 작동합니다.

폼을 붙여 넣을 수 있는 사람

WordPress는 글과 페이지의 HTML을 필터링합니다. unfiltered_html 권한이 없는 사용자가 저장하면 <form>과 <input>이 제거됩니다.

Custom HTML 블록

1. 블록 추가하기

   블록 편집기에서 /html을 입력하고 Custom HTML을 고르세요. 모든 페이지에 폼을 넣으려면 대신 사이트 편집기에서 푸터 같은 템플릿 파트에 블록을 추가하세요.

2. 폼 붙여 넣기

   <form class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
     <p><label>Name <input name="name" autocomplete="name" required></label></p>
     <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
     <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
     <input type="hidden" name="_redirect" value="https://example.com/thank-you/">
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <p><button type="submit" class="wp-element-button">Send</button></p>
   </form>

   wp-element-button을 쓰면 블록 테마에서 버튼에 테마의 버튼 스타일이 적용됩니다. 폼은 테마의 글꼴과 입력 스타일을 상속하므로 보통 CSS가 필요 없습니다.

3. 미리 본 뒤 업데이트하기

   블록의 Preview 탭을 사용한 뒤 저장하세요. 편집기를 새로 고치고 블록을 다시 열었을 때 <form>과 <input> 태그가 사라졌다면, 여러분의 계정으로는 저장할 수 없습니다. 아래 쇼트코드를 사용하세요.

_redirect는 폼의 허용 도메인에 여러분의 사이트가 포함된 경우에만 작동하며, 그렇지 않으면 방문자에게 Ikiform의 감사 페이지가 보입니다. 폼 설정에서 Redirect after submit을 설정하고 숨겨진 입력을 빼도 됩니다.

쇼트코드

쇼트코드는 콘텐츠 필터가 건드리지 않는 PHP 안에 HTML을 두므로, 작성자와 기여자도 폼을 넣을 수 있습니다. WordPress가 자동으로 불러오는 필수 플러그인(must-use plugin)으로 다음을 저장하세요.

<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'subject' => '',
        'redirect' => '',
        'button' => 'Send',
    ], $atts, 'ikiform');

    ob_start();
    ?>
    <form class="ikiform" action="<?php echo esc_url('https://ikiform.com/f/' . rawurlencode($atts['id'])); ?>" method="post">
      <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
      <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
      <?php if ($atts['subject']) : ?>
        <input type="hidden" name="_subject" value="<?php echo esc_attr($atts['subject']); ?>">
      <?php endif; ?>
      <?php if ($atts['redirect']) : ?>
        <input type="hidden" name="_redirect" value="<?php echo esc_url($atts['redirect']); ?>">
      <?php endif; ?>
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
      <p><button type="submit" class="wp-element-button"><?php echo esc_html($atts['button']); ?></button></p>
    </form>
    <?php
    return ob_get_clean();
});

그런 다음 Shortcode 블록을 추가하거나, 아무 콘텐츠에 쇼트코드를 입력하세요.

[ikiform subject="New enquiry" redirect="https://example.com/thank-you/"]

• 다른 폼을 쓰려면 id를 전달하세요: [ikiform id="frm_..."].
• PHP의 필드를 폼에 맞게 바꾸세요. name이 있는 모든 입력이 저장됩니다.
• 클래식 편집기에서는 원시 HTML을 Text 탭에만 붙여 넣으세요. 비주얼 편집기는 폼 안에 <p>와 <br> 태그를 추가합니다. 쇼트코드를 쓰면 이 문제가 없습니다.

허용 도메인

사이트가 응답하는 모든 주소를 등록하세요. WordPress 사이트는 만드는 동안 주소가 여러 개인 경우가 많습니다.

• wordpress.com이나 wpcomstaging.com만 단독으로 추가하지 마세요. 다른 사람의 사이트를 포함해 그 호스트의 모든 사이트가 일치하게 됩니다.

테스트 체크리스트

1. 로그아웃하거나 시크릿 창을 여세요. 로그인한 관리자는 일부 캐시를 건너뛰어 조금 다른 페이지를 봅니다.
2. 폼을 제출하고 Ikiform에서 제출이 스팸이 아니라 수신 목록에 있는지 확인하세요.
3. 감사 페이지로 이동하는지 확인하세요. Ikiform의 페이지가 보인다면 사이트가 허용 도메인에 없거나 _redirect URL이 https:가 아닙니다.
4. 관리자가 아닌 사용자로 페이지를 편집해 저장 후에도 폼이 남아 있는지 확인하거나, 쇼트코드를 사용하세요.

문제 해결

관련 문서

• HTML 폼리디렉션, 예약 필드, 허니팟.
• 사이트 빌더어떤 빌더에서든 작동하는 임베드.
• 스팸 방지허니팟, 점수 산정, 사람 확인.
• 문제 해결CORS, 출처 불일치, 429.