Purely custom html form popup in wordpress site

Question

I need to display a form on my homepage (Wordpress site) in a popup. It is my own form and not a contact 7 or something else.

I want a popup plug-in or the code which can do the same on my home page. I tried many plug-ins but some has their own form designing which does not give me feature to add my form to it.

I need a plain HTML good looking popup.

Solution

You can use JQuery 'dialog' to open a popup with your form.

Simply embed your form in a div with an id and convert it into a dialog.

HTML

<button type="button" id="but" >Open Popup</button>

<div id="dialogForm">
    <form id="myform" method="post">
        Name:
        <input type="text"/><br/>
        Phone:
        <input type="text"/><br/>
        <button type="submit"> Submit </button>
    </form>
</div>

JavaScript

$('#but').click(function() {
    $("#dialogForm").dialog("open");
});
    $("#dialogForm").dialog({
        modal: true,
        autoOpen: true,
        show: {effect: "blind", duration: 800}
    });   

JavaScript for loading the dialog on load of the homepage Note that the 'autoOpen' is set to true.

$(window).load(function() {

    $("#dialogForm").dialog({
        modal: true,
        autoOpen: true,
        show: {effect: "blind", duration: 800}
    });
});

Here's the fiddle: http://jsfiddle.net/sve3Lmje/

Fiddle for opening dialog without click: http://jsfiddle.net/sve3Lmje/1/

Comments

[Helping Hands]

There are lots of plugin available for popup , but for your custom form you will have to either customize plugin or need to use custom java script and html to achieve your goal of popup..

[Shamsuddin Altamash]

can we open it without on click. I want it to be loaded directly on home page.

[Harshul Pandav]

Yes. Just call $("#dialogForm").dialog("open"); on load of page. Ofcourse the code to set the div as dialog i.e. from line 4 should also be included in the on load

[Harshul Pandav]

check the edit for the second fiddle which opens the dialog on the load of page without clicking on any button

[Shamsuddin Altamash]

When I make dive and write script in same page than that div form is coming directly on page (not in popup) without any call to any function. I want to know where to place html code and where to place script code in my existing homepage so that my form will appear only as pop up and not come up in my home page

[Harshul Pandav]

I have updated my answer with the code to load the dialog automatically on load of the homepage. Make sure that you have the JQuery libraries.