wordpress - 如何在重力表单中添加额外的提交按钮？

问题描述

我的网站已经上线，需要进行一些定制才能接受 PayPal 付款和卡付款。这是一个非营利（慈善）网站。

一些信息：

php: 7.4 ; WP: 5.4; theme: Avada 6.2.2; Gravity form: 2.4.17

网站网址：https ://www.sevenspikesrelief.org.uk/test/

我的问题是，如何在 PayPal 表单的末尾添加一个按钮并让它做两件事：

1- 提交表单 2- 将用户重定向到贝宝

当我使用 JS 执行此操作时（当用户单击 PayPal 选项时更改表单操作）：

var paypal_radio_input = document.querySelector('#choice_9_16_1');
paypal_radio_input.addEventListener('click', ()=> {
  test_form.action="https://www.paypal.com/gb/fundraiser/charity/2428261";
});

我被重定向到 PayPal，但我看到的只是：

我们很抱歉。

看起来在这个位置没有找到任何东西。也许尝试以下链接之一或搜索？”

和一个控制台错误说：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'nonce-fYNoVf4KWQbtPUlPUHWImFkshC0qreIuW5C2HMLEKvaOv4J3' 'self' https://*.paypal.com https://*.paypalobjects.com 'unsafe-inline' 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

如果有帮助，这里是表单的 HTML：

    <form
  method="post"
  enctype="multipart/form-data"
  id="gform_9"
  class="chceckout_form"
  action="/test/"
>
  <div class="gform_heading">
    <h3
      class="gform_title fusion-responsive-typography-calculated"
      data-fontsize="20"
      data-lineheight="30px"
      style="--fontSize:20; line-height: 1.5; --minFontSize:20;"
    >
      Checkout test
    </h3>
    <span class="gform_description"></span>
  </div>
  <div class="validation_error">
    There was a problem with your submission. Errors have been highlighted
    below.
  </div>
  <div class="gform_body">
    <ul
      id="gform_fields_9"
      class="gform_fields top_label form_sublabel_above description_above"
    >
      <li
        id="field_9_5"
        class="gfield gfield_error amount_field gfield_price gfield_price_9_5 gfield_product_9_5 gfield_contains_required field_sublabel_above field_description_above hidden_label gfield_visibility_visible"
      >
        <label class="gfield_label" for="input_9_5"
          >Amount<span class="gfield_required">*</span></label
        >
        <div class="ginput_container ginput_container_product_price">
          <input
            name="input_5"
            id="input_9_5"
            type="text"
            value=""
            class="medium ginput_amount"
            placeholder="Amount"
            aria-required="true"
            aria-invalid="true"
          />
        </div>
        <div
          id="validation_message_9_5"
          class="gfield_description validation_message"
          aria-live="polite"
        >
          This field is required.
        </div>
      </li>
      <li
        id="field_9_16"
        class="gfield payment_method_field gfield_contains_required field_sublabel_above field_description_above gfield_visibility_visible"
      >
        <label class="gfield_label"
          >Payment Method<span class="gfield_required">*</span></label
        >
        <div class="ginput_container ginput_container_radio">
          <ul class="gfield_radio" id="input_9_16">
            <li class="gchoice_9_16_0">
              <input
                name="input_16"
                type="radio"
                value="Card"
                checked="checked"
                id="choice_9_16_0"
              /><label for="choice_9_16_0" id="label_9_16_0">Card</label>
            </li>
            <li class="gchoice_9_16_1">
              <input
                name="input_16"
                type="radio"
                value="Paypal"
                id="choice_9_16_1"
              /><label for="choice_9_16_1" id="label_9_16_1">Paypal</label>
            </li>
          </ul>
        </div>
      </li>
      <li
        id="field_9_4"
        class="gfield card_field field_sublabel_hidden_label field_description_above hidden_label gfield_visibility_visible"
      >
        <label
          class="gfield_label gfield_label_before_complex"
          for="input_9_4_1"
          >Card</label
        >
        <div
          class="ginput_complex ginput_container ginput_container_creditcard"
          id="input_9_4"
        >
          <div class="ginput_full" id="input_9_4_1_container">
            <div id="input_9_4_1"></div>

            <label
              for="input_9_4_1"
              id="input_9_4_1_label"
              class="hidden_sub_label screen-reader-text"
              >Card Details</label
            >
          </div>
          <div class="ginput_full" id="input_9_4_5_container">
            <input
              type="text"
              name="input_4.5"
              id="input_9_4_5"
              value=""
              placeholder="Cardholder Name"
            />
            <label
              for="input_9_4_5"
              id="input_9_4_5_label"
              class="hidden_sub_label screen-reader-text"
              >Cardholder Name</label
            >
          </div>
        </div>
      </li>
      <li
        id="field_9_22"
        class="gfield paypal_note_field gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_above field_description_above gfield_visibility_visible"
        style="display: none;"
      >
        You must have a PayPal account to donate via PayPal and you will be
        redirected to our page on PPGF website. JZK
      </li>
      <li
        id="field_9_23"
        class="gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_above field_description_above gfield_visibility_visible"
        style="display: none;"
      ></li>
    </ul>
  </div>
  <div class="gform_footer top_label">
    <input
      type="submit"
      id="gform_submit_button_9"
      class="gform_button button"
      value="Donate Now"
      onclick='if(window["gf_submitting_9"]){return false;}  window["gf_submitting_9"]=true;  '
      onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_9"]){return false;} window["gf_submitting_9"]=true;  jQuery("#gform_9").trigger("submit",[true]); }'
    />
    <input type="hidden" class="gform_hidden" name="is_submit_9" value="1" />
    <input type="hidden" class="gform_hidden" name="gform_submit" value="9" />

    <input
      type="hidden"
      class="gform_hidden"
      name="gform_unique_id"
      value="5e9d603e301a0"
    />
    <input
      type="hidden"
      class="gform_hidden"
      name="state_9"
      value="WyJbXSIsIjU5NzZiZmEwMGZmOTI0MTM5NWFkNmRhNDQwMGZiMzFhIl0="
    />
    <input
      type="hidden"
      class="gform_hidden"
      name="gform_target_page_number_9"
      id="gform_target_page_number_9"
      value="0"
    />
    <input
      type="hidden"
      class="gform_hidden"
      name="gform_source_page_number_9"
      id="gform_source_page_number_9"
      value="1"
    />
    <input type="hidden" name="gform_field_values" value="" />
  </div>
</form>

标签： wordpresspaypalgravity-forms-plugingravityforms

wordpress - 如何在重力表单中添加额外的提交按钮？

问题描述

解决方案

推荐阅读