pop up form on button click javascript - Brave Search

Pop up a form when a button is clicked

stackoverflow.com › questions › 44091397 › pop-up-a-form-when-a-button-is-clicked

Create a hidden form, then on click of a button toggle the form using .show() and .hide()

$('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})

.center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>

Answer from Junius L on Stack Overflow

w3docs.com › javascript

How to Create a Popup Form Using JavaScript

function openForm() { ... modal) { closeForm(); } } It is not too difficult to have several Popup Forms use the data-*global attribute....

w3schools.com › howto › howto_js_popup_form.asp

How To Create a Popup Form With CSS

<button class="open-button" onclick="openForm()">Open Form</button>  <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1>Login</h1> <la

Videos

How To Make A Popup Using HTML, CSS And JavaScript ...

HTML, CSS & JavaScript - How to Create a Pop-Up Modal ( Manual ...

December 3, 2021

Pop Up Window using HTML CSS | Pop Up Login Form - YouTube

November 10, 2021

Build a Popup With JavaScript - YouTube

bootstrap modal popup on button click jquery | bootstrap modal ...

October 10, 2017

JavaScript popup window - YouTube

January 22, 2015

People also ask

Is Popupsmart Compatible with CMS to Display Popup Campaign?

Yes, it is. When you decide to create and publish your popup, all you need to do is customize your campaign and make sure that your embed code is working properly on your website.

popupsmart.com › popupsmart conversion rate optimization & digital marketing blog › how to build a popup that opens on a button click

How to Build a Popup That Opens on a Button Click

How Can I Ensure a Seamless UX with Popups?

Focusing on the timing and relevance of your popups is essential. Utilize the features to allow users to initiate interactions when they are ready, reducing the likelihood of interrupting their browsing experience.

popupsmart.com › popupsmart conversion rate optimization & digital marketing blog › how to build a popup that opens on a button click

How to Build a Popup That Opens on a Button Click

Can I Track the Performance of My Popups?

Yes, Popupsmart provides Leads and Analytics pages, where you can monitor metrics such as conversion rates, click-through rates, and engagement data to assess the effectiveness of your popups and make data-driven improvements.

popupsmart.com › popupsmart conversion rate optimization & digital marketing blog › how to build a popup that opens on a button click

How to Build a Popup That Opens on a Button Click

stackoverflow.com › questions › 44091397 › pop-up-a-form-when-a-button-is-clicked

jquery - Pop up a form when a button is clicked - Stack Overflow

Create a hidden form, then on click of a button toggle the form using .show() and .hide()

$('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})

.center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>

extremely simple using jquery:

$('.open-form').click(function(){
  if (!$(this).hasClass('open')){
    $('.form').css('display','block')
    $(this).addClass('open');
    $(this).text('CLOSE FORM');
  }
  else{
    $('.form').css('display','none')
    $(this).removeClass('open');
    $(this).text('OPEN FORM');
  }
});

input{
  display:block;
  margin-bottom:10px;
}

.parent{
  position: relative;
  height: 100vh;
}

form{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  display:none;
  padding: 20px;
  background-color: lightgray;
}
  
.open-form{
  display: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <form class="form"> 
    <label for="name">name</label>
    <input id="name" type="text">
    <label for="last-name">last name</label>
    <input id="last-name" type="text">
    <label for="city">city</label>
    <input id="city" type="text">
  </form>
  <div class="open-form">OPEN FORM</div>
</div>

help.klaviyo.com › hc › en-us › articles › 4418052317339

How to trigger a sign-up form to appear when a button is clicked | Klaviyo Help Center

To do so: Create a new sign-up form to appear when the button is clicked, or choose a form that you've already created. In the Styles tab, your Form Type should be set to either Popup, Flyout or Full Page.

stackoverflow.com › questions › 3945216 › pop-up-form-on-button-click

jquery - Pop up form on button click - Stack Overflow

Use this code

HTML

<div id="divdeps" style="display:none" title=""></div>

Jquery on DOM ready

$("#divdeps").dialog({
    autoOpen: false,
    show: 'slide',
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

This code will initialize a Dialog and put it in state ready to be open and successively closed. If you want to open the dialog when the page loads then add this line of code just after the code you've already added in document ready:

$("#divdeps").dialog('open');

If instead you want to open the Dialog following a click event add the same code on the click event of the element that should fire the opening.

Add your form inside the myDialog DIV. If you need more help regarding the form submission just give us more details...

How to generate a simple popup using jQuery

formget.com › home › jquery › how to create pop-up contact form using javascript

How To Create Pop-up Contact Form Using JavaScript | FormGet

May 10, 2014 - All you need to do is simple in your div_show() just add this JS code: document.getElementById(“the div ID of your second popup form”).style.display=block ... i got the pop up but i want to store the field value in database when user click ...

popupsmart.com › popupsmart conversion rate optimization & digital marketing blog › how to build a popup that opens on a button click

How to Build a Popup That Opens on a Button Click

January 26, 2024 - Create an event listener for the button click event, and use it to toggle the visibility of the popup by changing its display property. You can use JavaScript to add the functionality to open the modal when the button is clicked and to close ...

Find elsewhere

Google Bing Mojeek

stackoverflow.com › questions › 74181877 › how-do-i-make-a-form-appear-after-clicking-a-button

javascript - How do I make a form appear after clicking a button? - Stack Overflow

Fixed syntax error by adding missing closing paren ).
Removed the inline onclick handler from the addBook button.
Removed the unnecessary event handler param openForm.
Moved the id="popUpForm" to the form's parent div.

//define button and form//
const popUpForm = document.getElementById("popUpForm");
var button = document.getElementById("addBook");
//Form Pop-Up//
//button.onclick = () => {window.open('hello!')};//

//button function//
button.addEventListener("click", function() {
  document.getElementById("popUpForm").style.display = "block";
 
});

h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  justify-content: center;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 3vh;
  color: #c2e8ff;
}

button {
  height: 10vh;
  width: 20vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-color: #daf1ff;
  border-width: 2px;
  border-style: solid;
}

button:hover {
  background-color: #192c44;
}

body {
  background-color: #9DD1F1;
}

.body-box {
  display: flex;
  justify-content: center;
}


/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.form-container {
  display: block;
  max-width: 300px;
  padding: 10px;
}

<div class="head-box">
  <h1>My Library</h1>
</div>
<div class="body-box">
  <button id="addBook"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div class="form-popup" id="popUpForm">
  <form action="example.com/path" class="form-container">
    <input type="text" id="title" placeholder="Title">
    <input type="author" id="author" placeholder="Author">
    <input type="pages" id="pages" placeholder="Pages">
    <input type="checkbox" id="readOption" name="readOption">
    <label for="readOption">Have you read it?</label>
    <button type="submit">Submit</button>
  </form>
</div>

const popUpForm = document.querySelector(".form-popup");
const button = document.querySelector("#addBook");

button.addEventListener("click", () => {
  popUpForm.style.display = "block";
});

h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  justify-content: center;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 3vh;
  color: #c2e8ff;
}

button {
  height: 10vh;
  width: 20vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-color: #daf1ff;
  border-width: 2px;
  border-style: solid;
}

button:hover {
  background-color: #192c44;
}

body {
  background-color: #9DD1F1;
}

.body-box {
  display: flex;
  justify-content: center;
}


/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.form-container {
  display: block;
  max-width: 300px;
  padding: 10px;
}

<div class="head-box">
  <h1>My Library</h1>
</div>
<div class="body-box">
  <button id="addBook"><h2>Add Book</h2></button>
</div>

<!-----Form information----->
<div class="form-popup">
  <form action="example.com/path" class="form-container" id="popUpForm">
    <input type="text" id="title" placeholder="Title">
    <input type="author" id="author" placeholder="Author">
    <input type="pages" id="pages" placeholder="Pages">
    <input type="checkbox" id="readOption" name="readOption">
    <label for="readOption">Have you read it?</label>
    <button type="submit">Submit</button>
  </form>
</div>

w3schools.com › howto › howto_js_popup.asp

How To Create Popups

Google Charts Google Fonts Google Font Pairings Google Set up Analytics · Convert Weight Convert Temperature Convert Length Convert Speed · Get a Developer Job Become a Front-End Dev. Hire Developers ... Learn how to create popups with CSS and JavaScript. Click me to toggle the popup!

github.com › solodev › onclick-form-popup

GitHub - solodev/onclick-form-popup: Providing easy ways for users to sign up for your product or service without having to search through your website is crucial to success online. Adding a Sticky Tab to your website allows you to convert more website visitors by allowing them to easily click the sticky tab and fill out a popup form anywhere on your website.

<div class="side-widget open"> <div class="inner"> <a class="btn btn-blue productCheckout" id="get-started">Get Started</a> </div> </div>   <div id="popup-container"> <div id="popup-window"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <a href="#" class="your-class"></a> <div> <div class="row text-center"> <h1>GET STARTED</h1> <hr> <p>Fill out the form below to get started today!</p> </div> <br> <form action="" method="post" id="

Forked by 2 users

Languages CSS 52.7% | HTML 38.6% | JavaScript 8.7% | CSS 52.7% | HTML 38.6% | JavaScript 8.7%

wisepops.com › blog › popup-on-a-button-click

How to make a popup that opens on a button click [+examples]

Learn how to create a popup that opens on a button click, or an on-click popup form.

stackoverflow.com › questions › 32034940 › popup-when-click-button

javascript - Popup when click button - Stack Overflow

function myFunction() { require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) }); } ... Sign up to request clarification or add additional context in comments. ... first of all - thanks. I'm trying to follow your instructions but still doesn't work for me. here is link to pen code: codepen.io/anon/pen/rVgVEe 2015-08-16T12:57:14.917Z+00:00 ... You can use standard popup boxes (those boxes that most sites use for: "Hey, you won X, do you really want to leave?") to ask the person a question via alert().

optinmonster.com › home › tutorials › how to create a popup form with css and javascript

How to Create a CSS and JavaScript Popup Form

June 2, 2024 - You have designed a simple popup ... with the click of a button. Now let’s set the display rules to make sure the popups appear meaningful to site visitors in their customer journey. When you’re coding your own JavaScript code to create a popup form, it can be difficult for you to set up specific rules ...

nerdy-form.com › home › blog › button click popup form

How to Create an Effective Button Click Popup Form | Nerdy Form

The button click popup form feature also offers users the ability to customize the button that is used to open the form. Users can customize the button's position, size, color, and text, allowing them to create a button that fits the look and feel of their website.

stackoverflow.com › questions › 65134637 › how-to-make-a-pop-up-appear-when-you-click-a-button-in-html

popup - How to make a pop up appear when you click a button in html - Stack Overflow

JavaScript code should be wrapped with the <script> tag. CSS code should be wrapped with the <style> tag inside the <head> tag (although not mandatory).

The HTML you should be using is this:

<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>
<script>
$('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})
</script>
</body>
</html>

stackoverflow.com › questions › 6265574 › popup-form-using-html-javascript-css

popup form using html/javascript/css - Stack Overflow

Please try jQuery UI dialog

Here is the forms demo

For mobile use, have a look at jQuery Mobile - Creating dialogs

Live Demo

Sounds like you might want a light box,and since you didnt tag your question with jQuery included is a pure JS example of how to make one.

JS

var opener = document.getElementById("opener");

opener.onclick = function(){

    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");

    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';

    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }

    document.body.appendChild(dimmer);

    lightbox.style.visibility = 'visible';
    lightbox.style.top = window.innerHeight/2 - 50 + 'px';
    lightbox.style.left = window.innerWidth/2 - 100 + 'px';
    return false;
}

Markup

<div id="lightbox">Testing out the lightbox</div>
<a href="#" id="opener">Click me</a>

CSS

#lightbox{
    visibility:hidden;
    position:absolute;
    background:red;
    border:2px solid #3c3c3c;
    color:white;
    z-index:100;
    width: 200px;
    height:100px;
    padding:20px;
}

.dimmer{
    background: #000;
    position: absolute;
    opacity: .5;
    top: 0;
    z-index:99;
}

sharepoint.stackexchange.com › questions › 272218 › save-button-click-stay-on-the-form-and-popup-new-form-javascript

2013 - Save button click Stay on the form and popup new form - JavaScript - SharePoint Stack Exchange

As a workaround, we can redirect the new page on Save button click in list item new form page. The following code for your reference, add the code into script editor web part in new form page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var targetURL = 'YOUR URL';
    //For Cancel Button
    $("input[value='Cancel']").attr("onclick","location.href='" + targetURL +"';");  
    //For Save Button
    var saveButton = $("input[value='Save']");
    saveButton.removeAttr("onclick");
    saveButton.click(function() {
        if (!PreSaveItem()) return false;
        if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false; 
        var oldActionUrl = $('#aspnetForm').attr('action');
        var oldSource = GetUrlKeyValue("Source", true, oldActionUrl);           
        var newActionUrl = oldActionUrl.replace(oldSource, encodeURIComponent(targetURL));
        var elementName = $(this).attr("name");
        WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(elementName, "", true, "", newActionUrl, false, true));
    });    
});
</script>

Refer to: How to redirect different page on Save button click on SharePoint Forms using client side script

paperform.co › help › articles › pop-up-forms

Can I add a form as a popup on my site? | Paperform Help Center

You can use buttons or other HTML elements to make the form pop up in a modal when clicked.

wppopupmaker.com › docs › triggering-popups › trigger-click-open-use-jquery-to-trigger-a-popup-on-click

Use Inline JavaScript And JQuery To Trigger A Popup With A Click - Popup Maker

March 25, 2025 - // The parameter '123' in the .open() method refers to a generic popup ID number. // Substitute the actual ID number generated for your popup. <script type="type/javascript">jQuery('#my-button').on('click', function () { PUM.open(123); }); </script>

geeksforgeeks.org › javascript › how-to-create-a-popup-form-using-html-css-and-javascript

How to create a Popup Form using HTML CSS and JavaScript ? - GeeksforGeeks

Style the overlay and form using CSS, ensuring a visually appealing and responsive design. Write JavaScript functions, "openPopup" and "closePopup", to toggle the visibility of the overlay when the button is clicked.

Published July 23, 2025