I have couple of more question, but they are mostly HTML/CSS.
https://blackuranium.com/app/temp/1/
In the WP installation link #1 there is an issue-
Unless you do not move the cursor to the leftmost first two input boxes are not writable. what is causing it, and what can be the fix?
Please let me know if I am in error I can relocate it to HTML/CSS folder.
This appears to be a collision with your popover box.
I will ask the moderators to splinter this with a link to the page in question, so that the CSS gurus (of which I am certainly not one) can give better advice.
EDIT: Thank you @TechnoBear <3
As @m_hutley said its an invisible popover that is blocking those first couple of inputs.
However it seems to be an html issue as you have copied the html for the popover directly into your page here.
<div class="alert alert-success displaynone">
<strong>Message Sent!</strong>
You will be directed to Payment Page. <a href="https://www.paypal.com/cgi-bin...." class="alert-link">Click here</a> to make a payment.
</div>
</form>
</div>
</div>
<div class="popover fade" style="top: 357px; left: 521.109px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content"><p>Enter your family name as the family name appears on your passport under the Family Name or Surname field.</p>
</div>
</div>
</div>
<!-- 1 -->
<!-- Modal Data starts here -->
The popover should be generated dynamically from the information in the span I believe.
<span rel="popover" data-placement="bottom" data-content="Enter your family name as the family name appears on your passport under the Family Name or Surname field." data-original-title="" style="cursor: pointer;">?</span>
I would remove the following html and re-test.
<div class="popover fade" style="top: 357px; left: 521.109px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content"><p>Enter your family name as the family name appears on your passport under the Family Name or Surname field.</p>
</div>
</div>
</div>
<!-- 1 -->
@PaulOB sir, Yes absolutely. Issue has gone. It is such a big page how did you(and @m_hutley ) got the clue what exactly was causing the issue.
There is one more issue. If you search → More Info and then click than the Modal Popup opens up in the middle of the page as the CSS governing it is →
.modal.fade.in {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
But If you fill nothing the same modal POP UP appears stating unfilled fields to be filled, but that modal despite using the same CSS appears at the top, in fact, it appears as if it submerged in the top border. why the anomaly?
I hovered my mouse over where the cursor wasnt a text input I bar, right clicked, and Inspected the thing my mouse pointer was hovering over at the time. Took me straight to it.
In the style for .modal you have supplied a negative top and left margin ( margin: -250px 0 0 -280px;).
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
width: 560px;
margin: -250px 0 0 -280px;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.3);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.3);
box-shadow: 0 3px 7px rgba(0,0,0,.3);
-moz-background-clip: padding-box;
background-clip: padding-box;
}
However you also have this rule which negates that margin on the info modals (but not the ‘not filled in’ modal).
.entry .entry-content > *, .entry .entry-summary > *{margin:32px 0}
I’ve no idea why you have that negative margin in .modal so I suggest you comment it out and see what happens 
Sir, where did you see that rule as I checked both in my style.css and shortcode.php and I could not find that. I even could not find that in script.js.
Quite possible WordPress is throwing that.
I have done a GIF Here.
Structure of all the GIF’s are the same here, but then why one is ana anamoly. If we remove translate CSS part than error modal seems to fit well, but then others such as more info, one deviates.
transform: translate(-50%, -50%);
You want the transform but you need to get rid of the margin as the margin will only work on elements of the exact same size. They are conflicting rules as they are both effectively doing the same thing.
The styles are all there to be seen in the devtools window you just need to highlight the modal and all relevant styles are listed. Just scroll down to view all the sources. The css file they come from are also listed.
It seems you just need a bit of practice with devtools to save you time
sir, You mean this one →
I tried deleting this, but we didn’t get the anticipated result.
That CSS is actually coming from WP default theme.
No it’s the negative margins you want to remove. I’m away from the computer until this afternoon so I’ll clarify then
Ok Thankyou so much. I will wait for the input.
What you need to do is add margin:0 to the rule at line 219 in style.css that is defined for .modal.fade.in.
.modal.fade.in {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
margin: 0;
}
If you look at the 2 screenshoits I have highligted the areas in red for the 2 modals so that you can see the negative margin is present on one rule and not the other.
Alternatively you could just remove the margin from this rule.
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
width: 560px;
margin: -250px 0 0 -280px;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.3);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.3);
box-shadow: 0 3px 7px rgba(0,0,0,.3);
-moz-background-clip: padding-box;
background-clip: padding-box;
}
Of course you would still need the margin:0 in the.modal.fade.in rule because some of your modals are within the context of that universal selector rule I already mentioned.
Thanks sir. It worked.
