Как я могу получить значения полей из контактной формы 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>

Он должен быть перенаправлен со значениями, такими как Имя и адрес электронной почты, поэтому он будет предварительно заполнен в календаре.

рекомендуемый URL-адрес 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 из полей формы.