전송 성공 후 연락처 폼을 숨기고 "발송"을 표시하려면 어떻게 해야 합니까?

전송 성공 후 연락처 폼을 숨기고 "발송"을 표시하려면 어떻게 해야 합니까?

WordPress 템플릿에서 Contact Form 7 플러그인을 사용하고 있습니다.폼과 관련된 CSS를 작성했기 때문에 모두 정상적으로 동작하고 있습니다.송신 버튼을 클릭했을 때, 정상적으로 메일이 송신되었을 때에, 이하를 실시할 필요가 있습니다.폼이 사라지고 그 대신 "Sent!"가 표시됩니다.변경해야 할 코드를 알아야 합니다.내가 좋아하는 것을 보여주는 사진을 봐주세요.

"on_sent_ok:" 및 "on_submit"은 Contact Form 7 5.0에서 삭제되므로 사용 가능한 2가지 옵션 중 하나를 사용해야 합니다.

1. wpcf7gc
2. wpcf7mailsent

폼을 숨기려면 js 파일에 이벤트청취자를 추가하거나 다음 스크립트를 사용하여 바닥글에 작업으로 추가할 수 있습니다.

add_action( 'wp_footer', 'contact_form_sent' );

function contact_form_sent() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( 'FORM_ID' == event.detail.contactFormId ) { //Use this only when targeting specific form.
         document.getElementById('DIV_ID_OF_FORM').style.display = 'none';
    } //Use this only when targeting specific form.
}, false );
</script>
<?php
}

폼을 숨기고 감사 메시지를 표시하는 경우 아래의 CSS를 사용할 수 있습니다.

.wpcf7-form.sent p
{
    display:none;
}

연락처 양식 7을 숨기려면 다음 코드를 추가해야 합니다. 연락처 양식 7의 설정 섹션에서 이미 코드를 생성했습니다.

on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"

'contactform'은 연락처 양식의 태그를 포함하는 "div"의 ID입니다.

문의 양식 7의 추가 설정에서 이 코드를 추가합니다.

on_sent_ok: "var name = $('.wpcf7 input[name=your-name]').val();

var email = $('.wpcf7 input[name=your-email]').val();

$('.wpcf7').hide();

$('.head_er').hide();

$('.conversations').show();

$('.conversations').html('<p>Thank you.</p>');

$('.conversations').html('<p>We will respond to your email shortly.</p>');"

또는 아래 링크를 참조할 수 있습니다.

http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/

여기에는 여러 가지 방법이 있습니다.대부분 폼 작성 방법에 따라 다르지만 새로운 이벤트모드를 사용하는 기본 폼으로 동작합니다.

<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>

수 은 cf7을 합니다).
★★★★★★★★★★★★★★★★★」

태그) 또는 적어도 폼과 함께 로드되는 js 파일을 사용합니다.

개인적으로 분석 호출 및 애드워드 변환 코드도 포함하는 형태로 사용합니다.

on_sent_ok:  "$('.wpcf7-form.sent p').hide();"

전송된 메시지는 양식이 제출되면 양식에 저장되므로 메시지를 숨기지 않도록 모든 단락을 숨겨야 합니다(DIV로 표시됨).

양식을 숨기고 스크립트를 사용하지 않으려면 다음을 수행할 수 있습니다.

.wpcf7-form.sent
{
    display:none;
}

#thankYou
{
    font-size: 18px;
    display: none;
}

다음으로 Contact Form 7의 쇼트코드 뒤에 있는HTML에 다음과 같이 입력합니다.

<div id="thankYou">Thank you</div>

마지막으로 설정에서 사용하는 것은 다음과 같습니다.

on_sent_ok:  "$('#thankYou').show()"

저는 이 방법을 가장 좋아합니다. 이 방법을 사용하면 메시지를 실제로 표시할 수 있기 때문입니다(폼만 숨기는 다른 답변과는 달리).이것은 순수한 CSS 덕분에 순식간에 숨김이 일어나면서 제가 보던 "플래시"를 줄일 수 있을 것 같습니다.

어떤 이상한 이유로 모든 단락이 제 양식에 숨겨지는 것은 아니라는 것을 알게 되었습니다.그래서 다음과 같은 해결책이 있습니다.

.wpcf7-form.sent p {
    display:none;
}

...완전히 효과가 있는 것은 아닙니다.

가장 신뢰할 수 있는 솔루션은 양식 구성의 '양식' 탭에서 모든 콘텐츠를 감싸는 맞춤형 DIV를 추가하는 것입니다.이

<div class="formWrapper">
    <label> Name (required)
        [text* your-name] </label>
    <label> Email (required)
        [email* your-email] </label>
    [submit "Send"]
</div>

그리고 당신의 테마 커스텀 css에 추가한다.

.wpcf7 form.sent .formWrapper{
    display: none;
}

다들 만져보셨지만 아직 구체적으로 말씀해주신 분이 없기 때문에 제가 지금 어떻게 하고 있는지 다른 답변을 올리도록 하겠습니다.

다른 답변에서 제시한 내용을 사용하여on_sent_okCF7의 "추가 설정" 섹션에 있습니다.그러나 먼저 "양식" 필드에서 전체 양식 내용을 나중에 참조할 구분 기호로 묶어야 합니다.

<div id="form-container">
     <h4>Form title</h4>
     <p>some text, etc</p>
     ...form fields...
</div>

옵션에서 참조하기 위해 #form-container"를 사용합니다.

on_sent_ok:  "$("#form-container").fadeOut();"

사용하는 것을 좋아합니다.fadeOut();애니메이션으로 인해 클래스를 추가하거나 jQuery를 통해 원하는 다른 멋진 것들을 할 수 있습니다.

이렇게 하는 이유는 DOM 내의 CF7에 의해 생성되는 요소에 의존하지 않고 내가 숨기고 싶은 것을 정확하게 공략할 수 있기 때문입니다.

이것은 성공 메시지와 충돌하지 않고 당신의 질문에 대답할 수 있다고 생각합니다.

제공된 다양한 답변이 제가 원하는 대로 되지 않는다는 것을 알게 되었습니다.폼과 송신 버튼을 숨기지만, 송신된 메시지를 표시할 수 있습니다.이것이 나에게 효과가 있었던 해결책입니다.

주의: 개발자가 평가절하한 점에 유의하십시오.on_sent_ok그리고.on_submitjavascript 기능은 2017년 말까지 지원 대상에서 제외될 예정입니다.대신 DOM 이벤트를 사용할 것을 권장합니다.나는 그것들을 어떻게 구현해야 할지 모르겠다.

on_sent_ok:  "$('label').fadeOut();"
on_sent_ok:  "$('input').fadeOut();"
on_sent_ok:  "$('div#required-info').fadeOut();"

마지막 트리거는 "* 지정 필수 필드"라고 기재된 정보가 있는 경우에만 해당됩니다.이 경우, 저는 그것을 로 정리했습니다.<div id="required-info"></div>

따라서 이 세 번째 행을 삭제하거나 폼에 다른 요소(LABEL 및 SUBMIT 버튼 제외)도 추가한 경우 변경합니다.

이 솔루션에서는 폼이 정상적으로 전송되면 폼필드, 전송 버튼 및 추가 텍스트가 모두 페이드되고 성공 메시지가 표시됩니다.

CF7의 현재 버전에서 사용할 수 있는 약간 다른 접근방식을 찾는 사람이 있다면 이 순수한 CSS 솔루션을 사용해 보십시오.

    form.wpcf7-form {
      position: relative;
    }
    .wpcf7-response-output {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: white;
   }

메시지는 폼 바로 위에 위치하여 숨깁니다.CSS를 더욱 세분화하여 메시지의 스타일을 조정하여 메시지를 더욱 두드러지게 할 수 있습니다.

2022년부터는 공식 웹사이트에 명시된 대로 DOM 이벤트를 사용할 수 있습니다.

이벤트에 대해 액션을 수행하기 위한 코드 예는 다음과 같습니다.

var wpcf7Elm = document.querySelector( '.wpcf7' );
 
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );

경고를 필요한 코드로 대체하십시오.

사용 가능한 더 많은 이벤트는 위 링크에 나열되어 있습니다.

언급URL : https://stackoverflow.com/questions/10932386/how-can-i-hide-the-contact-form-and-shows-sent-after-successful-sending