Using full source code of the form shows captcha after submitting

When a user enters their email and click join, it redirects them to another page.

This only happens with the source code of the form. When I use the Iframe code it shows the thank you page.

How do I get the source code to show this thank you pop up, rather than redirecting to a different page and having them enter a code.

This happens when the form that is submitted is not the same as the form that on our side.

It means that you have grabbed full source code of your form at one point and then made some extra changes to your form. In doing so, the form in your account and the one that is being submitted are not the same. To prevent spam submissions, the captcha is shown instead.

So to remove it, all you would need to do is to grab the latest source code of your form.

In case it is needed, you can see how to do that here: How to get the Full Source Code of your Form

Do let us know how it goes. :)

I have to edit the code because when I only put the source code this is what it looks like.

can you edit the HTML in jotform?

I have tested you form's direct link and it went through without submissions.

As my colleague had earlier advised, if you have made any changes to the form via the online form builder you will need to download a fresh copy of the source code in order to propagate the latest changes to your custom form code.

This should rectify the issue with the CAPTCHA appearing on form submission.

if you tested out form from our website is because thats a iframe, not a source code. We want the source code so our third party can grab those emails. Is there a support phone number I can contact? Might be easier to explain over the phone.

Thanks,

Kristian

Hi Kristian,

Unfortunately we do not have phone support our support channels re through the following

Chat, Email and the forum.

I did test with a source code copy of you form and was not able to recreate the issue.

How are you sending the data to the third party? If it is through normal post you can achieve it by posting to a custom thank you page.

Kindly refer to the following guide on how to do this http://www.jotform.com/help/213-Send-POST-Data-From-JotForm-Using-PHP-in-Custom-Thank-You-Page

Also is it possible for you to avail a page with the source code on your site so that we can be able to look further into the cause and be able to advise accordingly?

Im using rekko which automates the pop up modal like the screenshot about. I past the iframe code in the rekko HTML and it looks perfect. but when I put the source code in the rekko HTML for the popup box it shows up like this.

It also shows the "enter the shown message" when I didn't change anything in the code

Hi,

Have you re-embedded your form ? 

Since I have checked the link to your website and I'm able to see the form is displayed properly, also I'm able to send it without any problems too : 

I tried using FireFox and Chrome, in both I was able to see and send the form without any problem.

Could you confirm if is it working fine now ? 

Thats the iframe version... I put the broken one (source code) up on the site.... you can see it here http://www.planetshoes.com/?VSPTest

might need to be incognito to see it

Thanks,

Kristian

Thank you for adding it on a different page, this helps us to see the issue.

Based on what you have previously mentioned, this is how it looks for you Kristian:

For me it looks slightly different (on this page http://www.planetshoes.com/?VSPTest#0):

Slightly different, but both are off from the iframe version:

The reason for this is that when you are using full source code your form code is directly affected by the CSS on your own website, causing these issues.

To resolve this, please add this CSS code on your website - right above the form - but do not add the same into your form, or it will break your form layout when accessed directly or over iframe.

<style type="text/css">
form.jotform-form {
    padding-bottom: 0;
    padding-top: 13px;
}

.jotform-form div.form-all:before {
    background-size: 500px 148px !important;
    left: -1px;
    top: -149px;
    width: 500px;
}
.jotform-form #label_5 {
    display: none;
}
.jotform-form #cid_5 {
    display: block;
    margin-top: 20px;
    width: 100%;
}
.jotform-form #input_5 {
    margin: 0 auto;
    width: 82%;
}
.jotform-form #id_6 img.form-image {
    margin-left: 0;
}
.jotform-form #id_6 {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
</style>

The style will not effect any other elements on your website, only the jotform.

Do add it and let us know how it goes.

I would only like to mention that on the page you will see 2 forms being opened. One using iframe and the other using source code, so you might see one being slightly above the other.

So i put that code on the site but and it worked when it comes to design... the modal looks great now but when I enter my email it still brings me here https://submit.jotform.us/submit/53154610387151/

I don't want people to be redirected to this page... I want it to just show the thank you page

I am glad to hear that the design is looking good :)

In regards to the captcha. This can only happen if the source code is modified. Can you please tell us if you are grabbing the latest source code and embedding the entire code or are you doing any modifications of the same?

If not, it could be caused by the fact that it is running from the modal, in which case there is likely nothing that we can do, but lets first try to see and test few things to make sure we cover everything.

Hey Ben,

Yea im grabbing it straight from the updated form on jot form... This doesn't happen when I use the iframe code... only when I use the source code.

Thanks,

Kristian

Yes, the iframe should never show you captcha in such way Kristian, since it always has all of the elements needed for it.

I had presumed that something was removed from your form, but looking at it now, it seems that one field was not updated properly for some reason.

To resolve this, please replace this (within the source code that you get):

<input id="simple_spc" type="hidden" value="53154610387151" name="simple_spc">
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "53154610387151-53154610387151";
</script>

to this:

<input id="simple_spc" type="hidden" value="53154610387151-53154610387151" name="simple_spc">

As soon as you do, your form should be working - at least per my tests just a minute or two ago.

Do let us know how it goes and please do note that when ever your make a change to your form, you will need to capture the source code of your form again and re-embed, it, but you will also need to do the same change as above.

So it redirected me to the thank you page

but I want it to display on the popup, not get redirected to a different page... so I want it to look like this

Thank you for your help so far! 

- Kristian

Hi,

I'm making some test, but I'm not able to find how to solve it, the form is redirecting as needed, and I think it only will redirect inside the popup when using the IFrame method, but I will try to redirect it in the same popup using the source code, I will let you know if I'm able to do it.

Thanks.

Thanks guys!

Hi,

I just found a way to accomplish what you want, please follow the steps below in order to do it :

1. First, add an IFrame code, I did it just above the form code, this is the IFrame code you should add : 

<iframe id="frame" name="frame" width="100%" height="300" style="display:none;" ></iframe>

2. Add this line target="frame" , frame is the iframe's name and when the form is submitted will redirect to the iframe instead of redirect the whole page.

3. Paste this Javascript function in the source code in your website, it will show the iframe and hide the form, also will redirect the Thank You page to the iframe, as you need : 

<script type="text/javascript">

            function createCallback() {

              setTimeout(function(){

                  document.getElementById('frame').style.display = 'block';

                  document.getElementById('53534467083964').style.display = 'none';

              },1500);

            }

</script>

The text in orange, is the Form ID, you can find it as id attribute in the form.

You can see my sample on this screencast :

Download the source code for my sample here.

Hope this will help you.

Let us know if it works as you want, or if you need help while doing it, we will be glad to assist you.

Regards.

I forgot to mention, you should add this line to the form, it will open the Javascript function when the form is submitted : 

onDISABLEDsubmit="createCallback()"

Once added the code should look like this : 

<form class="jotform-form" action="https://submit.jotformpro.com/submit/53534467083964/" method="post" name="form_53534467083964"  id="53534467083964" target="frame" onDISABLEDsubmit="createCallback()"  accept-charset="utf-8"> 

what code are you looking at? I don't see any of this in my current source code.

Based on what my colleague had mentioned, you should be able to do that by searching for this:

<form novalidate="true" accept-charset="utf-8" action="https://submit.jotform.us/submit/53154610387151/" class="jotform-form" id="53154610387151" method="post" name="form_53154610387151"> in the source code of your form

and change it to:

 <script type="text/javascript">
            function createCallback() {
              setTimeout(function(){
                  document.getElementById('frame').style.display = 'block';
                  document.getElementById('53154610387151').style.display = 'none';
              },1500);
            }
</script>
  <iframe width="100%" height="300" style="display:none;" name="frame" id="frame"></iframe>
<form novalidate="true" accept-charset="utf-8" action="https://submit.jotform.us/submit/53154610387151/" class="jotform-form" id="53154610387151" method="post" name="form_53154610387151" onDISABLEDsubmit="createCallback()">

Do let us know how it goes.

This is what happens

I took a look at your page: http://www.planetshoes.com/?VSPTest#0

Seems that you have actually left the previous form element and added the code above next to it, instead of replacing it. This is why you are shown both.

Please do grab the new source code of your form and then in it do the following changes (before adding it to your website):

replace this (within the source code that you get):

<input id="simple_spc" type="hidden" value="53154610387151" name="simple_spc">
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "53154610387151-53154610387151";
</script>

to this:

<input id="simple_spc" type="hidden" value="53154610387151-53154610387151" name="simple_spc">

Now a bit higher of that, you should search for:

<form novalidate="true" accept-charset="utf-8" action="https://submit.jotform.us/submit/53154610387151/" class="jotform-form" id="53154610387151" method="post" name="form_53154610387151">

Remove the same and then add this code in its place:

 <script type="text/javascript">
            function createCallback() {
              setTimeout(function(){
                  document.getElementById('frame').style.display = 'block';
                  document.getElementById('53154610387151').style.display = 'none';
              },1500);
            }
</script>
  <iframe width="100%" height="300" style="display:none;" name="frame" id="frame"></iframe>
<form novalidate="true" accept-charset="utf-8" action="https://submit.jotform.us/submit/53154610387151/" class="jotform-form" id="53154610387151" method="post" name="form_53154610387151" onDISABLEDsubmit="createCallback()">

- I have now marked the changes suggested by my colleague with bold, so you can see what we are doing to the previous code.

Now once you have replaced these codes, do save them on your website and let us know how it goes.

If there are any issues, there is another alternative that we can try, which might not require any modifications of the form by you after grabbing the source code.

Just made those changes and it looks great but the thank you doesn't show up in the popup.

OK, in that case, please do try to do the following:

*we will first try with the original source code to see if you can do it in the least amount of steps possible when you make any update on your form.

1. Grab the full source code of your form

2. Add it to some page on your website that does not load the entire website, just the API that you need for integration with rekko

3a. do what you need to have rekko integration work for you on your side

4. Save the page and grab its URL

5. add this iframe code to be shown in the modal window:

<iframe width="500" height="364" id="JotFormSelfHostedIframe" src="LINK TO PAGE FROM STEP 2"></iframe>

Doing so will load your page with the source code embed form created in the step 2 through the iframe to your modal form. As such once submitted, it should still be shown within the iframe - without taking them to a new page.

If it is showing you captcha by any chance, it means that we need to apply the same change again as we had earlier on the thread. In our steps it would be 3b (skip it for the first time):

3b. If needed, this is where you need to apply the following change before saving your form:

Find and replace this:

<input id="simple_spc" type="hidden" value="53154610387151" name="simple_spc">
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "53154610387151-53154610387151";
</script>

with this:

<input id="simple_spc" type="hidden" value="53154610387151-53154610387151" name="simple_spc">

Hopefully this will work for you, but please do let us know how it goes.

Great to hear that is is working for you now Kristian :)

Since this is a very long thread now and we were able to resolve this issue, I will move this to a new thread.

This is the link to new thread: http://www.jotform.com/answers/731229

We will be replying back on it shortly.