1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JavaScript or jQuery pop up registration form

Discussion in 'JavaScript and AJAX' started by narekm, Oct 17, 2011.

  1. narekm

    narekm New Member

    Joined:
    Mar 23, 2011
    Messages:
    14
    Likes Received:
    0
    Trophy Points:
    0
    Hello there. I am building my portfolio web-site and for it I need to use a reagistration form . On many web sites I have seen pop up registration forms . For example when you click on register button a form pops up (at the same time you remain in the same page ) and you can fill in the forms and submit . So I mean does javascript or jquery have that type of code that i can integrate to my sites code to get that type of pop form .


    Thank you in advance!!!
     
  2. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
  3. Ami Desai

    Ami Desai Member

    Joined:
    Jan 5, 2017
    Messages:
    42
    Likes Received:
    17
    Trophy Points:
    8
    Location:
    Ahmedabad
    Home Page:
    Hi,

    You can check this

    HTML:
      <script>
      $( function() {
        $( "#dialog" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });
        $( "#opener" ).on( "click", function() {
          $( "#dialog" ).dialog( "open" );
        });
      } );
      </script>
    
    
    Thanks
     
    shabbir likes this.
  4. persysweb

    persysweb Member

    Joined:
    Aug 1, 2017
    Messages:
    70
    Likes Received:
    12
    Trophy Points:
    8
    Location:
    India
    Home Page:
    Code:
    html code:
    
      <div id="contact">Enquiry</div>
    
    <div id="contactForm">
    
     
      <small>Let us know how we can assist you, One of Sales person will get back to you shortly.</small>
    
    <form action="contact_me.php" method="post" enctype="multipart/form-data">
             <label>First Name<span>*</span>:</label>
                    <input name="cfname" type="text" input placeholder=" First-Name" required/>
                    
                     <label>Last Name<span>*</span>:</label>
                    <input name="clname" type="text" input placeholder="Last-Name" required/>
                    
                    
           <label>Email Address<span>*</span>:</label>
                    <input name="cemail" type="email" input placeholder="Email-id" required />
                    
                     <label>Brief Subject:</label>
                    <input name="csubject" type="text" input placeholder="subject"  />
                    
         Enter your message<span>*</span> in the box below:
            <textarea name="message" cols="" rows=""></textarea>
            
               <input class="formBtn" type="submit" />
        <input class="formBtn" type="reset" /></form>
        </div>
        </div>     
                    
    contact_me.php code:

    Code:
    <?php
    
    $first_name = $_POST['cfname'];
    $last_name = $_POST['clname'];
    $email = $_POST['cemail'];
    $subject = $_POST['csubject'];
    $message = $_POST['message'];
    
    
    $mail_to = 'your mail address';
    $msg = 'Sales Enquiry from support page ';
    $body_message .= 'first name: '.$first_name."\n";
    $body_message .= 'last name: '.$last_name."\n";
    $body_message .= 'Email: '.$email."\n";
    
    $body_message .= 'Message: '.$message."\n";
    
    $body_message .= 'Subject: '.$subject."\n";
    
    $headers = 'From: '.$email."\r\n";
    $headers .= 'Reply-To: '.$email."\r\n";
    
    $mail_status = mail($mail_to, $msg, $body_message, $headers );
    
    if ($mail_status) { ?>
        <script language="javascript" type="text/javascript">
            alert('Thank you for submitting the form. We will contact you soon!.');
            window.location = 'index.html';
        </script>
    <?php
    }
    else { ?>
        <script language="javascript" type="text/javascript">
            alert('Something went wrong. Please try again or contact at myPersonalEmail@email.com');
            window.location = 'index.html';
        </script>
    <?php
    }
    
    ?>
    Code:
    contact_me.js
    
    $(function() {
     
      // contact form animations
      $('#contact').click(function() {
        $('#contactForm').fadeToggle();
      })
      $(document).mouseup(function (e) {
        var container = $("#contactForm");
    
        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.fadeOut();
        }
      });
     
    });
    
    Hope this code helps
    Thanks!
     

Share This Page