Forums

Magnific Popup and form

Permalink
Hello,
I have managed to initiate Magnifico Popup when someone clicks on my Enquiry button.

But as you will see if you visit the test page here (http://gotimetrekkers.com/concrete5/index.php/richard-iii-and-battle-bosworth) the form shows beneath the Enquiry button when the page loads (I don't want this); and when the form does popup, I can't see the outside edge of the box and the x close button. The form fields are also all over the place.

So..
1/ How can I hide the form from showing on page load?
2/How can I define the width/height of the popup, or get it so that the popup always shows within the page dimensions?
And 3/ What's the best way to arrange the form fields? I tried with bootstrap, but this wasn't very successful?

Many thanks,
P

My code...
Enqury Button (using Fundamental Theme button)
<div class="<?php  echo $buttonAlign;?>">
   <a href="#enquiry-form" id="openEnquiryForm" class="<?php  echo $buttonType.$buttonSize.$buttonCorner.$fullWidth;?>" target="<?php  echo $target;?>">
      <?php  if($buttonFonticon) {echo '<i class="fa fa-'.$buttonFonticon.'"></i> ';}?><?php  echo $buttonText;?>
   </a>
</div>


Form
<div id="enquiry-form" class="popup-inline-content" style="max-width: 400px;">
   <h2>Enquiry form</h2>
   <form id="enquiryForm" action="" method="POST">
      <div class="row">
         <div class="form-group">
            <div class="col-md-6">
               <label>Your name *</label>
               <input type="text" value="" maxlength="100" class="form-control" name="name" id="name">
            </div>
            <div class="col-md-6">
               <label>Your email address *</label>
               <input type="email" value="" maxlength="100" class="form-control" name="email" id="email">
            </div>
         </div>
      </div>
Viewing 15 lines of 30 lines. View entire code block.


JS
script>
$(document).ready(function() {
   $('#openEnquiryForm').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#name'
   });
});
</script>
 
mnakalay replied on at Permalink Reply
mnakalay
Hello,

I see that you already fixed problem number 1.
Concerning problem 2. The button is there but it seems for some reason its color is overridden. It should be white and well visible and instead it's dark gray and hard to see.

Concerning the way the form looks in the popup that's because your original form is using fundamental's modified bootstrap based css. All form fields are referenced as
.ccm-page some-field {
}

.ccm-page is a class adding to the div wrapping the whole page. The content of the popup however is not inside that div.

If you add the class ccm-page to your div#enquiry-form, the form in the popup will instantly look much better.
PJSAndo replied on at Permalink Reply
Thank you. I'll try that.
PJSAndo replied on at Permalink Reply
Looks much better!

I had to use "div.ccm-page.popup-enquiry-form" (including div). Does this matter?

Also, if you look at the form, the close button is there but it's located at the bottom of the form. Not sure why this is. Funny, the popup box for the google map (just above enquiry button doesn't have same problem)

Also, I'm trying to style the submit button to be consistent with Fudamental theme. I wrapped the submit button in <button></button> which seems to have to some extent worked....?
mnakalay replied on at Permalink Reply
mnakalay
Your submit button seems ok (I didn't try clicking it) except it's missing the text.

Concerning the close button 2 ways I can think of but not sure of any:
1- set option closeBtnInside to false
closeBtnInside: false,


OR

2- create the close button markup yourself and use these options:
closeMarkup: '<button title="%title%" class="mfp-close"><i class="mfp-close-icn">×</i></button>',
closeBtnInside: true,

Then you need to add the close button manually in your code where you want it to be. Like that you should have control over it's placement.