Question

我已经尝试过，但是没有用。

remove_action( 'wpcf7_init', 'wpcf7_add_shortcode_submit', 20 );<br>
add_action( 'wpcf7_init', 'wpcf7_add_shortcode_submit_button' );

function wpcf7_add_shortcode_submit_button() {
    wpcf7_add_shortcode( 'submit', 'wpcf7_submit_button_shortcode_handler' );
}

function wpcf7_submit_button_shortcode_handler( $tag ) {
    $tag = new WPCF7_Shortcode( $tag );

    $class = wpcf7_form_controls_class( $tag->type );

    $atts = array();

    $atts['class'] = $tag->get_class_option( $class );
    $atts['id'] = $tag->get_id_option();
    $atts['tabindex'] = $tag->get_option( 'tabindex', 'int', true );

    $value = isset( $tag->values[0] ) ? $tag->values[0] : '';
    if ( empty( $value ) )
        $value = __( 'Send', 'contact-form-7' );

    $atts['type'] = 'submit';

    $atts = wpcf7_format`enter code here`_atts( $atts );

    $html = sprintf( '<button %1$s>%2$s</button>', $atts, $value );
    enter code here
    return $html;
}

Answer 1

您可以使用更简单的方法来实现-jQuery：

add_action('wp_footer',function(){
echo '<script>
      jQuery(\'.wpcf7-form [type="submit"]\').attr("type","button");
      </script>';
}, 9999);

如果要用自定义按钮元素替换该输入，则可以这样做

add_action('wp_footer',function(){
echo '<script>
      jQuery(\'.wpcf7-form [type="submit"]\').hide();
      jQuery(\'<button type="submit>BUTTON</button>"\').insertAfter(jQuery(\'.wpcf7-form [type="submit"]\'));
      </script>';
}, 9999);

Answer 2

您可以将此代码放置在functions.php中

// Set the filter value
onSearch(e) {
  const {  value } = e.target;
  this.setState({
    query: value
  });
}

// Filter the items by the value in your render method

render() {
    const { data, query } = this.state;
    const filteredData = !query
      ? data
      : data.filter(product =>
          product.name.toLowerCase().includes(query.toLowerCase())
        );

    return (
      <header className="menu">
        <div className="menu-container">
          <div className="menu-holder">
            <h1>Trying to find item</h1>
            <nav>
              <a href="#" className="nav-item">
                Specials
              </a>
              <a href="#" className="nav-item">
                Sales
              </a>
              <a href="#" className="nav-item">
                Stores
              </a>
              <a href="#" onClick={e => this.showSearchContainer(e)}>
                <i className="material-icons search">search</i>
              </a>
              <div>
                {filteredData.map((product, index) => (
                  <span> {product.price} </span>
                ))}
              </div>
            </nav>
          </div>
        </div>
        <div
          className={
            (this.state.showingSearch ? "showing " : "") + "search-container"
          }
        >
          <input type="text" onChange={e => this.onSearch(e)} />
          <a href="#" onClick={e => this.showSearchContainer(e)}>
            <i className="material-icons close">close</i>
          </a>
        </div>
      </header>
    );
  }

Answer 3

使用自定义按钮作为提交按钮的简单解决方案

只需将以下两个类添加到您的自定义按钮或锚标记。 .wpcf7-form-control 和 .wpcf7-submit

请在下面的例子中找到以上两个类

<button type="submit" class="wpcf7-form-control wpcf7-submit btn btn-primary custom-btn-style">Send Message</button>

如何将输入type =“ submit”替换为Contact Form 7上的按钮？

3 个答案: