Create Button for Embedded Form Pop Up

  • newhch2016
    Asked on December 7, 2022 at 12:17 PM

    How do I get a button to open this form?? Right now it's just a link. Energy Therapy Core & Electives


    Thanks!

    Page URL: https://www.hypnotherapytraining.com/energy-boundaries
  • Joseph_A JotForm Support
    Replied on December 7, 2022 at 1:07 PM

    Hello newhch2016

    Thank you for reaching out to Jotform Support. It is possible for Jotform to create a pop-up form. by following this guide.

    1. In the Form Builder, click Publish at the top.
    2. Go to the Embed section on the navigation menu on the left side of the screen.
    3. Select Pop-up, then copy the code provided.

    jotform popup form Screenshot 10Paste the code on your website’s source code and that’s all there is to it

    Give it a try and reach out again if you have any other questions.

  • newhch2016
    Replied on December 7, 2022 at 1:52 PM

    Thank you. I don't have a problem with creating a pop up but I need a button, not just a link. I don't see any way to embed this code into a Squarespace button without going in to "Developer Mode".

    Can you provide a code that includes a Jotform button?

  • Lauren JotForm Support
    Replied on December 7, 2022 at 3:25 PM

    Hi newhch2016,

    Thanks for reaching back out. While we don't provide direct CSS or HTML code that would have a pop up form appear as a button on your Squarespace website, I was able to find a helpful guide on creating HTML buttons that you can test yourself. This HTML help site provides code templates to create buttons. I tested an example and here's what I came up with:

    1670444576 6390f6201525e 6390f62015218 Screenshot 10

    Here is that code as well, I used a test form in this example, so please replace the URL with your Form URL

    <!DOCTYPE html>
    
<html>
    
 <head>
    
  <title>Form</title>
    
  <style>
    
   .button {
    
    display: inline-block;
    
    padding: 10px 20px;
    
    text-align: center;
    
    text-decoration: none;
    
    color: #ffffff;
    
    background-color: #7aa8b7;
    
    border-radius: 6px;
    
    outline: none;
    
   }
    
  </style>
    
 </head>
    
 <body>
    
    <a class="button" href="FORM URL HERE">Button Text</a>
    
 </body>
    
</html>


    Give that button code a try and let us know how it goes.