I want to set up a content locker to prevent users from scraping my website but still allow search engine bots to see the full content, somehow exclude the code from being applied to bots, only to visitors.
The content locker doesn't really need to be very advanced, it can be a simple captcha challenge or even just a simple button like this one:
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
Can anyone help me out please?
Related
I have an HTML form I'm custom coding that integrates with a drip (email platform) form. And I'm trying to get it to show a "success" message (e.g. "thank you for signing up to our newsletter".
What would be the best/cleanest way be to adapt the HTML to allow that message after a submit action?
Here's my code so far:
<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
Thanks!
Start off by creating the message and styling it properly. Maybe something like this...
<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
<p class="subscribe-form__thanks">Thanks for subscribing!</p>
You could even wrap the thank you in a div if you would like and add a "thumbs up" icon to fill the space.
Once you're happy with your design, add this to you CSS (if you're using SASS/SCSS, you can add it nested within the element):
hide {
display: none;
}
and add that class to your "Thank You" message, like this:
<p class="subscribe-form__thanks hide">Thanks for subscribing!</p>
Now that that's all set up, you simply need to use JavaScript to remove the hide class from the "Thank You" message, and add it to the form, which will reveal the message and hide the form.
I'll use JQuery for brevity, but Vanilla JS will work great too!
$(".subscribe-form__submit").onClick(()=>{
$(".subscribe-form").addClass("hide");
$(".subscribe-form__thanks").removeClass("show");
});
That should all be working as desired - the form should disappear and the message should appear! The animation could be a little jarring, so have a play around with fading then hiding, and matching the height of the two divs to avoid the page having to change size.
This will hide the form, even if the fields are incorrect/incomplete, so you could look into validate.js to improve your usability if you're interested.
NOTE: This method of using the onClick() JQuery selector doesn't guarantee that the user is actually subscribed to the mailing list - your Drip API request could be incorrect, or their API could fail/be offline.
You can look into the Drip API's callback function (https://developer.drip.com/) if you're interested in making sure the user is properly subscribed, however there's no guarantee they will reply in a timely fashion, and so you'd most likely be over complicating things.
Hope this helped!!
hi i am trying to use the code I have my Google Custom Search Engine (GCSE) code:
<script async src="https://cse.google.com/cse.js?cx=009000000000000:u0000000"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
However, my Accelerated Mobile Pages (AMP) site does not allow me to add JavaScript to it, and I don't see any AMP components that allow GCSE to be integrated into an AMP site.
How can I get GCSE on my site without breaking AMP compliance?
Thank you
I added a search feature to my open source website (https://csaba.page/) with amp-form following these steps:
Create a GCSE (Google Custom Search Engine) at the CSE (Custom Search Engine) Console https://cse.google.com/ as described by https://developers.google.com/custom-search/docs/tutorial/creatingcse if you haven't already done so.
Remember your Search engine ID, it looks something like "013535696182405026577:kmxne16xdtx". You can see it on the Basics tab in the CS Console, or if you are looking at the JavaScript code it's the cx variable.
Add <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> to your head section where the other AMP includes are.
In the body add an amp-form where you want to position the search input and style the form as you need:
<div>
<form method="GET" class="search-form" action="https://www.google.com/cse" target="_top">
<div class="search-form-inner">
<input name="cx" type="hidden" value="013535696182405026577:kmxne16xdtx" />
<input name="ie" type="hidden" value="UTF-8" />
<input type="search" placeholder="Search..." name="q" required>
<input type="submit" value="Go" class="search-button">
</div>
</form>
</div>
Here are some blog posts as well:
https://csaba.page/blog/amp-google-custom-search-engine.html
https://gfw-blog.netlify.app/2018/05/11/cse-amp.html
And an initial commit: https://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/commit/96345716d620b916d1c61cb5b51941378ffc5dc6
I've an aspx page with an iframe control which host cross domain site. I'would provide a simple tool to allow user a fast "copy-past" frame url in an asp.net textbox.
Obviously, since my IFrame point to external site this kind of action is denied for security reasons.
Is there any way to get current frame url in a cross domain scenario?
I can use whichever different solution from iframe, it really isn't important for me.
If you're looking for javascript solution then this could be it:
HTML:
<input type="text" id="url" />
<button id="go">Go</button>
<br />
<iframe id="browser" width="300px" height="300px"></iframe>
Javascript:
$(document).ready(function(){
$("#go").on("click", function(){
var url = $("#url").val();
$("#browser").attr("src", url);
});
});
http://jsfiddle.net/bBhc4/
"Diving deeper" into iframe elements would cause same origin policy restrictions though
Our company uses PinPointe for email marketing and we have a Drupal 6 site with several language domains. I have created a web form except I did not create any fields in Drupal. Instead in the node Edit NOT THE NODE WEBFORM EDIT....in the node edit for the body section I added the HTML and the javascript for form. Everything works well and the data is captured to pinpointe. The problem lies in the fact that the page..upon clicking submit..actually redirects to PinPointe where I get a friendly message saying. Thanks for joining. Well I don't want this. I would like to just pop an alert saying thanks and leave the user on the page they were on. I tried this code for using jquery to do the post but it isn't loading and I suspect that's because I need it in the header not the body.
So all I want is to submit the data to pinpointe and not redirect the user. So here is where my limited Drupal knowledge runs out:
If I create the input fields in the node webform then how do I get the form to post to pinpointe?
If I create the fields dynamically in the node body (not node>>webform) I can direct the submission to PinPointe but then how do I stop the redirect?
FWIW here is the jquery I was trying to use but suspect has to go in the header http://jsfiddle.net/4xDFK/4/
FWIW here is the code for the dynamic creation:
<form action="http://na04.mypinpointe.com/...." id="webform-client-form-1375" method="post" onsubmit="return CheckForm257(this);">
<div>
<div id="webform-component-UsrEmail">
<div id="edit-submitted-UsrEmail-wrapper">
<input id="edit-submitted-UsrEmail" name="email" size="30" type="email" />
</div>
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input class="form-submit" id="edit-submit" name="op" type="submit" value=" " />
</div>
</div>
</form>
Create your custom confirmation page in Drupal. Then set up PinPointe to redirect to this confirmation page.
In the PinPointe form manager, there is a option under the 'Thank you page options' to send a signup user to a custom URL.
Good morning, I am trying and failing miserably to implement a captcha, mostly because I have no asp experience, could anyone assist?
Multiple html pages have a contact form in footer, this has form validation in place and fires off an asp page which sends an email & redirects to thanku.asp.
I wanted to add the honeypot captcha, so added another field [body] and hid it using css. I then added the code below that to check its null. When I click submit the form is processed even when hidden field has content inside, can anyone spot where I am going wrong?
<div id="captchafield">
<input type="text" name="body" value="" />
</div>
<script language=javascript>
if(!String.IsNullOrEmpty(Request.Form["body"]))
IgnoreComment();
</script>
You're going wrong by checking the field with only JavaScript; you should check that it's blank server-side and if not, then ignore / reject submission. E.g.
HTML
<div id="captchafield">
<noscript>Security field; please leave this blank</noscript>
<input type="text" name="captcha" value="" />
</div>
ASP
Dim captcha
captcha = Request.Form("captcha")
If captcha <> "" Then
Response.Redirect("badcontent.asp")
End If
' continue
What you can use JavaScript for is to hide the captcha field and / or display a message which lets users know not to fill it in if their JavaScript is off (see <noscript> in example code above). Bots / scripts will ignore the warning and fill in the field and trigger your trap.