【问题标题】:Link redirect to contact form with individual subject链接重定向到带有单个主题的联系表
【发布时间】:2015-01-08 11:49:26
【问题描述】:

我想要做的是:有人单击一个按钮,然后将被带到一个新页面,其中包含一个带有个人主题的联系表。所以链接需要以诸如

之类的方式提供主题

更准确地说,点击:

button 1 = contact form with subject 1
button 2 = contact form with subject 2
button n = contact form with subject n

由于它在 Wordpress 上运行,如果它可以与流行的插件(例如 Contact Form 7)一起使用,那就太好了。

有没有人做过类似的或能够指出我正确的方向?

【问题讨论】:

  • 你的意思是主题文本区域的内容应该根据按钮而改变?你试过什么?

标签: jquery forms contact subject


【解决方案1】:

这样的?

<input value="subject 1" type="button" onclick="document.getElementById('ta').value='subject 1'">
<input value="subject 2" type="button" onclick="document.getElementById('ta').value='subject 2'">
<br>
<form>
    <textarea id="ta"></textarea>
</form>

如果你想用这个表单重定向到另一个页面,你可以使用hash,例如:

第一页(主题选择器)

<body>
    <input value="subject 1" type="button" onclick="window.location.href='http://example.com/form#subject1'">
    <input value="subject 2" type="button" onclick="window.location.href='http://example.com/form#subject2'">
</body>

第二页(带表格)

<body onload="var hash=window.location.hash;if(hash=='#subject1'){document.getElementById('ta').value='Subject 1';}if(hash=='#subject2'){document.getElementById('ta').value='Subject 2';}">
    <form>
        <textarea id="ta"></textarea>
    </form>
</body>

【讨论】:

  • 联系表格是否在同一页面上?我的印象是它链接到一个带有联系表格的页面。 OP?
  • 联系表格在单独的页面上 - 已将原始问题改进为更具体。
【解决方案2】:

您可以使用 jQuery 设置具有给定主题的文本框的值。

$(document).ready(function () {
  $("button").click(function () {
    $("#subject").val($(this).data("subject"));
  });
});
form {display: block; margin: 10px 0;}
form ul {margin: 0; padding: 0;}
form ul li {list-style: none; margin: 10px 0;}
textarea {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-subject="Hello, World!">World</button>
<button data-subject="Hello, Earth!">Earth</button>

<form action="">
  <ul>
    <li>Subject: <input type="text" id="subject" /></li>
    <li>Message: <textarea name="" id="" cols="30" rows="10"></textarea></li>
    <li><input type="submit" /></li>
  </ul>
</form>

【讨论】:

    【解决方案3】:

    您可以在链接中添加 http get 样式值,即

    <a href="http://somelinek.com?subject=Hi this is my subject">Click</a>
    

    请注意,您最好进行 url 编码,并且您必须从 url(window.location 等)获取值并将其注入到加载时输入的值中。

    它也是可见的,因此只能用于非敏感信息。

    如果您不想在 url 中使用它,您可以随时使用本地/会话存储

    【讨论】:

      猜你喜欢
      • 2018-04-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-01
      • 1970-01-01
      • 2012-11-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多