如何在WordPress中制作一个弹出联系人表单按钮,并在消息字段中添加特定文本(我使用的是Contact Form 7和Popup Maker)?

hujrc8aj  于 11个月前  发布在  WordPress
关注(0)|答案(1)|浏览(156)

如何在WordPress中制作一个弹出联系人表单按钮,并在消息字段中添加特定文本(我使用的是Contact Form 7和Popup Maker)?
该文本将不同。例如:在后10图片,下面的每一张图片是按钮“更多信息”。当您按下按钮弹出联系表格出现,并在消息中我想被写相应的图片名称或编号。用户只有写电子邮件地址和问题。主题已经写好。
弹出工程,但我找不到如何使相应的文本出现。

gstyhher

gstyhher1#

您需要预先填写您的消息字段。我的建议是在您的页面上有一个单独的表单示例,例如隐藏在页脚中。此外,您的每篇文章都有一个隐藏的消息容器,其中包含要在表单中显示的特定消息。
当你的弹出按钮被点击时,使用一个js脚本将你的隐藏表单移动到弹出模式,并显示与点击按钮相关联的自定义消息。下面是一个如何实现这一点的例子,首先是带有你的帖子和页脚的HTML标记,

<main>
  <article id="post1>
    <figure>
      <img/>
      <figcaption>
        <button class="popup">Contact</button>
        <span class="hidden"> Custom message text </span>
      </figcaption>
    </figure>
  </article>
  <article id="post2>...</article>
  <article id="post3>...</article>
  ...
</main>
<footer>
  <form class="hidden popup">...</form>
</footer>

字符串
js/jQuery脚本

$('main').on('click', 'button.popup', (e)=>{
  let $button = $(e.target),
      $text = $button.siblings('span.hidden'),
      $form = $('form.popup').clone();

  $('#your-modal-popup').append($form);
  //now the form is in the DOM, fill the message field.
  $form.find('textarea[name="your-message"]').value($text.html())
});

相关问题