Question

我正在此网站上工作，我想在其中添加一个表单，一旦您按下登录按钮，该表单就会打开。表单是使用在线表单构建器创建的，该构建器提供了嵌入代码以嵌入到您的网站中。我已经为我的网站提供了嵌入代码以及html / css。

HTML ：

  <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Help</a>
  </div>

<!-- <div id="main">
    <span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  </div>
-->
  <div class="header">
      <span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
      <div class="header-right">
          <a class="active" href="#home">Login</a>
      </div>
  </div>

  <script>
  function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginRight = "250px";
  }

  function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginRight= "0";
  }
  </script>

CSS：

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: dodgerblue;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 40px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 36px;
    margin-right: 30px;
}

#main {
    transition: margin-left .3s;
    padding: 20px;
}


* {box-sizing: border-box;}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    overflow: hidden;
    background-color: dodgerblue;
    padding: 25px 20px;
}

.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}



.header a:hover {
    background-color: #ddd;
    color: black;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

.header-right {
    float: right;
}

表格的嵌入代码：

    <a name="form691431825" id="formAnchor691431825"></a>
<script type="text/javascript" src="https://fs3.formsite.com/include/form/embedManager.js?691431825"></script><script type="text/javascript">
EmbedManager.embed({    
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
    width: "100%",  
mobileResponsive: true
});</script>

Answer 1

首先，您只需要在不问任何问题的情况下备注一下帖子内容即可，而要让人们猜测您需要的内容。

假设您需要一个触发器来打开登录窗口，这就是我要做的事情：

使用EmbedManager.embed(..);修改脚本并将其放入名为openLogin()的函数中

  function openLogin() {
    EmbedManager.embed({    
        key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
        width: "100%",  
        mobileResponsive: true
        });
    }

现在您有了一个javascript函数，可以用来打开登录屏幕。选择了要用作触发器的元素（a，按钮，div等）后，添加属性name="form691431825" id="formAnchor691431825" onclick="javascript:openLogin()"，删除原始的a元素，您就可以使用了。

结果看起来不太漂亮，给您留下了下一个有趣的谜题供您咀嚼...

将此外部制作的表格嵌入我的网站

1 个答案: