Home Forums Porto Template Popup Window

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10031253
    rizwanmgm
    Participant

    Dear,
    I want to show a popup with form when page load?
    do you have any code or page to view?

    Please advice
    Thanks



    Template Version: 7.5
    #10031256
    Support2
    Keymaster

    Hello,

    To do that please follow the steps below:

    1) Use this HTML code below for the popup:

    <!-- Form -->
    <form id="demo-form" class="white-popup-block mfp-hide">
    	<div class="form-row mt-2">
    		<div class="col-sm-12">
    			<h4>Basic Form</h4>
    			<p class="mb-4">Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.</p>
    		</div>
    	</div>
    
    	<div class="form-row">
    		<div class="form-group col-lg-6">
    			<label>Your name *</label>
    			<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
    		</div>
    		<div class="form-group col-lg-6">
    			<label>Your email address *</label>
    			<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
    		</div>
    	</div>
    	<div class="form-row">
    		<div class="form-group col">
    			<label>Subject</label>
    			<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject" required>
    		</div>
    	</div>
    	<div class="form-row">
    		<div class="form-group col">
    			<label>Message *</label>
    			<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message" required></textarea>
    		</div>
    	</div>
    
    	<div class="form-row">
    		<div class="form-group col">
    			<button class="btn btn-modern btn-primary">Submit</button>
    			<button type="reset" class="btn btn-modern btn-primary">Reset</button>
    		</div>
    	</div>
    
    </form>

    2) Add this code below in js/custom.js:

    $(window).on('load', function(){
    	var delay = 1000; // 1 second
    
        setTimeout(function(){
            $.magnificPopup.open({
                items: [
                	{
                		src: '#demo-form'
                	}
                ],
                type: 'inline'
            });
    	}, delay);
    
    });

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)