How to catch Mailchimp validation error (mce-inline-error) - mailchimp

this is my email form
<form action="https://gmail.us11.list-manage.com/subscribe/post?u=XXXXXX" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll" style="display: flex;flex-direction: row;">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fb16c0b54b243c41cf0ba431c_6cbe3da72c" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="rehab-btn-secondary">Send</button>
</div>
</div>
</div>
</form>
however if I input "aaa" as email address which is wrong. I am getting this error
Which obviosly breaks our UI,
by checking on the HTML in dev tools, it creates a new div with id "mce-inline-error"
out of the blue, how can i control this error so i can style it properly in our UI?
This is getting annoying google cant give me answer.
If there are no answers, what type of work around can you guys suggest?

Related

tailwind behaves differently on iphone

I have a form that contains an email input and a submit button. On Iphone, when I type something on email and delete it, button slide down a little bit. I use tailwind css and what causes this problem?
<form wire:submit.prevent="submit">
<span class="inline-grid">
<input type="text" name="email" wire:model.defer="email" class="form-control relative flex-auto desktop:rounded-lg below-desktop:rounded placeholder-gray-300 desktop:h-14 below-desktop:h-8 xl:w-72 small-desktop:w-60" placeholder="{{__('E-mail')}}" aria-label="Search" aria-describedby="button-addon2" style="border-radius: 4px;">
</span>
<button type="submit" class="bg-blue-400 text-base desktop:rounded-lg below-desktop:rounded text-white desktop:h-14 below-desktop:h-8 px-6 desktop:ml-2 xl:w-32 small-desktop:w-24" style="border-radius: 4px;">{{ __('Send') }}</button>
</form>

Submitting form doesn't work after using Recaptcha v3

I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed.
When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right.
I'm using Laravel 6.
My form template looks like this:
<div class="row mt-150">
<div class="col-12 text-center text-white">
<h1>Contact</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12">
<form action="{{route('contact_form')}}" method="POST">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
There is also an app.js included which contains the captcha callback function:
function onSubmit(token) {
document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;
Can someone give me a hint what I'm doing wrong implementing recaptcha?
I tried to do it just like this:
Google reCaptcha v3
This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form
<form action="{{route('contact_form')}}" method="POST" id="contactForm">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
Then in javascript get the form and trigger submit on it
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;

Mailchimp - Redirect to thank you page with embedded form

I followed the following post but the redirection is still not effective ...
Mailchimp - Redirect to thank you page
I can't find a way to make it work. The embedded form is embedded here on my website:
And the html code is:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://travel-homes.us18.list-manage.com/subscribe/post?u=ab5689b8019de3c007fe4634b&id=84b4167b78" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Main Guest</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">E-mail <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-group[2217]">Apartment </label>
<select name="group[2217]" class="REQ_CSS" id="mce-group[2217]">
<option value=""></option>
<option value="1">Le Wilson</option>
<option value="2">Le Rebberg</option>
<option value="4">Le Bright'n Cosy|Comfy Studio - City Center</option>
<option value="8">L'Alsacien</option>
<option value="16">L'EastSide</option>
<option value="32">Le Pfeffel</option>
<option value="128">Le Bredele</option>
<option value="256">Colmar Unique Apartment</option>
</select>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ab5689b8019de3c007fe4634b_84b4167b78" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Send" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I hope somebody can find a solution to this unsolvable issue.

Wget post data with text box that has randomly generated value?

I'm trying to use Wget to log in to my router and make a complete mirror of all the pages. The problem is, the router login page does not use the traditional "user" & "pass" ID for the text fields. It has a 'Password' and 'VmWpsPin' field. The ID for the 'Password' field is randomly generated every time the page is loaded/refreshed/requested. Below is the source code of the relevant part of the router page:
<body lang="en" class="superhubGUI" onload="javascript:Init()">
<div class="globalHeader">
<div id="nav">
<div id="logo">
<h1 id="header">Super Hub</h1>
</div>
<div id="buttons">Router Status
</div>
</div>
</div>
<div id="content">
<div id="container">
<div id="main">
<div class="panel noTitle" style="*padding:38px 30px 0px 30px">
<div id="login" class="inner">
<div class="inner-section">
<h2>Welcome to your Virgin Media Super Hub 2ac</h2>
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;top:-20px;" class="field formField noHint password clearfix">
<label for="password">Settings Password</label>
<input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="KsCAqiihZb" id="password" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>Password can be found on the base of your Super Hub</span>
</div>
</div>
<div style="position:relative;top:-25px;" class="field formField noHint password clearfix">
<label for="password">WPS PIN</label>
<input type="text" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="VmWpsPin" id="WpsPin" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>WPS PIN can be found on the base of your Super Hub</span>
</div>
</div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span>
<br/>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
</div>
</div><span class="pFoot"> </span>
</div>
</div>
My question is, how can I use Wget to login to the router when the ID changes at every request, is there somehow a way to request the page, parse the value out and then submit the form using something like --keep-session?
Or is there an alternative solution outside of Wget to automate the process? Any help is much appreciated.

Google Recaptcha incorrect-captcha-sol

I've got a Google recapture that refuses to accept my answers (error: incorrect-captcha-sol) yet I think I've test every step without any problems. Its on a simple HTML/CSS type site.
I can see in Firebug that the response and challenge are being sent from the contact form.
I've echoed back the fields in php and they are the same I'm sending (match firebug)
I've got a table on the same page but its not part (or in any way related) to the contact form.
HTML code:
<!-- Contact Form -->
<div class="row">
<div class="span9">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name (Required)" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address (Required)" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message (Required)" name="message" rows="15" cols="40" maxlength="150"></textarea>
</p>
<p class="contact-challenge">
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input id="recaptcha_response_field" type="text" name="recaptcha_response_field" />
<div>Get another CAPTCHA</div>
<div class="recaptcha_only_if_image">Get an audio CAPTCHA</div>
<div class="recaptcha_only_if_audio">Get an image CAPTCHA</div>
<div>Help</div>
</div>
</p>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=XXXX">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/challenge?k=XXXX" height="300" width="500" frameborder="0"></iframe>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<p class="contact-submit">
<a id="contact-submit" class="submit" href="#">Send</a>
</p>
<div id="response">
</div>
</form>
</div>
PHP
require_once('recaptchalib.php');
$privatekey = "XXXX";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$details["recaptcha_challenge_field"],
$details["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
$this->response_html .= '<p>The code you entered was incorrect, please try again. ' . $resp->error . '</p>';
$this->response_status = 0;
}
Thanks
I eventually figured it out I didn't initialize $resp before I used it.
So I've now got
$resp = null;
before the start of the IF statement and the code is now working correctly.
That's what I get for copy/pasting Google's code and not checking it carefully!

Resources