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:

<!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
error77Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
You could try using ajax and jsonp

http://jsbin.com/wavilu/4/edit - this demo shows the principles of jsonp
0
Ray PaseurCommented:
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?
0
RobOwner (Aidellio)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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

error77Author Commented:
Is it possible to post the url so it's not public?
0
RobOwner (Aidellio)Commented:
you can send a message to both myself and Ray.

Go to your messages (it's on your profile too): http://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".
0
Ray PaseurCommented:
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

0
RobOwner (Aidellio)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
0
RobOwner (Aidellio)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.
0
error77Author 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/
0
RobOwner (Aidellio)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?
0
Ray PaseurCommented:
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?
0
RobOwner (Aidellio)Commented:
Ray, try 11 digits beginning with a 0
0
error77Author 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 :)
0
error77Author Commented:
Ray, try:

Mobile: 07123456543

Alternative: 01158543245

Should work
0
RobOwner (Aidellio)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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>I was given an iframe to add to my website which points to an online form
> for seo reasons I do not want to use the iframe
>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

A form is not going to alter your seo.  It is not really worth the effort to put the form on your site if SEO is your only motivation.  As pointed out, your 3rd party service could use an api, but perhaps they have chosen not to and only offer the frame because it is easier for them.  Actually, the frame could be more secure for your users since the data is always on their server.  

Many times you can simply post directly to the the 3rd party as pointed out but then you don't have a way to return people to your site.  

I have some good info here on SEO http:Q_28351708.html#a39819489.  For this question, sometimes the answer is there is not an answer and I think this is one of those questions.  From the previous comments here, what you want can't be done (unless there is some other method from your 3rd party we don't know about).
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
If you don't want to follow the guidance to use the iFrame, you will probably have to make an HTTP GET request to acquire the form page, then do some modifications to the HTML of the form page before you load it into a DIV in your site.  When the form is submitted you may need to intercept the request and modify the request variables to include an altered HTTP referrer identity.  These are the sorts of programming deceits that make me very uncomfortable, and that may get your site banned from using the service.  I think I would go back to the site owner who wants to avoid the iFrame and explain that iFrame is a condition of using the service.  If that idea is unacceptable to the site owner, the owner should be prepared for a very, very expensive development cycle with the possibility that all the work will be for nothing as soon as the service decides to make a change to the web form.  Executive summary: It ain't worth it!
0
error77Author 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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
error77Author 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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.