I have a Wordpress site, that uses the Contact Form 7 plugin and the reCAPTCHA functionality that comes with that, and that works great. I just put that part in place, everything is automatic. But now I'm trying to add a reCAPTCHA to another form (on page form1.php) that isn't set up with Contact Form 7. This is on a PHP page that basically includes the Wordpress header and footer, but does its own thing in the middle. One key point is that the footer includes one of the forms from Contact Form 7, so it's on every page on the site.
I followed Google's instructions, forgetting I had the footer form. Then I saw an error in Firebug Error: ReCAPTCHA placeholder element must be empty
That brought me to this StackOverflow topic here. The only answer there by user easy going says that they had the same error when they realized they had imported the library twice.
Ok, that's what I did too I realized. So, I can remove the script inclusion of https://www.google.com/recaptcha/api.js in my code since it's already included by Contact Form 7 (I see it in the source). I noticed Google had instructions for rendering multiple widgets, I checked it out. But the problem is that the script include line specifies the onload callback function. Big problem. I can't change that because Contact Form 7 puts that in, and I can't make a callback function of the same name since it's already used. Of course I don't want to mess with anything that Contact Form 7 does. But as a result, I don't know how to get it to call my callback function in form1.php which is where my HTML element is specified to render the captcha.
Do you see any way around this issue? Any help is greatly appreciated!
Here is the resolution:
Contact Form 7 supports multiple reCaptcha, just need the right HTML markup to use it.
As you can see in the wp-content\plugins\contact-form-7\modules\recaptcha.php, and also in the HTML, the trick is:
Your non-CF7 reCaptcha must be just inside a form element, like this:
var verifyCallbackY = function(response) {
/** your stuff... */
alert(response);
};
<form id="recaptcha-cf7-migr"> <!-- the form element is important! This is what CF7 fetch one by one to find recaptchas... -->
<div
id='yRecaptcha'
class="wpcf7-form-control g-recaptcha wpcf7-recaptcha captcha-hfs"
data-sitekey="*********************************qkuila"
data-callback="verifyCallbackY"></div>
</form>
Related
We want to move away from DNN html/text and replace with with 2sxc-Content.
But in some pages, it require to have javascript injected into the content.
Exp case: tracking user when clicking the Link on content.
TinyMCE had option for allowing Javascript:
tinymce.init({ ..... extended_valid_elements : "script[language|type|src]" });
But we cannot found any information on 2sxc-documentation for configure it, we need it to allowing insert Javascript to wysiwyg.
Right now, we change the Input Type from wysiwyg editor into string/text, and it doesn't look nice for user.
I believe I know what you're trying to do but it's quite dangerous (XSS, etc.), so let me suggest some alternatives:
Use the Snippet App to just inject JS Snippets where needed
Create a convention placeholder like ENABLETRACKING and make your razor-code replace this when rendering the HTML.
I highly suggest you use the snippet app - see https://2sxc.org/apps/app/snippet-inject-v3-hybrid-for-dnn-and-oqtane
I am currently using the Trigger Email extension from Firebase to send emails whenever someone is invited to use the app by another user. I configured everything correctly and it is working perfectly except for one thing which is clickable links in the email.
I am using Handlebars with a template which is defined within a Firestore document. The template is made with HTML and looks like this:
<p>Hello {{invitedUser.firstName}},</p>
<p>You've been invited by {{user.fullName}} to join them on App Name here. By clicking on the link below you can accept this invitation.</p>
<p><a>{{inviteUrl}}</a></p>
<p>Best,<br>App Name here</p>
The email will be delivered but the inviteUrl is not clickable, it does display the url within the email. I also tried it using three brackets like {{{inviteUrl}}}.
I have also tried the following:
<p>Hello {{invitedUser.firstName}},</p>
<p>You've been invited by {{user.fullName}} to join them on App Name here. By clicking on the link below you can accept this invitation.</p>
<p>Accept invitation</p>
<p>Best,<br>App Name here</p>
But in this case the email is not delivered at all.. I don't know whats going wrong there. If I do the same but define a url directly instead of using inviteUrl the url is displayed but not clickable.
I have also seen some weird cases where I pasted a html example of a link online in my html and it worked and it stopped working whenever I modified the url, even when I changed the url back to the original one which was working before.
Using helpers for handlebars is not really an option as far as I have read as I am using the Trigger Email extension.
Maybe something is going wrong with storing the HTML in a string field in Firestore but I tried everything I know which is why I am asking this question here.
Alright, found the answer myself...
I was creating the Firestore mail objects from node js and the url I was using was of type any, casting it to String made it work.
The data object was:
{
inviteUrl: dynamicLink,
}
Changing it to this fixed it:
{
inviteUrl: String(dynamicLink),
}
The working html is:
Accept invitation
I'm implementing a slide-in-on-scroll newsletter signup form on our site, which is built as AMP-native.
I added a button that hides the div on tap using amp-bind, but I'm struggling to get my head around how to save the closed state with cookies/localStorage in AMP.
I've gone through the favorite button example code - https://ampbyexample.com/advanced/favorite_button/ (as recommended here on SE), but I don't see how it relates to this particular use-case, especially with the use of amp-list.
Based on what I've read and few examples I found the credentials="include" attribute is needed, as is a valid CORS json endpoint and an auto generated client id appended to the endpoint url using AMPs variable substitution, but I'm not sure how to put it all together.
I took a stab hacking something together using the favorite button example, but the tutorial doesn't say much about how to setup the CORS endpoint and that particular example is for storing multiple likes to a single endpoint, as apposed to storing a specific users viewing preferences.
Here is my rough (poking-around-in-the-dark) stab at the code:
<form method="post"
id="side-newsletter-wrap"
action-xhr="/prefs&clientId=CLIENT_ID(prefs)"
target="_top"
on="submit:AMP.setState({
showSideNewsletter: !showSideNewsletter
});
submit-error:AMP.setState({
showSideNewsletter: !showSideNewsletter
});">
<button on="tap:side-newsletter-wrap.hide" class="close-button"><i
class="fa fa-times"></i></button>
<amp-list width="320"
height="360"
credentials="include"
items="."
single-item
src="/prefs&clientId=CLIENT_ID(prefs)">
<template type="amp-mustache">
{{#.}}
<?php winefolly_load_fragment('newsletter-embed'); ?>
{{/.}}
{{^.}}{{/.}}
</template>
</amp-list>
</form>
For the prefs endpoint, I'm guessing I'd need to register a new endpoint in WordPress that outputs simple array with the preferences?
Something along the lines of:
{
showSideNewsletter: "true",
winesIndexView: "grid",
winesIndexSort: "title"
}
I also tried the amp-user-notification component (which has the closed state built in) but that felt a bit hacky and the newsletter embed code (via iframe) doesn't get loaded due to a known bug - https://github.com/ampproject/amphtml/issues/18995).
Any suggestions would be much appreciated.
Chris
You're right amp-user-notification is the correct approach. Is there a way to implement the newsletter form in AMP until the amp-iframe bug is fixed?
Another way is to use amp-access, which allows you to change the layout of the page on page load. You have to store the user preference server-side though using the READER_ID to identify the user. Storing this server-side is required as you might not be able to write cookies if the page is served from the AMP Cache due to ITP 2.0.
I am trying to show an alert when the form is submitted.
I added this code to "Additional Settings" on Contact Form 7 plugin (Version 4.2.2)
on_submit:"alert('Submitted');"
Nothing appears.
No errors nor warnings at console
No errors nor warnings at firebug
I guess no Javascript conflict since Contact Form 7 succesfully
sends emails
I am sure that form is "submitted" because i can see Contact
Form 7 form validation errors
Any ideas how to solve or debug further this issue?
It is not easy to take a guess without seeing the source code but I feel happy today.
Is your form working at all?
If not, it is probable that Contact Form 7’s JavaScript is not functioning on your site.
I’ll show you a few possible causes for this.
JavaScript file is not loaded
This is the cause that I’ve been seeing the most recently. This is due to your template, which is missing calling functions for queuing JavaScript. The functions required are wp_head() and wp_footer(), and they are in header.php and footer.php, respectively, in most correct themes.
Conflicts with other JavaScript
Many plugins and themes load their own JavaScript. Some of them may have been created incorrectly and therefore conflict with other plugins. In most cases, you can find JavaScript errors with Firebug, an add-on for Firefox, when such conflicts occur.
HTML structure is not valid
Like other JavaScript, Contact Form 7’s JavaScript traverses and manipulates the structure of HTML. Therefore, if the original HTML structure is not valid, it will fail to work. You can check whether your HTML is valid or not with an HTML validator. I recommend the W3C Markup Validation Service for use in such a case.
My advice is to use CF 7 default way of implementing your idea - we'll call it:
"1. Best option".
At WP Dashboard, go to Contact (CF7) and choose your form and go to the tab called "Additional Settings".
There, you can add similar code like this:
on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"
If you set on_sent_ok: followed by a one-line JavaScript code, you can tell the contact form the code that should be performed when the mail is sent successfully. Likewise, with on_submit:, you can tell the code that should be performed when the form submitted regardless of the outcome.
On both of the actions, you can use every kind of JS code like you would in your .js file:
on_sent_ok: "some js code here"
You can use it to call functions like this:
on_sent_ok: "your_function();"
Or write some code (this one redirects to thank you page):
on_sent_ok: "document.location='/thank-you-page/';"
2. And another option is to handle it with jQuery:
Contact Form 7 is keen to emit a number of Javascript events that bubble up to the document object. In version 4.2 they can be found in contact-form-7/includes/js/scripts.js. If you're using jQuery you can access those events like this:
$(document).on('spam.wpcf7', function () {
console.log('submit.wpcf7 was triggered!');
});
$(document).on('invalid.wpcf7', function () {
console.log('invalid.wpcf7 was triggered!');
});
$(document).on('mailsent.wpcf7', function () {
console.log('mailsent.wpcf7 was triggered!');
});
$(document).on('mailfailed.wpcf7', function () {
console.log('mailfailed.wpcf7 was triggered!');
});
EDIT:
Some of these jQuery options are used but somehow deprecated so if you encounter problems, try using eg. 'wpcf7:mailsent' instead of 'mailsent.wpcf7'.
The same format goes for other option, actually all the options are observable in the mentioned file:
wp-content/plugins/contact-form-7/includes/js/script.js
do you have any link for us to further check this? It's pretty hard like this.
But: "I am sure that form is "submitted" because i can see Contact Form 7 form validation errors" -> is it server-validation or frontend-validation? Maybe it is NOT send?
All the best
I think something is blocking your popup.
Try debugging using "console.log", so you can eliminate this as a potential issue:
on_submit:"console.log('Submitted');"
I have a site which is using DNN (DotNetNuke) as a content management system. I am using another site for my event registrations. I have sent them my template; which displays the basics including a hover menu with many different items in it.
Issue is - as I update the menu on my site using DNN, I need it to be reflected on the site using my template - without me having to send them a new file. Anyone have suggetsions on how to approach this?
I don't want to send the events provider all of the DNN DLLs as well as my database login information in order to render the menu.
I created a page on my site that is something like 'menu.aspx' - this produces the menu in HTML format, however it has tags like in it that I'd like to remove before serving it to them.
What is the best approach for this? Do I need to write a custom server control using XMLHttp? Can I accomplish this in Javascript?
Any advice much appreciated.
Thank you!
If both sites are hosted on the same domain (eg site1.domain.com and site2.domain.com) you can use JavaScript and XmlHttpRequest to insert code from one site to another. Otherwise, the Same Origin Policy prevents you from using AJAX.
If they're not on the same domain but you have access to the page on their website, you can simply include there a JS script from your site :
<script type="text/javascript" src="http://yoursite.com/code.js"></script>
In the JS, simply document.write() what you want on the page. This way, you can easily change the content of the page on their site without having to send them a new file.
Finally, you can also use an iframe on their site, pointing to a page on yours.
EDIT: As Vincent E. pointed out, this will only work if they're on the same domain - my bad.
If you are unwilling or unable to use frames, then I would set up an ashx on your DNN server which renders the menu (if you've got it in a user control all the better, as you can just instatiate it and Render it directly to the output stream) and then just make an Ajax call to that from your events page and insert it directly into the DOM.
Here's a quick and hacky jquery-based example of the events page end of things:
<script type="text/javascript">
function RenderMenu(data)
{
$('#Menu').html(data);
}
$(document).ready(function() {
$.ajax({
type : 'GET',
url : 'http://localhost/AjaxHandlers/Menu.ashx',
data : '',
success : RenderMenu,
});
});
</script>
You'll want an empty div with the ID 'Menu' on the page where you want your menu to sit, but apart from that you're good to go.
If for whatever reason you can't get the menu HTML in an isolated way, then you'll need to do some text processing in RenderMenu, but it's still do-able.
I am not a web expert, so don't shoot me.
Can't you just put their registration form into an iFrame in DNN ?