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>
Related
hey here is the code whenever my site is converted into the mobile view then mailto function is not working? can anyone suggest to me a solution to how he is works in mobile-view?
<form id="myForm" action="mailto:syedali6097#gmail.com" method="post" enctype="text/plain">
<h2>Win</h2>
<input name="name" type="text" placeholder="Enter Name">
<br><br>
<input name="subject" type="text" placeholder=" Subject">
<br><br>
<!-- <label>Email:-</label> -->
<input name="email" type="text" placeholder="Enter Email">
<br><br>
<input name="number" type="number" placeholder=" Enter Phone Number">
<br><br>
<p class="text-center">Fave Vape Flavour:-</p>
<textarea type="text" name="Description" size="50" rows="5" placeholder="Type Message"></textarea>
<br><br>
<input type="submit" value="Send" onclick="myFunction()">
<input type="reset" value="Reset">
</form>
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.
I'm trying to get the 'contact' form on my page in the middle of the webpage.
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Uw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Uw e-mail:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Uw vraag:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Verstuur bericht" />
</ul>
</form>
use css:
#contact_form {width:400px;display:block;margin:0 auto;}
contact_form {position:absolute; top:50px;left:10px;width:500px;display:block;margin:0 auto;}
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
Hi I have two forms on a page, one is a small newsletter sign up form and the other is a larger event booking form. when the large booking form is submitted it submits the small newsletter form aswell. think it has something to do with the action url.
Here is the page code:
<script type="text/javascript"><!--
function validate(f){
var regex = /^\s*$/i;
for(var i=0; i<f.elements.length; i++){
if(regex.test(f.elements[i].value)){
alert("Please fill in all fields.");
f.elements[i].focus();
return false;
}
}
if(f.user_email.value.indexOf('#',0)==-1 || f.user_email.value.indexOf('.',0)==-1)
{
alert("You must provide a VALID email address.");
f.user_email.focus();
return false;
}
return true;
}
//--></script>
<div id="eventform" />
<form action="/Booking?ename=testevent&edate=19%20October%202011&submitform=yes" method="post" onsubmit='return validate(this);'>
<fieldset class="fieldset">
<div class="leftform">
<label for="booking_name">Event: </label><br class="nobr" />
<input name="booking_name" type="text" id="booking_name" value="testevent" />
</div>
<div class="rightform">
<label for="event_date">Date: </label><br class="nobr" />
<input name="event_date" type="text" id="event_date" value="19 October 2011" />
</div>
<div class="clear"></div>
<div class="leftform">
<label for="user_name">Name: </label><br class="nobr" />
<input name="user_name" type="text" id="user_name" />
</div>
<div class="rightform">
<label for="organisation">Organisation: </label><br class="nobr" />
<input name="organisation" type="text" id="organisation" />
</div>
<div class="clear"></div>
<div class="leftform">
<label for="address">Address: </label><br class="nobr" />
<input name="address" type="text" id="address" />
</div>
<div class="rightform">
<label for="postcode">Postcode: </label><br class="nobr" />
<input name="postcode" type="text" id="postcode" />
</div>
<div class="clear"></div>
<div class="leftform">
<label for="user_telephone">Contact Number: </label><br class="nobr" />
<input name="user_telephone" type="text" id="user_telephone" />
</div>
<div class="rightform">
<label for="user_email">Email Contact: </label><br class="nobr" />
<input name="user_email" type="text" id="user_email" />
</div>
<div class="clear"></div>
<br />
<hr />
<h3>Attendees</h3>
<p>Please list the name(s) and email address(s) of those you wish to book a place at the above event.</p>
<div class="leftform">
<input placeholder="Name" name="attendee1" type="text" id="attendee1" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email1" type="text" id="attendee_email1" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee2" type="text" id="attendee2" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email2" type="text" id="attendee_email2" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee3" type="text" id="attendee3" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email3" type="text" id="attendee_email3" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee4" type="text" id="attendee4" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email4" type="text" id="attendee_email4" />
</div>
<div class="clear"></div>
<div class="leftform">
<input placeholder="Name" name="attendee5" type="text" id="attendee5" />
</div>
<div class="rightform">
<input placeholder="Email Address" name="attendee_email5" type="text" id="attendee_email5" />
</div>
<div class="clear"></div>
<br />
<hr />
<h3>Invoice Details</h3>
<p>Please give details of where the invoice should be sent.</p>
<label for="invoice_name">Name: </label><br class="nobr" />
<input name="invoice_name" type="text" id="invoice_name" /><br />
<label for="invoice_address">Address: </label><br class="nobr" />
<input name="invoice_address" type="text" id="invoice_address" /><br />
<label for="invoice_postcode">Postcode: </label><br class="nobr" />
<input name="invoice_postcode" type="text" id="invoice_postcode" /><br />
<p>Once we have received your booking form the person booking and those attending will receive a confirmation email confirming your places at the event and an invoice will be issued.
If you have any questions please do not hesitate to contact.</p>
</fieldset>
<br />
<input id="bookingform_submit" class="submitform" type="submit" value="Submit" />
<br /><br />
</form>
</div>
</div>
</div>
<div class="clear"></div>
</div></div>
<!--/content-->
<!--footer-->
<div id="outer-footer">
<div id="footer">
<div class="footer-1">
<h6>Get in touch...</h6>
<ul>
<li>Suite 124-128 Baltic Chambers,50 Wellington Street Glasgow G2 6HJ.</li>
<li><span>Tel:</span> 0141 248 1242</li>
<li><span>Fax:</span> 0141 221 1911</li>
<li><span>Email Us:</span>info#tis.org.uk </li>
</ul>
</div>
<div class="footer-2">
<h6>Join our newsletter...</h6>
<ul>
<li>Hear about the latest event and courses.</li>
<script type="text/javascript"><!--
function validate(f){
var regex = /^\s*$/i;
for(var i=0; i<f.elements.length; i++){
if(regex.test(f.elements[i].value)){
alert("Please fill in all fields.");
f.elements[i].focus();
return false;
}
}
if(f.user_email.value.indexOf('#',0)==-1 || f.user_email.value.indexOf('.',0)==-1)
{
alert("You must provide a VALID email address.");
f.user_email.focus();
return false;
}
return true;
}
//--></script>
<li>
<form action="./&submitform=yes" method="post">
<span class="input_space">
<input name="user_name" id="user_name" type="text" align="left" onblur="if(this.value=='')this.value='Your Name';"
onfocus="if(this.value=='Your Name')this.value='';" value="Your Name" />
</span>
<span>
<input name="user_email" id="user_email" type="text" align="left" onblur="if(this.value=='')this.value='Your Email Address';"
onfocus="if(this.value=='Your Email Address')this.value='';" value="Your Email Address" />
</span>
<input id="newsletterform_submit" type="submit" value="" class="submit-2" />
</form>
I dont think it is submitting the form twice, i think that the variable "submitform" = yes is being set by both, so when you click through to the large form it thinks that form 2 has been submitted also - but in reality it hasn't... you probably want to check that the form has really been submitted using the $_POST variables.