Help articles

CATEGORY: Forms and Landing PagesHelp ArticlesFAQs

Embedding of sign-up forms

Embedding of sign-up forms

In this article we will outline the ways you are able to embed and sign-up form onto your website. The options described below are based on the assumption that you have already created a Sign-up form and/or Landing page within e-shot.  

If you are yet to create these pieces: 

Here is a separate guide on how to create a Sign-up form in e-shot.  

Here is a guide on how to create a Landing page in e-shot.   

 

Option 1: Embedding a button on your website to load a Sign up form in a modal

One way to place a Sign-up form on your website is by including the link inside of a button, that reads something along the lines of ‘Sign up here’. An example of this can be seen below. 

e-shot website with an example of a sign-up form button

When someone clicks on the button, the Sign-up form will show within a dialog box/popup window that is displayed on top of the current page. An example of this can be seen below. 

Sign-up form pop up after clicking the button

How to use this method:  

  1. Navigate to Forms > Sign-up forms.  
     

  1. For the form that you want to use, click ‘Edit’ on the right hand side of the page.  
     

  1. Click ‘Save & Continue’, until you reach Step 7: “Publish”.  
     

  1. On the “Publish” page that loads, scroll down the page until you get to the section:  “Sign up form code you will host”.  

  • You will see that there are two code snippets that need to be placed into the HTML of the intended page of your website. 

  • The first code snippet is for the actual button. The second code snippet is to enable the script to allow it to work.  
     

  1. Once these HTML code snippets are copied to your website pages HTML, the button should display and load the Sign-up form modal when clicked.  

Example of the code you will need to use for this option

Option 2: Using a Landing page on e-shot to host the Sign-up form within it  

By using an e-shot Landing page to contain the Sign-up form, the link to the Landing page will be behind the same domain that you use for sending emails in e-shot. You can then place a link to this landing page on your website, and because it is using a domain that is specific to your organization it maintains the authenticity that it is part of the organization’s website.  

You can see a live example of a Sign-up form within a Landing page here.  

How to use this method: 

  1. Navigate to Forms > Landing pages. 
     

  1. If it is not already set to Active, click the Activate button towards the right of the page to turn it On.  
     

  1. Once it is Activated, you should see the public facing URL for it in green, beneath the name.  
     

  1. Place this link behind some text or a button on your website, and it will direct users to the Landing page in e-shot where they can Sign-up.  

Landing page link example

When you create a Landing page on your own account, the ‘e-shot.net’ text will be replaced with your e-shot sending domain. The ‘local-government’ would be replaced with what you choose to use.  

Option 3: Display the Sign up form within an iFrame on the HTML of your own webpage

By using an Inline Frame (iFrame), it creates a window-like view of the Sign-up form hosted on e-shot, through one of the pages on your own website.  

This method will make it seem like the Sign-up form is actually just part of your own website’s content, despite being separate from it in reality.  

For guidance on how to use iFrames, please see the W3 Schools guidance.  

How to use this method:  

  1. Navigate to Forms > Sign up forms. 
     

  1. If it is not already set to Active, click the Activate button towards the right of the page to turn it On.  
     

  1. Click ‘Edit’ on the right hand side of the page.  
     

  1. That will load the Sign-up form generator page, at the top you should see the ‘Hosted URL’. This is the URL that you will use as the ‘src’ (source) for the iFrame HTML code on your website page.  

Hosted URL example in e-shot

  1. Place the iFrame snippet code on your website page where you want the form to display.  

 

Free email marketing healthcheck - icon

Email marketing healthcheck

We are confident that we can help you, which is why we offer a free healthcheck to identify potential issues with your current programme and free advice on things that could be done to improve it.

Get started