error77
asked on
Submit a form cross domain without the use of an iframe
Hi all,
I was given an iframe to add to my website which points to an online form.
Now, for seo reasons I do not want to use the iframe so I copied the form html into a new html page and then pointed the form action to the domain url which holds the online form. This not working, so can anyone help?
Here is the code for the online form:
Please let me know if you need anything else.
I just need a way to submit it cross domain.
Thanks
I was given an iframe to add to my website which points to an online form.
Now, for seo reasons I do not want to use the iframe so I copied the form html into a new html page and then pointed the form action to the domain url which holds the online form. This not working, so can anyone help?
Here is the code for the online form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='js/if-val.js'></script>
<link href="css/iframe.css" rel="stylesheet" type='text/css'>
<title>Could you Claim?</title>
</head>
<body >
<div class="header">
<div id="claimheader">
<h1>Claim Form</h1>
<p>Please fill in the claim form below and a member of our team will get back to you as soon as possible.</p>
</div>
<div id="aahlogo">
<img src="img/aah-logo.jpg"/>
</div>
<div class="clear"><!-- --></div>
</div>
<form id="claimform" method="post" action="" onsubmit="return submitformone();">
<div id="formleft">
<h2>1. About your Accident</h2>
<div class="questionblock top">
<div class="question">Were you injured in the last 3 years?</div>
<div class="questionopts">
<input id="radTimeYes" type="radio" name="Time" value="True" checked="checked" /><label class="radio-l" for="radTimeYes">YES</label>
<input id="radTimeNo" type="radio" name="Time" value="False" /><label class="radio-r" for="radTimeNo">NO</label>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question">Was the accident your fault?</div>
<div class="questionopts">
<input id="radFaultYes" type="radio" name="Fault" value="True" /><label class="radio-l" for="radFaultYes">YES</label>
<input id="radFaultNo" type="radio" name="Fault" value="False" checked="checked" /><label class="radio-r" for="radFaultNo">NO</label>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question">Did you receive medical attention?</div>
<div class="questionopts">
<input id="radMedicalYes" type="radio" name="MedicalAtt" value="True" checked="checked" /><label class="radio-l" for="radMedicalYes">YES</label>
<input id="radMedicalNo" type="radio" name="MedicalAtt" value="False" /><label class="radio-r" for="radMedicalNo">NO</label>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock injury">
<div class="question">Where was your injury?</div>
<div class="questionopts whereinjured">
<div><input type="checkbox" name="chkHead" id="chkHead" value="Head"/><label for="chkHead">Head</label></div>
<div><input type="checkbox" name="chkArm" id="chkArm" value="Arm"><label for="chkArm">Arm</label></div>
<div><input type="checkbox" name="chkPelvis" id="chkPelvis" value="Pelvis"><label for="chkPelvis">Pelvis/Hip</label></div>
<div class="breakthree"><input type="checkbox" name="chkNeck" id="chkNeck" value="Neck"><label for="chkNeck">Neck</label></div>
<div class="breakfour"><input type="checkbox" name="chkElbow" id="chkElbow" value="Elbow"><label for="chkElbow">Elbow</label></div>
<div><input type="checkbox" name="chkKnee" id="chkKnee" value="Knee"><label for="chkKnee">Knee</label></div>
<div class="breakthree"><input type="checkbox" name="chkBack" id="chkBack" value="Back"><label for="chkBack">Back</label></div>
<div><input type="checkbox" name="chkWrist" id="chkWrist" value="Wrist"><label for="chkWrist">Wrist</label></div>
<div class="breakfour"><input type="checkbox" name="chkLeg" id="chkLeg" value="Leg"><label for="chkLeg">Leg</label></div>
<div class="breakthree"><input type="checkbox" name="chkShoulder" id="chkShoulder" value="Shoulder"><label for="chkShoulder">Shoulder</label></div>
<div><input type="checkbox" name="chkHand" id="chkHand" value="Hand"><label for="chkHand">Hand</label></div>
<div><input type="checkbox" name="chkAnkle" id="chkAnkle" value="Ankle"><label for="chkAnkle">Foot</label></div>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="briefdetails">
<div class="question long">
Brief details of your injury</span><br/>
<textarea rows="7" cols="20" name="frmtxtInjuryDetails" id="frmtxtInjuryDetails"></textarea>
</div>
</div>
</div>
<div id="formright">
<h2>2. Your Details</h2>
<div class="questionblock top">
<div class="question"><label>Your Title<span>*</span></label></div>
<div class="questionopts">
<select name="frmdrpTitle" id="frmdrpTitle">
<option value="">Please Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Prof">Prof</option>
<option value="Dr">Dr</option>
<option value="Rev">Rev</option>
</select>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>First Name<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtFirstName" type="text" maxlength="50" id="frmtxtFirstName"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Surname<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtSurName" type="text" maxlength="50" id="frmtxtSurName"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Home Phone<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtHomePhone" type="text" maxlength="20" id="frmtxtHomePhone"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Alternative Phone<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtAltPhone" type="text" maxlength="20" id="frmtxtAltPhone"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Email Address</label></div>
<div class="questionopts"><input name="frmtxtEmail" type="text" id="frmtxtEmail"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock startclaim">
<div class="submitbtn">
<input type="submit" value="Start Claim" name="btnSubmit" id="btnSubmit"/>
<input type="hidden" name="hidSR" id="hidSR" value="" />
<input type="hidden" name="hidRef" id="hidRef" value="" />
<input type="hidden" name="hidUA" id="hidUA" value="Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0" />
<input type="hidden" name="hidS" id="hidS" value="inviveseo" />
</div>
<div class="errors">
<p id="frmreqvaldrpTitle" class="cfrequired"><b>Title</b> is required</p>
<p id="frmreqvalFirstName" class="cfrequired"><b>First Name</b> is required</p>
<p id="frmregvalFirstName" class="cfrequired"><b>First Name</b> is invalid</p>
<p id="frmreqvalSurName" class="cfrequired"><b>Surname</b> is required</p>
<p id="frmregvalSurName" class="cfrequired"><b>Surname</b> is invalid</p>
<p id="frmreqvalHomePhone" class="cfrequired"><b>Home Phone Number</b> is required</p>
<p id="frmcusvalHomePhone" class="cfrequired"></p>
<p id="frmreqvalAltPhone" class="cfrequired"><b>Alternative Phone Number</b> is required</p>
<p id="frmcusvalAltPhone" class="cfrequired"></p>
</div>
<div class="footer">
</div>
</div>
</div>
</form>
<div class="clear"><!-- --></div>
</body>
</html>Please let me know if you need anything else.
I just need a way to submit it cross domain.
Thanks
not working,What is happening, exactly? What is the URL for the form script? What is the URL that you need in the action="" attribute?
There's no reason it shouldn't work cross domain:
http://jsbin.com/larek/1/edit
This demo shows that I'm submitting data from jsbin to phpfiddle and getting a valid response.
http://jsbin.com/larek/1/edit
This demo shows that I'm submitting data from jsbin to phpfiddle and getting a valid response.
ASKER
Is it possible to post the url so it's not public?
you can send a message to both myself and Ray.
Go to your messages (it's on your profile too): https://www.experts-exchange.com/myMessages.jsp and click "Write a new message" at the top. One at a time, type 'tagit' then click add when I come up. Repeat for "Ray_Paseur".
Go to your messages (it's on your profile too): https://www.experts-exchange.com/myMessages.jsp and click "Write a new message" at the top. One at a time, type 'tagit' then click add when I come up. Repeat for "Ray_Paseur".
Please install it this way and run it to see what is being sent in the request variables (see line 24). The script on my server will send back the form data in a way that lets you see the names and values of the post.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='js/if-val.js'></script>
<link href="css/iframe.css" rel="stylesheet" type='text/css'>
<title>Could you Claim?</title>
</head>
<body >
<div class="header">
<div id="claimheader">
<h1>Claim Form</h1>
<p>Please fill in the claim form below and a member of our team will get back to you as soon as possible.</p>
</div>
<div id="aahlogo">
<img src="img/aah-logo.jpg"/>
</div>
<div class="clear"><!-- --></div>
</div>
<form id="claimform" method="post" action="http://iconoun.com/demo/bounce_post.php" onsubmit="return submitformone();">
<div id="formleft">
<h2>1. About your Accident</h2>
<div class="questionblock top">
<div class="question">Were you injured in the last 3 years?</div>
<div class="questionopts">
<input id="radTimeYes" type="radio" name="Time" value="True" checked="checked" /><label class="radio-l" for="radTimeYes">YES</label>
<input id="radTimeNo" type="radio" name="Time" value="False" /><label class="radio-r" for="radTimeNo">NO</label>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question">Was the accident your fault?</div>
<div class="questionopts">
<input id="radFaultYes" type="radio" name="Fault" value="True" /><label class="radio-l" for="radFaultYes">YES</label>
<input id="radFaultNo" type="radio" name="Fault" value="False" checked="checked" /><label class="radio-r" for="radFaultNo">NO</label>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question">Did you receive medical attention?</div>
<div class="questionopts">
<input id="radMedicalYes" type="radio" name="MedicalAtt" value="True" checked="checked" /><label class="radio-l" for="radMedicalYes">YES</label>
<input id="radMedicalNo" type="radio" name="MedicalAtt" value="False" /><label class="radio-r" for="radMedicalNo">NO</label>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock injury">
<div class="question">Where was your injury?</div>
<div class="questionopts whereinjured">
<div><input type="checkbox" name="chkHead" id="chkHead" value="Head"/><label for="chkHead">Head</label></div>
<div><input type="checkbox" name="chkArm" id="chkArm" value="Arm"><label for="chkArm">Arm</label></div>
<div><input type="checkbox" name="chkPelvis" id="chkPelvis" value="Pelvis"><label for="chkPelvis">Pelvis/Hip</label></div>
<div class="breakthree"><input type="checkbox" name="chkNeck" id="chkNeck" value="Neck"><label for="chkNeck">Neck</label></div>
<div class="breakfour"><input type="checkbox" name="chkElbow" id="chkElbow" value="Elbow"><label for="chkElbow">Elbow</label></div>
<div><input type="checkbox" name="chkKnee" id="chkKnee" value="Knee"><label for="chkKnee">Knee</label></div>
<div class="breakthree"><input type="checkbox" name="chkBack" id="chkBack" value="Back"><label for="chkBack">Back</label></div>
<div><input type="checkbox" name="chkWrist" id="chkWrist" value="Wrist"><label for="chkWrist">Wrist</label></div>
<div class="breakfour"><input type="checkbox" name="chkLeg" id="chkLeg" value="Leg"><label for="chkLeg">Leg</label></div>
<div class="breakthree"><input type="checkbox" name="chkShoulder" id="chkShoulder" value="Shoulder"><label for="chkShoulder">Shoulder</label></div>
<div><input type="checkbox" name="chkHand" id="chkHand" value="Hand"><label for="chkHand">Hand</label></div>
<div><input type="checkbox" name="chkAnkle" id="chkAnkle" value="Ankle"><label for="chkAnkle">Foot</label></div>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="briefdetails">
<div class="question long">
Brief details of your injury</span><br/>
<textarea rows="7" cols="20" name="frmtxtInjuryDetails" id="frmtxtInjuryDetails"></textarea>
</div>
</div>
</div>
<div id="formright">
<h2>2. Your Details</h2>
<div class="questionblock top">
<div class="question"><label>Your Title<span>*</span></label></div>
<div class="questionopts">
<select name="frmdrpTitle" id="frmdrpTitle">
<option value="">Please Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Prof">Prof</option>
<option value="Dr">Dr</option>
<option value="Rev">Rev</option>
</select>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>First Name<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtFirstName" type="text" maxlength="50" id="frmtxtFirstName"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Surname<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtSurName" type="text" maxlength="50" id="frmtxtSurName"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Home Phone<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtHomePhone" type="text" maxlength="20" id="frmtxtHomePhone"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Alternative Phone<span>*</span></label></div>
<div class="questionopts"><input name="frmtxtAltPhone" type="text" maxlength="20" id="frmtxtAltPhone"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock">
<div class="question"><label>Email Address</label></div>
<div class="questionopts"><input name="frmtxtEmail" type="text" id="frmtxtEmail"/></div>
<div class="clear"><!-- --></div>
</div>
<div class="questionblock startclaim">
<div class="submitbtn">
<input type="submit" value="Start Claim" name="btnSubmit" id="btnSubmit"/>
<input type="hidden" name="hidSR" id="hidSR" value="" />
<input type="hidden" name="hidRef" id="hidRef" value="" />
<input type="hidden" name="hidUA" id="hidUA" value="Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0" />
<input type="hidden" name="hidS" id="hidS" value="inviveseo" />
</div>
<div class="errors">
<p id="frmreqvaldrpTitle" class="cfrequired"><b>Title</b> is required</p>
<p id="frmreqvalFirstName" class="cfrequired"><b>First Name</b> is required</p>
<p id="frmregvalFirstName" class="cfrequired"><b>First Name</b> is invalid</p>
<p id="frmreqvalSurName" class="cfrequired"><b>Surname</b> is required</p>
<p id="frmregvalSurName" class="cfrequired"><b>Surname</b> is invalid</p>
<p id="frmreqvalHomePhone" class="cfrequired"><b>Home Phone Number</b> is required</p>
<p id="frmcusvalHomePhone" class="cfrequired"></p>
<p id="frmreqvalAltPhone" class="cfrequired"><b>Alternative Phone Number</b> is required</p>
<p id="frmcusvalAltPhone" class="cfrequired"></p>
</div>
<div class="footer">
</div>
</div>
</div>
</form>
<div class="clear"><!-- --></div>
</body>
</html>
What Ray has posted is what I had in my demo above: http://jsbin.com/larek/1/edit
include your own input elements along with these and it will spit back the POST'd variables
<form action="http://phpfiddle.org/api/run/code/json" method="post">
<input type="text" name='test' value='this is a test' />
<input type="hidden" name='code' value="<?php print_r($_POST)?>">
<button type='submit'>Submit</button>
</form> include your own input elements along with these and it will spit back the POST'd variables
Thanks for sending the link to the form.
I can say now there may be security in place to stop you as i got this response:
{"Result":"False","DataLea
So they have other stuff on their page to prevent people doing what you're doing.
At this point I have to recommend you contact them directly to request getting access to their API. I'm not able to help you any further as it would be against the website's wishes for us to do this and in doing so a breach of the Terms of Use for this site.
I can say now there may be security in place to stop you as i got this response:
{"Result":"False","DataLea
So they have other stuff on their page to prevent people doing what you're doing.
At this point I have to recommend you contact them directly to request getting access to their API. I'm not able to help you any further as it would be against the website's wishes for us to do this and in doing so a breach of the Terms of Use for this site.
ASKER
Basically they want us to use iframes but for seo reasons we on't want to which is why I'm looking for an alternative :o/
I'm more than happy to help if I know it's ok on their side of things. They make you use an iframe so that they dont' have to create an API for you.
On another hand, is there no way you can boost your SEO some other way?
On another hand, is there no way you can boost your SEO some other way?
No matter what I try to put into the form, I get rejected for the phone number. Is this considered a "working app?"
What are the SEO downsides that are specific to using an iFrame for this application?
What are the SEO downsides that are specific to using an iFrame for this application?
Ray, try 11 digits beginning with a 0
ASKER
To be absolutely honest, I personally don't have a problem using iframes but the owner of the website told me he doesn't want to use iframes for seo reasons, no particular details where given to me by him, just "No iFrames" so I found myself here asking you experts for advice :)
ASKER
Ray, try:
Mobile: 07123456543
Alternative: 01158543245
Should work
Mobile: 07123456543
Alternative: 01158543245
Should work
Ok they're obviously trying to tap into the website's content for SEO, I can understand that but to proceed would be
I have contacted a few SEO experts to comment if they can too.
This is going to stop you in your tracks:
Terms & Conditions on the site you're referring to: http://www.yoururl.com/terms-conditions-2/
I have contacted a few SEO experts to comment if they can too.
This is going to stop you in your tracks:
Terms & Conditions on the site you're referring to: http://www.yoururl.com/terms-conditions-2/
For the avoidance of doubt, the exemptions referred to above do not permit you to incorporate all or any part of the content of this website in any commercial publication or document, or for any other commercial purpose.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
So what do I tell this guy, that it cannot be done?
I it cannot be done I'm going to have to give him an explanation about why it cannot be done.
We are registered with them and they provided us with the iframe code too, so it's not like we are trying something funny, just a different way of submitting the form to iframe.
I it cannot be done I'm going to have to give him an explanation about why it cannot be done.
We are registered with them and they provided us with the iframe code too, so it's not like we are trying something funny, just a different way of submitting the form to iframe.
If you do not control the server where the form is submitted, you have to use the iframe it sounds like.
>I it cannot be done I'm going to have to give him an explanation about why it cannot be done.
The explanation is a form does nothing for your SEO. I have given you some good information via the link to another EE question that does explain SEO. The other part is if you don't control the server where you submit data to, there is not another choice that is graceful.
If the real reason is you want to capture the data on your own, that is something else. But SEO is a non issue here.
>I it cannot be done I'm going to have to give him an explanation about why it cannot be done.
The explanation is a form does nothing for your SEO. I have given you some good information via the link to another EE question that does explain SEO. The other part is if you don't control the server where you submit data to, there is not another choice that is graceful.
If the real reason is you want to capture the data on your own, that is something else. But SEO is a non issue here.
ASKER
Thanks all 3 or you.
It was hard to choose which answers to use so I'm going to break it into 2.
Thanks again to all.
It was hard to choose which answers to use so I'm going to break it into 2.
Thanks again to all.
http://jsbin.com/wavilu/4/edit - this demo shows the principles of jsonp