We help IT Professionals succeed at work.

Submit a form cross domain without the use of an iframe

error77
error77 asked
on
4,965 Views
Last Modified: 2014-08-25
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:

<!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>

Open in new window


Please let me know if you need anything else.

I just need a way to submit it cross domain.

Thanks
Comment
Watch Question

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
You could try using ajax and jsonp

http://jsbin.com/wavilu/4/edit - this demo shows the principles of jsonp
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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.

Author

Commented:
Is it possible to post the url so it's not public?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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".
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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>

Open in new window

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
What Ray has posted is what I had in my demo above: http://jsbin.com/larek/1/edit

	<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> 

Open in new window


include your own input elements along with these and it will spit back the POST'd variables
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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","DataLeadID":"","InjuryText":"Post did not come from first page.","TrackingPixel":""}

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.

Author

Commented:
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/
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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?
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Ray, try 11 digits beginning with a 0

Author

Commented:
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 :)

Author

Commented:
Ray, try:

Mobile: 07123456543

Alternative: 01158543245

Should work
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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/
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.
Developer
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Most Valuable Expert 2011
Author of the Year 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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.
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
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.

Author

Commented:
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.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.