[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Submit a form cross domain without the use of an iframe

Posted on 2014-08-25
20
Medium Priority
?
2,711 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
0
Comment
Question by:error77
  • 8
  • 6
  • 4
  • +1
20 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40282739
You could try using ajax and jsonp

http://jsbin.com/wavilu/4/edit - this demo shows the principles of jsonp
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40282762
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
 
LVL 43

Expert Comment

by:Rob
ID: 40282774
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:error77
ID: 40282812
Is it possible to post the url so it's not public?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40282832
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40282846
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
 
LVL 43

Expert Comment

by:Rob
ID: 40282855
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
 
LVL 43

Expert Comment

by:Rob
ID: 40282912
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
 

Author Comment

by:error77
ID: 40282922
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
 
LVL 43

Expert Comment

by:Rob
ID: 40282936
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40282952
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
 
LVL 43

Expert Comment

by:Rob
ID: 40282959
Ray, try 11 digits beginning with a 0
0
 

Author Comment

by:error77
ID: 40282963
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
 

Author Comment

by:error77
ID: 40282981
Ray, try:

Mobile: 07123456543

Alternative: 01158543245

Should work
0
 
LVL 43

Expert Comment

by:Rob
ID: 40282986
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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 total points
ID: 40282997
>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
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 1000 total points
ID: 40283002
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
 

Author Comment

by:error77
ID: 40283014
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40283092
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
 

Author Closing Comment

by:error77
ID: 40283332
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses
Course of the Month18 days, 16 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question