在联系表 7 上使用图像作为单选按钮

2024-01-01

我正在尝试创建一个选项,供人们选择 WP CF7 表单中的图像。由于他们只能选择一个选项,因此在我看来,使用单选按钮功能是最好的方法。我找到了一个代码示例https://wpquestions.com/Need_Image_as_a_Radio_Button_in_Contact_Form_7/19618#answer_16362 https://wpquestions.com/Need_Image_as_a_Radio_Button_in_Contact_Form_7/19618#answer_16362但添加代码会 a) 不会在管理部分创建标签,b) 仅返回页面上的完整短代码,而不是返回所需的图像。

我确实找到了这个如何在需要的联系表单 7 中制作自定义表单标签 https://stackoverflow.com/questions/42792051/how-to-make-custom-form-tag-in-contact-form-7-required在这个论坛上。我尝试添加

add_action( 'wpcf7_init', 'wpcf7_add_form_tag_imageradio' );

但它返回了以下错误:

警告:call_user_func_array() 期望参数 1 是有效的回调,在第 298 行的 /home2/clay/public_html/wp-includes/class-wp-hook.php 中未找到函数“wpcf7_add_form_tag_imageradio”或函数名称无效

关于如何解决这个问题有什么想法吗? 使用的主题是 OnePage Express


您需要输入两个参数:

function add_shortcode_imageradio() {
    wpcf7_add_shortcode( 'imageradio', 'imageradio_handler', true );
}
add_action( 'wpcf7_init', 'add_shortcode_imageradio' );

function imageradio_handler( $tag ){
    $tag = new WPCF7_FormTag( $tag );

    $atts = array(
        'type' => 'radio',
        'name' => $tag->name,
        'list' => $tag->name . '-options' );

    $input = sprintf(
        '<input %s />',
        wpcf7_format_atts( $atts ) );
        $datalist = '';
        $datalist .= '<div class="imgradio">';
        foreach ( $tag->values as $val ) {
        list($radiovalue,$imagepath) = explode("!", $val
    );

    $datalist .= sprintf(
     '<label><input type="radio" name="%s" value="%s" class="hideradio" /><img src="%s"></label>', $tag->name, $radiovalue, $imagepath 
    );

    }
    $datalist .= '</div>';

    return $datalist;
}

不要忘记CSS:

input.hideradio{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.imgradio label > input + img{ /* IMAGE STYLES */
    cursor:pointer;
    border:2px solid transparent;
}
.imgradio label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
    border:2px solid #f00;
}

并使用 contactform7 中 FORM 选项卡内声明的新短代码:

[imageradio radio-312 
"Value1!http://[YourImgUrl]" 
"Value2!http://[YourImgUrl]"
]

在示例中需要图像作为... https://wpquestions.com/Need_Image_as_a_Radio_Button_in_Contact_Form_7/19618#answer_16362他们错过了包含“add_action”,仅此而已

你可以检查CF7 doc https://contactform7.com/2015/01/10/adding-a-custom-form-tag/ also

希望有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在联系表 7 上使用图像作为单选按钮 的相关文章

  • 配置 .htaccess 以在 PHP 框架 (Silex) 上工作

    我的 Apache2 本地主机 linux 上有一个工作路径 http localhost lab silex web index php hello name 我想成为 http localhost lab silex hello nam
  • CSS flex-basis: 0% 与 flex-basis: 0px 有不同的行为

    根据MDN https developer mozilla org en US docs Web CSS flex the flex 1应设置简写flex basis 0 然而 它实际上设置了flex basis 0 更令人惊讶的是 这有不
  • PHP 中的正则表达式:找到第一个匹配的字符串

    我想在非常长的文本中找到第一个匹配的字符串 我知道我可以使用 preg grep 并获取返回数组的第一个元素 但是 如果我只需要第一场比赛 或者我知道提前只有一场比赛 那么这样做效率不高 有什么建议吗 预匹配 http www php ne
  • 垂直对齐材质图标

    我正在尝试在导航菜单中垂直对齐 下拉箭头 我尝试过各种方法 例如vertical align middle display inline block 之类的东西 但这根本没有帮助 http img02 imgland net jfCmDoW
  • SimpleSAMLPHP 重定向循环

    我们正在尝试使用自定义 mysql 数据库设置 sso 但它在以下两个请求之间进入无限循环 POST http 192 168 0 15 simplesaml module php core loginuserpass php 设置Cook
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • 如何在 Laravel 5 中处理嵌套的 JSON 对象请求?

    我们在 Laravel 5 和 AngularJs Ionic 中运行此 Web 服务来处理 Web 当我们将请求从 Web 客户端 发送到 Web 服务 后端 时 我们传递了嵌套的 JSON 对象 我们在读取服务器端父对象下的所有子对象时
  • 使用 PDO 在 SQLite 中检索单个(且唯一)行的最简单方法

    我有这个 PDO stmt db gt prepare SELECT FROM channels WHERE id id stmt gt bindValue id id SQLITE3 INTEGER result stmt gt exec
  • 有没有一种方法可以使页面布局在 100% 缩放下完美契合,同时又尊重更大的缩放系数?

    有多种方法可以布局网页 使其适合浏览器视口 DOMwindow 当我说 适合 时 我包括更改所用字体的大小 更改 DIV IMG 和其他渲染元素的宽度和高度 以及允许元素 流畅 移动 目标是使页面在所有显示设备 从小型手机到大桌面屏幕 上看
  • 自动溢出的容器中不会出现滚动条(IE10、Windows Phone 8)

    我有一个容器 比方说div with overflow auto 其中的元素完全按照预期滚动 但不会出现典型的触摸滚动条 我尝试设置 ms overflow style auto明确地 但没有任何改变 浏览器 IE10 设备 Windows
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • WAMP 不显示目录列表中的图标

    过去 我通过 vmware 处理 PHP 代码 但最近我决定转而通过 WAMP 在 Windows 8 1 上 在本地进行处理 我创建了一个空文件夹tests in the www folder 然后在我的浏览器上输入http localh
  • 我可以显示我在 PHP 中设置的所有 cookie 吗?

    我正在尝试诊断 cookie 中的错误 但 cookie 的名称不是应有的名称 PHP 有没有办法打印我的域设置的所有 cookie 你有没有尝试过 print r COOKIE
  • 解析 PHP 响应:未捕获的语法错误:意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • php向多个收件人发送邮件

    我可以通过在邮件程序中定义 id 来将电子邮件发送到一个电子邮件 id 但是当用户在表单中键入 消息和电子邮件 id 时 我无法理解如何发送到多个收件人 例如 我正在显示一个带有两个文本区域的表单 一个用于电子邮件 ID 一个用于自定义消息
  • 从外部 bash 设置环境变量

    我试图使用 PHP 从命令行 设置 bash 环境变量 但没有成功 buff array buff VARTESTKEY VARTESTVALUE buff export VARTESTKEY file put contents scrip
  • $_SESSION 中保存大量信息可以吗?

    我需要存储许多数组 SESSION以防止从 MySQL 检索信息 可以吗 其中 太多 的信息有多少 SESSION还是没有 太多 谢谢 附 或者更好地使用http php net manual en book memcache php ht
  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the
  • Laravel 5 注销特定用户

    在我的 laravel 5 应用程序中 有一个功能允许具有管理员角色的用户重置非管理员的任何人的密码 但这不会强制该人注销并再次登录 更改密码后如何强制用户注销 我没有对用于验证用户身份或任何内容的中间件进行任何更改 我不知道它是否有效 但

随机推荐

  • Javascript - XMLHttpRequest 如何同时发送多个请求?

    我遇到了一个非常超自然的问题 我正在尝试实现一个购物车 其中我在客户端存储了 cookie 以识别已订购的商品 ID 及其数量 当我加载结帐 HTML 页面时 我会读取 cookie 并逐个获取项目 id 然后 对于每个项目 id 我将向我
  • 如何注册网络 python 包安装的入口点?

    我有一个用户环境 其中大多数 python 软件包都安装在网络共享上 并可通过PYTHONPATH环境变量 Python本身仍然安装在本地 其中一些软件包需要注册 setuptools切入点 http pythonhosted org se
  • git 子模块分支是否与主项目的分支一起切换?

    最近我开始了解 git 子模块 它们似乎是自给自足的项目 拥有自己的 git 结构和分支 当我切换主项目的分支时 这是否也会切换子模块的分支 git 如何处理这种情况 我最近遇到类似的问题 https stackoverflow com a
  • 使用 Javascript 关闭 iPhone 视频播放器

    我有一个带有多个 html5 标签的网页 为用户提供了许多他们可以选择播放的视频的海报 缩略图 当用户触摸其中一个时 iPhone 视频播放器就会打开并播放视频 我希望能够在视频播放完毕后自动关闭视频播放器并将用户返回到缩略图 我已经为 结
  • 为什么使用 Url.Content 来引用资源?

    在我遇到的几乎每个 ASP NET MVC 示例中 我总是看到网址内容用于引用 CSS JavaScript 和图像 没有人解释过为什么要使用它 有谁愿意解释一下吗 这样做有什么不好 img src Content Img MyImage
  • 无法将 iOS 自定义框架添加到 KMM(Kotlin 多平台)模块(未找到 cinteropXXXIosArm64 FAILED 模块)

    我正在开发一个 iOS 应用程序 它使用 Kotlin Native 共享模块 这个Kotlin Native共享模块 利用了自主开发的iOS框架 这在过去非常有效 但现在我正在尝试将我的项目升级为最新版本的 Kotlin Native 此
  • React,webpack:避免导入语句中的“..”

    我目前正在学习 React 因此正在学习 es6 es7 和 webpack 来自主要Python背景的我对导入语句的文件夹敏感路径声明感到恼火 即使用 在进口声明中 这意味着如果我将文件移动到不同的目录 我需要更改文件中声明的导入语句 P
  • c 开关和跳转表

    据我了解 c c 中的 switch 语句有时会编译为跳转表 我的问题是 有什么经验法则可以保证这一点吗 就我而言 我正在做这样的事情 enum myenum MY CASE0 0 MY CASE0 1 switch foo case MY
  • jQuery 获取特定选项标签文本

    好吧 假设我有这个
  • 在 Firebase 中对类似聊天的应用程序进行建模

    我有一个 Firebase 数据库结构问题 我的场景接近于聊天应用程序 以下是具体细节 users node storing several users of the app id1 name John id2 name Meg id2 n
  • Java ZonedDateTime 到 Instant 转换

    我计划按照以下逻辑将 ZonedDateTime 转换为即时时间 假设我处于 PST 时区 当前时间是上午 11 点 如果我现在转换 从今天 2018 年 3 月 4 日起没有夏令时 toInstant 将为晚上 7 点 由于遵守夏令时 自
  • 如何使用多处理实现发布/订阅模式?

    有什么办法可以使用发布 订阅模式multiprocessing数据结构 换句话说 我想要类似队列的东西 只不过发布者可以同时向多个工作人员发送单个命令 您可以创建自己的数据结构 以使用包装器来实现简单的发布 订阅模式multiprocess
  • 用于在大写字母前添加下划线的正则表达式

    如何在字符串中的大写字母前添加下划线 第一个字母除外 1 VarLengthMean VarWidthMean 我希望它变成 1 Var Length Mean Var Width Mean 我考虑过使用str replace all fr
  • 如何使用Java通过Selenium WebDriver按Ctrl+A选择页面中的所有内容

    I want to select all content by pressing Ctrl a from keyboard by using WebDriver with Java I wrote the following code Ac
  • django中基于表单输入和字符串操作的查询

    Django 表单中的字段 https stackoverflow com questions 50841850 django fields in form 50845891 50845891 正如问题 4 中所述 我需要获取表单输入并计算
  • 解决使用 OOP 时的过程混乱

    我正在用 Fortran 语言编写向量类型 但我感到非常困惑 假设我有以下派生类型 Type Vector Real x y Contains Procedure vector smul End Type Function vector s
  • 如果满足另一列中的条件,则将数据从一列复制到另一列

    我正在尝试创建一个标题为 Study id Conflict 的表 并创建第三列和第四列 其中包含与列中的值相对应的数据 Conflict 下面的代码实现了这个目的 然而它相当长 特别是因为我希望将其扩展以涵盖列中的数百个不同值 冲突 预先
  • 以编程方式滚动到 UICollectionView 中的补充视图

    我在用UICollectionView分段显示照片 每个部分都有一个补充视图作为标题 并通过以下方法提供 viewForSupplementaryElementOfKind 我的侧面有一个洗涤器 允许用户从一个部分跳到另一个部分 现在我正在
  • C++ OpenGL gluLookAt 帮助

    我一直在尝试使用 gluLookAt 但遇到了一些问题 我的第一个问题是相机的默认位置是什么 每当我尝试使用它时 我的整个场景似乎横向和向上旋转 我的第二个问题是 从我读到的内容来看 它是 gluLookAt Posx Posy PosZ
  • 在联系表 7 上使用图像作为单选按钮

    我正在尝试创建一个选项 供人们选择 WP CF7 表单中的图像 由于他们只能选择一个选项 因此在我看来 使用单选按钮功能是最好的方法 我找到了一个代码示例https wpquestions com Need Image as a Radio