I am using Contact Form 7 and the Google reCAPTCHA integration. I have added my keys and added the shortcode to the form. I can't seem to get the reCAPTCHA box to appear on the form. Below is the contact form code:
<ul>
<li><div class="apo-moved-label"> [text Name id:cf_name]<label for="cf_name" class="white">Name</label><span class="apo-moved-label-border"></span> </div></li>
<li><div class="apo-moved-label"> [email Email id:cf_email]<label for="cf_email" class="white">Email Address</label><span class="apo-moved-label-border"></span></div></li>
<li><div class="apo-moved-label"> [textarea Message id:cf_message]<label for="cf_message" class="white">Message</label><span class="apo-moved-label-border"></span></div></li>
[recaptcha]
<li><button class="apo-btn apo-btn-small apo-btn-white">[submit "Send Message"]</button><div class="gap"></div></li>
</ul>
Here is what I see when I view source on the form:
<div class="wpcf7-form-control-wrap"><div data-sitekey="6LcY_i8UAAAAAN0EVfgHOAeFOMsE4akLpkzAtn-J" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha"></div>
<noscript>
<div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LcY_i8UAAAAAN0EVfgHOAeFOMsE4akLpkzAtn-J" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
<div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
</textarea>
</div>
</div>
</div>
</noscript>
When I check my CSS I don't see anything blocking it from displaying.
You need to include the recaptcha library before </head>:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
If you use invisible Recaptcha 3, it will not show in the form, but it can be seen in the bottom/right corner of the browser instead.
The Contact Form 7 plugin should be including the script element to include the api.js file already. I just ran into the same problem today, with CF7 5.0.2. For some reason, CF7 is no longer including the api.js file. I can't figure why. I manually added it to the HEAD section, and the problem is now resolved.
If the recaptcha script is not loading, perhaps your theme had the <php wp_head(); ?> function removed.
I guess the site key is not entered correctly.
I just had the issue, and it turns out I was missing this line in my footer.php in my child theme:
<?php wp_footer(); ?>
The recaptcha script is indeed enqueued for inclusion in the footer part of the page, so this line is needed.
Related
I inserted a google maps iframe into a php section file of wordpress theme.
Tried many ways to center it. Nothing worked so far!
Can you help?
Here's how it looks: http://prntscr.com/hjyd4s
<div class="home-section-content
<!--
<div id="google-maps"> <!-- <div style=" margin:auto; ">
<style type="text/css">
#google-maps {
mar gin: auto;
width: 125%;
border: 3px solid #73AD21;
padding: 10px;
margin-left: auto ;
margin-right: auto ;
}
</style>
-->
<br><br><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2989.608839663209!2d-8.163739!3d41.4693985!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd24e87671374bf1%3A0x9a3a665c9521b5a4!2sR.+de+S%C3%A3o+Mateus+193%2C+4820-500+Ascens%C3%A3o!5e0!3m2!1sen!2spt!4v1511832699133"
width="1400" height="800" ali gn="center" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
I commented out that piece of code you see, as it did not work. But you might point why?
If you put the id="google-maps" on the iframe itself, it's easier to center.
<style type="text/css">
#google-maps {
display: block;
margin: 10px auto;
border: 0
}
</style>
<div>
<iframe id="google-maps" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2989.608839663209!2d-8.163739!3d41.4693985!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd24e87671374bf1%3A0x9a3a665c9521b5a4!2sR.+de+S%C3%A3o+Mateus+193%2C+4820-500+Ascens%C3%A3o!5e0!3m2!1sen!2spt!4v1511832699133"
width="1400" height="800" frameborder="0" allowfullscreen></iframe>
</div>
I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.
i am new to css .. i can easily fetch the suggestions from the back end to the suggestion div.
Height of suggestion div is set to height:auto as it is adjusted automatically depending on the suggestion as shown
<div class="suggestBox">
<div class="suggestionsBox" style="margin-left:16px">
<div class="suggestions bordered" style="height: auto; max-height: none; width:100%; overflow: hidden; padding: 0px; ">
<div class="jspContainer" style="width: 100%; height: 0px; ">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100%; ">
<div class="items_block"></div>
<div class="users_block"></div>
</div>
</div>
</div>
</div>
but as it's height is altered i.e grown .. the elements under the suggestion box or div are scattered or something like that ... do i have to change something in CSS ..
//THANX
For maintaining depth of layers in CSS there is z-index property.
Try giving it position:absolute; to remove it from the document layout.
See this tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/
I have two pictures on top of each other:
Here is the code:
<div class="picture">
<span class="name"><br/>Pavadinimas</span>
<div class="picture-content">
<div class="icons">
<div class="ico-info"><img src="images/product_mark_1.png" />
<span class="ico-info">Automatinis mechanizmas</span>
</div>
<div class="ico-info"><img class="ico-info" src="images/product_mark_2.png" />
<span class="ico-info">Miegamas mechanizmas</span>
</div>
<div class="ico-info"><img src="images/product_mark_3.png" /><br/>
<span class="info">Spyruoklės</span>
</div>
</div>
<div class="picture-grey"><img alt="" src="images/grey.png" />
</div>
</div>
<div class="picture-photo"><img alt="" src="images/pic.png" />
<div class="description1">
Ilgis/Plotis/Aukštis
</div>
<div class="description2">
Ilgis/Plotis
</div>
<div class="description3">
300/300/300
</div>
<div class="description4">
miegamoji dalis 100/100
</div>
</div>
</div>
I want the image at the top to be with rounded corners like this:
My css classes is:
.picture{
position:relative;
width:400px;
height:200px;
float:left;
margin-left:48px;
margin-right:35px;
margin-bottom:90px;
margin-top:10px;
}
.picture-content{
position:absolute;
bottom:0px;
width:360px;
height:211px;
}
.picture-grey{
position:absolute;
bottom:-65px;
left:15px;
height:243px;
width:407px;
float:left;
}
.picture-photo{
position:absolute;
width:380px;
height:223px;
-moz-border-radius: 50px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
top:0px; left:0px;
}
But unfortunately rounded corners is not working at all! Why not? Is there some issue I don't know?
you want your image round! not DIV!
.picture-photo img {
width:380px;
height:223px;
-moz-border-radius: 50px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
As an alternate answer, as long as the container .picture-photo wraps tight around the image (no visible padding), you can add the following CSS to hide the corners that are sticking out from the child element (the image):
.picture-photo {
overflow:hidden;
}
This is a old problem with firefox (and probably a few other browsers as well); it didn't crop the images until the latest firefox version:
Firefox -moz-border-radius won't crop out image?
Just out of curiosity, can you try the following?:
.picture{
position:relative;
width:462px;
height:305px;
margin:0px;
padding:0px;
background:url('http://i.stack.imgur.com/w0mOg.png') no-repeat;
background-position:50% 50%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
<div class="picture"></div>
I have the latest version of firefox so I can't check if it works on older versions as well, but it would make sense if it did. Firefox has been able to crop divs for quite some time.
I am a little bit lost. What I want to achieve is:
my own custom button
change onMouseOver etc'
keep it's size
post the information to a php server side code
What I'm missing is:
The post - I couldn't figure out how to combine js & php
The Button size - my code sets a size for the original button but after the rollover it changes
The code:
<html>
<head>
</head>
<body>
<script>
function form_on_click(frm)
{
document.buttonMore.src='bottom_more_click.JPG';
frm.submit();
}
</script>
<div style="position: absolute; left: 120px; top: 90px; background-image: url(myBackgroundPicture.jpg);
background-repeat:no-repeat; width: 800px; height: 280px; padding: 15px;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="whatever" size= "55" height="100" lang="en" dir="ltr" style="margin-top: 188px; margin-left: 95px; height: 20px; background-color: transparent; border:none;
color: #FFFFFF; font-family: Verdana; font-weight: none; font-size: 18px;">
<a onmouseover="document.buttonMore.src='bottom_more_hover.JPG'"
onmouseout="document.buttonMore.src='bottom_more_reg.JPG'"
onmousedown= "form_on_click(this.form) this.form.submit()"
onmouseup="document.buttonMore.src='bottom_more_hover.JPG'">
<img src="bottom_more_reg.jpg" name="buttonMore" height="30" width="173" border="0" alt="MORE!" style="margin-bottom:-10px; margin-left: 15px; height: 30px; width: 100px;">
</a>
</form>
</div>
</body>
UPDATED:
Oh sure.. excuse me. You're totally right. I don't know where do I have my head.
Try something else, remove this line again
onmousedown= "form_on_click(this.form) this.form.submit()"
And replace it by
href="javascript:form_on_click(this.form);"
Just a suggestion, why don't you use an...
<input type="button" />
...and then customize it in CSS?
EDIT
About the size of the button, are those jpeg files equally sized?
The easiest way would be to use JQuery. All of what you want to do can be done with just a few simple steps in JQuery. The mouseover/out submit all of it and tons more.
I fell in love with JQuery...