文章目录
分享文章

需求背景:在使用Wordpress制作网站时,使用了 YITH WooCommerce Wishlist 插件,并且我给我 header 增加了查看心愿单按钮,效果图如下:

file

我单独为心愿单制作了一个页面,方便客户进行查看,并在心愿单下面增加了一个表单(使用Contact form7),客户提交时方便查看客户关系哪些产品

file

问题出现在Contact form7 我只能获取当前页面URL,及我制作的页面

https://sensor1stop.com/wishlist/

而我需要的页面如下:

https://sensor1stop.com/wishlist/view/6YVZOATTHUKA/

通过查看源码,发现html源码中包含这个链接:

<form
    id="yith-wcwl-form"
    action="https://sensor1stop.com/wishlist/view/6YVZOATTHUKA/"
    method="post"
    class="woocommerce yith-wcwl-form wishlist-fragment"
    data-fragment-options="{...}"
>

因此尝试使用js获取该链接,然后赋值给Contact form7,提交给后台,具体实现方法如下:

1.将隐藏的输入字段添加到您的 Contact Form 7 表单以存储心愿单链接:

file

<input type="hidden" name="wishlist_link" value="">

2.在页面底部添加获取链接 JS 代码

<script>
// 获取form 元素
var form = document.getElementById("yith-wcwl-form");
// 获取action 值
var action = form.getAttribute("action");
// 给form 表单赋值
document.getElementsByName("wishlist_link")[0].value = wishlistLink;
</script>

本方法可以将html代码中 任何数据传送给form 表单

使用wordpress从0-1搭建企业网站

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统,全球又43%的网站都在使用Wordpress进行网站制作。即使你是小白,也可以通过我的教程,从0-1制作属于自己的独立网站。

chenglulu

欢迎订阅

订阅我们的免费时事通讯

Leave A Comment