I am trying to set up a form tracking with Woopra on my WordPress website but it does not work.
Below my HTML form :
<form id="subForm" class="af-form-wrapper wpcf7-form" action="http://campaign.clever-age.com/t/r/s/kuuhpd/" method="post" data-mautic-form="conferencemonitoringecp16">
<input id="fielddrhhqlu" class="text" name="cm-f-drhhqlu" required="" type="text" placeholder="Nom ( obligatoire )" />
<input id="fielddrhhqo" name="cm-f-drhhqo" required="" type="text" placeholder="Prenom (obligatoire)" />
<input id="fielddrhhqn" name="cm-f-drhhqn" required="" type="text" placeholder="Société (obligatoire)" />
<input id="fielddrhhqb" name="cm-f-drhhqb" required="" type="tel" placeholder="Téléphone (obligatoire)" />
<input id="fieldEmail" name="cm-kuuhpd-kuuhpd" required="" type="email" placeholder="Adresse E-mail (obligatoire)" />
<button id="mauticform_input_magento114form_submit" name="mauticform[submit]" type="submit">Recevoir le guide </button>
</form>
I would like to track name, company and email data only. Below my JS script :
<script>
woopra.call('trackForm', 'Magento2', 'subForm', {
identify: function(form) {
return {
Name: form.cm-f-drhhqlu,
Company: form.cm-f-drhhqn,
Email: form.cm-kuuhpd-kuuhpd
};
},
});
</script>
Any help is greatly appreciated ! :-)
Below my solution.
HTML :
<form id="subForm" class="af-form-wrapper wpcf7-form" action="http://campaign.clever-age.com/t/r/s/kuuhpd/" method="post" data-mautic-form="conferencemonitoringecp16" onsubmit="identify()">
<input id="fielddrhhqlu" class="text" name="cm-f-drhhqlu" required="" type="text" placeholder="Nom ( obligatoire )" />
<input id="fielddrhhqo" name="cm-f-drhhqo" required="" type="text" placeholder="Prenom (obligatoire)" />
<input id="fielddrhhqn" name="cm-f-drhhqn" required="" type="text" placeholder="Société (obligatoire)" />
<input id="fielddrhhqb" name="cm-f-drhhqb" required="" type="tel" placeholder="Téléphone (obligatoire)" />
<input id="fieldEmail" name="cm-kuuhpd-kuuhpd" required="" type="email" placeholder="Adresse E-mail (obligatoire)" />
<button id="mauticform_input_magento114form_submit" name="mauticform[submit]" type="button" onclick="identify();">Recevoir le guide </button>
</form>
JS :
<script type="text/javascript"><!--
$(function() {
woopra.call('trackForm', 'Magento', '#subForm', {
});
});
function identify() {
var emailField = document.getElementById('fieldEmail').value;
var nameField = document.getElementById('fielddrhhqo').value + " " + document.getElementById('fielddrhhqlu').value;
var companyField = document.getElementById('fielddrhhqn').value;
woopra.identify({
email: emailField,
name: nameField,
company: companyField
}).push(submitForm);
}
function submitForm() {
var form = document.getElementById("subForm");
form.submit();
}
--></script>
Hope it helps if someone is facing the same issue.
Related
I am importing a form written in GoogleApps Script into an iframe on a page built with Squarespace but for the life of me cannot prevent the form from submitting. I am using:
window.addEventListener( 'load', preventFormSubmit );
as suggested in GAS documentation but this does not seem to be triggering the preventFormSubmit function. Instead, when the submit button is clicked the form submits and goes to a blank google page. Also the alerts in the preventFormSubmit function (now commented out) never display which suggests that the form is never called.
I have spent days on this, cannot find an answer anywhere and can no longer see the woods for the trees. Any clues as to what I am doing wrong?
Squarespace is a website builder which enables one to embed code, in this case as an iframe.
My code:
js.html:
<script>
function preventFormSubmit() {
//alert( "prevent form submit triggered" );
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
//alert( "forms prevented from submitting: " = forms.length );
}
window.addEventListener( "ready", preventFormSubmit );
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
html:
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" onsubmit="handleFormSubmit(this)" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="submit" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
</body>
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="button" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
<script>
window.onload = function() {
document.getElementById("alternative-booking-form-1").addEventListener( "ready", handleFormSubmit );
}
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
</body>
I want to extract in my Controller.java this way (#PathVariable Integer id):-
// Get /http://localhost:9091/getFeedback/138
#GetMapping("/getFeedback/{id}")
public Feedback getFeedback(#PathVariable Integer id) {
return service.getFeedback(id);
}
Not this way:-
#GetMapping("/getFeedback")
public Feedback getFeedback(#RequestParam Integer id) {
return service.getFeedback(id);
}
I tried :
<form method="Get" action="getFeedback/">
ID: <input type="text" name="name" id="name" /><br />
<input type="submit" value="Submit" />
</form>
You can use onsubmit:
<form
method="Get"
action="getFeedback/"
onsubmit="this.action = this.action + this.name.value; this.submit();"
>
ID: <input type="text" name="name" id="name" /><br />
<input type="submit" value="Submit" />
</form>
I can't seem to get past the Login page.
Here is an abridged version of my login page (aciworldwide.com/support) using IE View Source:
<html ...>
<head ...></head>
<body>...
<form method="post" action="/support" id="mainform">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="<stuff>" />
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['mainform'];
if (!theForm) {
theForm = document.mainform;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
...
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="87894A7C" />
<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="<stuff>" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="<stuff>" />...
<div id="maincontent_0_content_0_pnlLogin" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'maincontent_0_content_0_butLogin')">
<h2>HELP24 eSupport Portal</h2>
<input type="hidden" name="startURL" value="" />
<input type="hidden" name="loginURL" value="" />
<input type="hidden" name="useSecure" value="true" />
<input type="hidden" name="orgId" value="00D700000008gWM" />
<input type="hidden" name="portalId" value="06070000000DZJN" />
<input type="hidden" name="loginType" value="2" />
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="80" value="" class="captionblack" />
<label for="password">Password:</label>
<input type="password" id="password" name="password" maxlength="80" class="captionblack" />
<input type="submit" name="maincontent_0$content_0$butLogin" value="Log in" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("maincontent_0$content_0$butLogin", "", false, "", "https://esupport.force.com/CommunityLogin", false, false))"
id="maincontent_0_content_0_butLogin" />
</div>
...
</form>
</body>
</html>
I wrote this crawler to process the login page:
import scrapy
class ACIspider(scrapy.Spider):
name = "aci"
allowed_domains = ["aciworldwide.com"]
start_urls = [
"http://aciworldwide.com/support.aspx"
]
def parse(self, response):
title = response.xpath('//title/text()').extract()
print 'Starting title is ' + title[0]
return scrapy.FormRequest.from_response(
response,
formdata={'username': 'myuser#my.com', 'password': 'mypass'},
clickdata={ 'type': 'submit' },
callback=self.after_login
)
def after_login(self, response):
print 'Hello next page'
# check login succeed before going on
if "authentication failed" in response.body:
self.log("Login failed", level=log.ERROR)
return
title = response.xpath('//title/text()').extract()
print 'Title is ' + title[0]
Here is an excerpt from my output:
[time] [aci] DEBUG: Redirecting (301) to https://www.aciworldwide.com/support.aspx> from
p://www.aciworldwide.com/support.aspx>
[time] [aci] DEBUG: Crawled (200) https://www.aciworldwide.com/support.aspx> (referer: None)
Starting title is Support
[time] [aci] DEBUG: Crawled (200) https://www.aciworldwide.com/support.aspx> (referer: https://w
ww.aciworldwide.com/support.aspx)
Hello next page
Title is Support
Note that I print the page title in the beginning and after the callback. It is the same page. What am I doing wrong that the response from the login is not the next page after authentication?
I have a simple form and I want to pull a url parameter and populate one of the hidden fields with that value.
for example the url is www.myurltest.html?placement=xyz
here is my form code with js. when I load the page, the value xyz is not being filled into the hidden field. The way I am checking is after page refresh, I check the source to see if the value is in the html. Please let me know what is wrong, I'm also not a developer by trade so this is extra challenging.
<script>
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
<form method="post" action="http://xyz.com" >
<ul><li ><label>First Name:</label><input name="firstName" id="firstName" type='text' value="" maxlength='255' tabIndex='1' ></li>
<li ><label>Last Name:</label><input name="lastName" id="lastName" type='text' value="" maxlength='255' tabIndex='2' /></li>
<li ><label>Email:</label><input name="email" id="email" type='text' value="" maxlength='255' tabIndex='3' /></li>
<li ><label>Company Name:</label><input name="name" id="name" type='text' value="" maxlength='255' tabIndex='4' /></li>
<li>
<input type='submit' foo=en_US value='testtest' name='submit' />
</li>
</ul>
<input type="hidden" name="placement" id="placement" value="" />
<script type="text/javascript">
document.getElementById("placement").value = getParameterByName("placement");
</script>
</form>
The value won't appear in the source. If you use Chrome F12 dev tools, you can inspect the value instead. It seems to be working for me.
<html>
<head>
<script type="text/javascript">
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
</head>
<body>
<form method="post" action="http://xyz.com" >
<ul>
<li><label>First Name:</label><input name="firstName" id="firstName" type='text' value="" maxlength='255' tabIndex='1' ></li>
<li><label>Last Name:</label><input name="lastName" id="lastName" type='text' value="" maxlength='255' tabIndex='2' /></li>
<li><label>Email:</label><input name="email" id="email" type='text' value="" maxlength='255' tabIndex='3' /></li>
<li><label>Company Name:</label><input name="name" id="name" type='text' value="" maxlength='255' tabIndex='4' /></li>
<li><input type='submit' foo=en_US value='testtest' name='submit' /></li>
</ul>
<input type="hidden" name="placement" id="placement" value="" />
<script type="text/javascript">
document.getElementById("placement").value = getParameterByName("placement");
</script>
</form>
</body>
</html>
I have this Perl script that I didn't write (nor can I write Perl), inserts a logout link if you're logged in:
sub print_loginform {
$web_content .= qq{
</form>
};
}
if ($logged_in_as) {
$addlink = 'LogoutMy Account';
}
$web_content .= qq{
<div id="menu">
<div id="menuheader">Menu</div>
Home
Who's online?
Highscores
Rules
About
Guilds
Houses
Donations
Forum
Lost Password
Create Account$addlink
<div id="menufooter"></div>
};
if (!$logged_in_as) {
&print_loginform();
}
$web_content .= "</div>";
Would there be a way to add some inline css when the user is logged in to do something really hacky and just display:none the loginpanel?
I tried this:
if ($logged_in_as) {
$addlink = 'LogoutMy Account';
$removelogin = '<style type="text/css" media="screen">.loginpanel:display:none;</style>';
}
Safe to say it didn't work but since I'm not a Perl programmer I can't really figure this out, this is a total shot in the dark for me, and I feel like a bit of noob for even coming and asking for help.
The documentation I tried to find on Perl was sparse at best too.
Here's Mathew's code, this doesn't work (probably my fault)
sub print_loginform {
$web_content .= qq{
</form>
};
}
if ($logged_in_as) {
$addlink = 'LogoutMy Account';
}
$web_content .= qq{
<div id="menu">
<div id="menuheader">Menu</div>
Home
Who's online?
Highscores
Rules
About RealOTS
Guilds
Houses
Donations
Forum
Lost Password
Create Account$addlink
<div id="menufooter"></div>
<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</div>
<form method="POST" action="/character/">
<input type="hidden" name="page" value="character">
Character Search<input type="text" name="searchchar" value="" size=15><br><br>
<input type="submit" value="Look up">
</form>
};
if (!$logged_in_as) {
&print_loginform();
$web_content .= qq{<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</div>
};
}
$web_content .= "</div>";
Well that's not correct css:
<style type="text/css" media="screen">.loginpanel{display:none;}</style>
You might also consider putting the login panel
<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</div>
below this line
if (!$logged_in_as) {
&print_loginform();
like so:
if (!$logged_in_as) {
&print_loginform();
$web_content .= qq{<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</div>
};
}
now remove this chunk:
<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</div>
only the one that appears below:
<div id="menufooter"></div>
and finally reverse this part:
$web_content .= qq{<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</div>
};
&print_loginform();
though at this point you might as well remove print_loginform...
Instead of hacking the css, maybe you can modify $webcontent.
if ($logged_in_as) {
$addlink = 'LogoutMy Account';
}
$web_content .= qq{
<div id="menu">
<div id="menuheader">Menu</div>
Home
Who's online?
Highscores
Rules
About RealOTS
Guilds
Houses
Donations
Forum
Lost Password
Create Account$addlink
<div id="menufooter"></div>
};
if (!$logged_in_as) {
$web_content .= qq{<div class="loginpanel">
<form action="" method="POST">
<input type="hidden" name="auth" value="1">
Account Number:
<input type="text" name="user" value="" size=15>
Password:
<input type="password" name="pass" value="" size=15>
<input type="submit" name="submit" value="Login">
</form></div>
};
}
$web_content .= "</div>";
I think you can omit the print_loginform function