Embedded Form Tips and Tricks

Formsite’s feature for an embedded form makes it easy for form owners to display their forms on their own site. The embed code gives site administrators of all skill levels an easy way to copy and paste a provided code to show their forms. There are some tips and tricks that may be useful for some form owners, like showing the Save & Return signup or login form by default, and displaying the embedded form in a popup window.

Understanding the Embed Code

Formsite’s embed code links to Formsite to load the scripts used to perform advanced actions like:

• Automatically sizing the embed window to the size of each page
• Scrolling to the top of the form after each page
• Setting the form’s page background to transparent to show the embedding site’s background
• Removing the Formsite footer on the Save & Return signup and login pages

The embed code contains these three elements:

1. The anchor tag where the form appears:

<a name="form123456" id="formAnchor123456"></a>

 

2. The script tag linking to Formsite for the actions mentioned above:

<script src="https://fs1.formsite.com/include/form/embedManager.js?123456"></script>

 

3. The script tag to display the form on the site where it appears:

<script>
EmbedManager.embed({
  key: "https://fs1.formsite.com/res/showFormEmbed?EParam=abcdefg&123456",
  width: "100%"
});
</script>

The display parameters (highlighted above) are customizable and start with the “key” and “width” parameters. Each parameter has a name, followed by a colon, then the parameter content in quotes, and separated with commas. The last parameter has no comma after.

To add the parameter for showing the Save & Return signup screen, we add a comma after the width value, then add:

showSaveAndReturn: "signup"

To show the login form instead, replace “signup” with “login”.

For more information about the Embed Code parameters, see the support page.

Embedded Form in Popup Window

Popup windows use many possible methods depending on how the site is made, and here is a simple example.

View form

The code for the example above:

<style>
.popup {
  display: none; /* Load the page with the form hidden */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.popup-content {
  background-color: #dbeeff;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 70%;
}


#openPopup {
  color: #ffffff;
  background-color: #1795FF;
  text-align: center;
  border: none;
  border-radius: 4px;
  margin: 30px;
  padding: 10px 20px;
}

#openPopup:hover {
  cursor: pointer;
  background-color: #1976d2;
}

#close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close:hover,#close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
<button id="openPopup">View form</button>

<div id="myForm" class="popup">
  <div class="popup-content">
    <span id="close">&times;</span>
    
<a name="form2027137868" id="formAnchor2027137868"></a>
<script src="https://fs1.formsite.com/include/form/embedManager.js?2027137868"></script>
<script>
EmbedManager.embed({
	key: "https://fs1.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6KGKu6ZrDGaHGcJKdP4agzA&2027137868",
	width: "100%"
});
</script>
  </div>
</div>

<script>
var popup = document.getElementById("myForm");
var btn = document.getElementById("openPopup");
var close = document.getElementById("close");

btn.onclick = function() {
  popup.style.display = "block";
}

close.onclick = function() {
  popup.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
  }
}
</script>