联系表单 7 成功提交后如何打开弹窗

Posted 2023-05-07

【中文标题】联系表单 7 成功提交后如何打开弹窗

【英文标题】：How to open a popup after the contact form 7 succesfully submitted

【发布时间】：2018-10-28 14:19:40

【问题描述】：

我正在使用 Wordpress 和联系表格 7。 我需要使用 magnificPopup js 显示一个弹出窗口，该弹出窗口将在成功提交联系表单后出现。 已为 wpcf7_mail_sent 添加了一个钩子，但我如何调用弹出窗口以使用 javascript 显示。

例子：

在functions.php中

add_action( 'wpcf7_mail_sent', 'after_send_mail_from_contact_form' );
function after_send_mail_from_contact_form($contact_form)
  // what to do here 

在 Custom.js 文件中

$('.pay_for_course').magnificPopup(
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
);

【参考方案1】：

试试这个

创建一个引导模式弹出窗口，然后在function.php中添加这个函数

 <?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() 
?>
     <script type="text/javascript">
         document.addEventListener( 'wpcf7mailsent', function( event ) 
         if ( '34' == event.detail.contactFormId )  // Change 123 to the ID of the form 
         jQuery('#myModal2').modal('show'); //this is the bootstrap modal popup id
       
        , false );
         </script>
       <?php   ?>

或

add_action('wpcf7_mail_sent', function ($cf7) 
    // Run code after the email has been sent
 $wpcf = WPCF7_ContactForm::get_current();
$wpccfid=$wpcf->id;
    // if you wanna check the ID of the Form $wpcf->id
     if ( '34' == $wpccfid )  // Change 123 to the ID of the form 
echo '
 <div class="modal fade in formids" id="myModal2" role="dialog" style="display:block;" tabindex="-1">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content no_pad text-center">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-header heading">
          <h3 class="modal-title">Message Sent!</b></h3>
        </div>
        <div class="modal-body">

            <div class="thanku_outer define_float text-center">
                <h3>Thank you for getting in touch!</h3>
            </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>

    </div>
    </div>
';
    
);

【参考方案2】：

$('.wpcf7-mail-sent-ok').change(function() $('#form_success').fadeIn(400).addClass('modal-show').find('.modal-content-block-title').text($(this).text()); );

【参考方案3】：

按照以下步骤，在格式良好的对话框中完全自定义联系人 form7 消息：

第 1 步：使用 cPanel 转到您的插件文件夹，打开 contact-form-7 文件夹。

第 2 步：在contact-form-7 中探索包含文件夹并打开contact-form.php 文件。

第 3 步：在上述文件中搜索 form_response_output() 函数并将其替换为以下编辑过的函数。

public function form_response_output() 

  $status = 'init';

  $class = 'wpcf7-response-output';

  $role = '';

  $id='cookie-notice-popup';

  $content = '';

  if ( $this->is_posted() )  
    $role = 'alert';

    $submission = WPCF7_Submission::get_instance();
    $status = $submission->get_status();
    $content = $submission->get_response();

    switch ( $status ) 
      case 'validation_failed':
        $class .= ' wpcf7-validation-errors alert alert-danger';
        break;
      case 'acceptance_missing':
        $class .= ' wpcf7-acceptance-missing alert alert-warning';
        break;
      case 'spam':
        $class .= ' wpcf7-spam-blocked alert alert-dark';
        break;
      case 'aborted':
        $class .= ' wpcf7-aborted alert alert-info';
        break;
      case 'mail_sent':
        $class .= ' wpcf7-mail-sent-ok alert alert-success';
        break;
      case 'mail_failed':
        $class .= ' wpcf7-mail-sent-ng alert alert-primary';
        break;
      default:
        $class .= sprintf( ' wpcf7-custom-%s',
          preg_replace( '/[^0-9a-z]+/i', '-', $status )
        );
    
   else 
    $class .= ' wpcf7-display-none alert alert-info';
  

  $atts = array(
    'class' => trim( $class ),
    'role' => trim( $role ),
    'id' => trim( $id ),
  );

  $atts = wpcf7_format_atts( $atts );


  $output = sprintf( '<div %1$s>%2$s <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; X </span></div>',
   $atts, esc_html( $content ) );

  $output = apply_filters( 'wpcf7_form_response_output',
    $output, $class, $content, $this, $status );

  $this->responses_count += 1;

  return $output;

第 4 步：将下面的 CSS 添加到您的样式表文件中。

#notice-popup 
 
    border-radius:0px!important; 
    color: #fff !important;
    background: #673ab7;
    left:20% !important; 
    right:20% !important;

#cookie-notice-popup

    bottom:5em !important;
    position:fixed;
    height:auto;
    z-index:100000;
    font-size:13px;
    line-height:40px;
    text-align:center;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

第 5 步：如果您想在点击时关闭弹出消息对话框，请将下面的 JS 添加到您的 javascript 文件中：

$(document).ready(function()$(".wpcf7-response-output").on("click",function()$(this).hide("slow");))

第 6 步：完成。

注意：请清除您的浏览器历史记录以及缓存、cookie 以获得结果。

【讨论】：

这是不好的做法，你不应该直接接触插件代码。如果插件更新，您的代码将不再工作。