如何从联系表格 7 中获取字段值并将其传递给重定向 url？

Question

我想在表单提交后将用户重定向到calendly.com。

我当前的代码是这样的。

<div class="new-contact-form form-contact-box">
  <div class="form">
    <div class="row">
      <div class="col-md-12">
        <div class="form-group -animated">
          <label>Work Email</label>
          [email* email id:user_email class:form-control class:required] </div>
      </div>
      <div class="col-md-6">
        <div class="form-group -animated">
          <label>First Name</label>
          [text* first_name id:first_name class:form-control] </div>
      </div>
      <div class="col-md-6">
        <div class="form-group -animated">
          <label>Last Name</label>
          [text* last_name id:last_name class:form-control] </div>
      </div>
      <div class="col-md-6">
        <div class="form-group -animated">
          <label>Organisation</label>
          [text* organization_name id:organization_name class:form-control] </div>
      </div>
      <div class="col-md-6 wmt-3">
        <div class="form-group -animated">
          <label class="mt-01">Select Plan</label>
          [select* request_plan id:request_plan class:form-control class:form-control-lg class:mt-2 include_blank "Silver" "Gold" "Platinum"] </div>
      </div>
      <div class="col-md-6 wmt-3  well">
        <div class="form-group -animated">
          <label class="mt-01">Size of the Organization</label>
          [select* community_size class:form-control class:form-control-lg class:mt-2 include_blank "My self only" "2-10 employees" "11-50 employees" "51-200 employees" "201-500 employees" "501-1,000 employees" "1,001-5,000 employees" "5,001-10,000 employees" "10,001+ employees"] </div>
      </div>
      <div class="col-md-6 role wmt-3">
        <div class="form-group -animated">
          <label class="mt-01">Your Role</label>
          [select* role class:form-control class:question class:form-control-lg class:mt-2 include_blank "User" "Initiator" "Decision Maker"] </div>
      </div>
      <div class="col-md-12">
        <div class="form-group wmt-3">
          <label>Short Note</label>
          [textarea requirement class:textarea class:mt-3 class:form-control placeholder "Type your text here..."] </div>
        <div class="btn-cloud btn-bg "> [submit "REQUEST A DEMO"] </div>
      </div>
    </div>
  </div>
</div>
</div>
<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        location = 'https://calendly.com/cloudsocial-support/csdemo/';
    }, false );

</script>

它应该使用名字和电子邮件之类的值重定向，以便在日历上预先填充。

Calandly 的建议网址是https://calendly.com/cloudsocial-support/csdemo?Name="name"/

Answer 1

有多种方法可以实现这一点，使用 javascript（客户端）或使用 PHP（服务器端）。

这是一个使用 javascript 的解决方案，

$(document).ready(function(){
  var $form = $("form.wpcf7-form");

  $('input[type=submit].wpcf7-submit', $form).on('click', function(event){
    var $this = $(this);
    //on form submit prevent the form fields from being cleared by the cf7 plugin.
    $(':input',$form).each(function(){
      var $this = $(this);
      switch(true){
        case $this.is(':checked'):
          $this.prop("defaultChecked", true);
          break;
        case $this.is('select'):
          var values = $this.val();
          if(!$.isArray(values)) values = [values];
          $('option', $this).each(function(){
            var $option = $(this);
            $option[0].defaultSelected= false;
            if(values.indexOf($option.val()) >= 0){
              $option[0].defaultSelected=true;
            }
          });
          break;
        default:
          $this.prop("defaultValue", $this.val());
          break;
      }
    });
  });
  $(document).on( 'wpcf7mailsent', function( event ) {
    var attrs="name="+$('#first_name').val()+" "+$('#last_name').val();
    //maybe add some more fields to your uri...
    location = "https://localhost/cf7/?"+encodeURI(attrs);
  });
});

这个脚本的作用是： - 提交表单时保留所有字段值。 CF7 插件会在您提交表单时清除所有字段。 - 如果提交成功，它会重定向到页面并从表单字段中填充 URI 属性。