如何在 WordPress 中制作弹出联系表单按钮，并在消息字段中包含特定文本（我正在使用联系表单 7 和弹出窗口制作工具）？

Question

如何在 WordPress 中制作弹出联系表单按钮，并在消息字段中包含特定文本（我正在使用联系表单 7 和弹出窗口制作工具）？

文本会有所不同。示例：帖子中有 10 张图片，每张图片下方都有“更多信息”按钮。当您按下按钮时，会出现弹出的联系表格，并且在消息中我要写入相应的图片名称或号码。用户只需写下电子邮件地址和问题。主题已经写好了

弹出窗口可以工作，但我找不到如何显示相应的文本。

Answer 1

您需要预先填写您的消息字段。我的建议是在页面上有一个表单实例，例如隐藏在页脚中。此外，您的每个帖子都有一个隐藏的消息容器，其中的特定消息将显示在表单中。

单击弹出按钮时，使用 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())
});