"Thank You!" page changed and not receiving email notifications

  • Profile Image
    GlobeTechnical
    Asked on March 13, 2013 at 05:40 PM

    Hi,

    I have a form embedded in my web page: www.globetechnical.co.uk/Contact

    Previously, when someone completed the form and submitted it, the "Thank you..." message would appear on the same page in place of the form. This behaviour has now changed. After clicking 'Submit', the page now changes to http://submit.jotformeu.com/submit.php.

    Ideally, I'd like to revert to the prevous behaviour and have a message display in place of the form without changing the page. Even better if I can edit that message.

    Not sure if it helps but I thought it best to point out that I've been instructed by one of your support guys to use:

    <script src="//cdn.jotfor.ms/min/g=jotform?3.1.2002" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init();

    </script>

    ...in place of:

    <script src="Form/js/prototype.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/protoplus.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/protoplus-ui.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/jotform.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/calendarview.js?v=3.1.1248" type="text/javascript"></script>

    ...in order to get around a stack overflow problem in IE8. I've then gone one step further and decided to also host the target script (g=jotform.js) locally to reduce load times. I'm wondering if this script is resulting in the behaviour I'm now experiencing.

    Additionally, we're not getting any notification emails through and I'm again wondering whether this is being caused by the change of scripts.

    Either way, are you able to offer any advice?

    Thanks,

    Leon

  • Profile Image
    Mike_T
    Answered on March 13, 2013 at 06:08 PM

    Thank you for contacting us.

    Ideally, I'd like to revert to the prevous behaviour and have a message display in place of the form without changing the page. Even better if I can edit that message.

    As far as I understand, the redirect is happening due to the source code embedding method. The easiest way to fix this is probably to use a Custom Thank You URL. In other words, redirect to some Thank You Page on your website.

    Additionally, we're not getting any notification emails through and I'm again wondering whether this is being caused by the change of scripts.

    Your email address info@gl************.co.uk was added to our bounced list due to the following reason:

    5.1.0 - Unknown address error 550-'unknown user'

    Please make sure that mentioned mailbox is active in your Google Apps. Now we have removed it from the bounced list, so the issue should be fixed.

    Please feel free to contact us if you need any further assistance.

  • Profile Image
    GlobeTechnical
    Answered on March 13, 2013 at 08:05 PM

    Hi,

    That's resolved the email issue. Thank you.

    However, the solution you've provided Re: the "Thank You" page doesn't achieve what I'm looking for.

    As mentioned, I need the "Thank You" message to display in place of the form on the same page, not on a different page. Even if I create a "Thank You" page and re-direct to there, this will introduce problems with other planned functionality on the site.

    Any other ideas?

    Leon

  • Profile Image
    pinoytech
    Answered on March 13, 2013 at 10:33 PM

    Hi Leon,

    Please re-embed your form code into your website using iFrame method to fixed the issue.

    http://jotform.me/help/148-How-to-get-your-Form-s-Iframe-Code

    Thank you!

  • Profile Image
    GlobeTechnical
    Answered on March 14, 2013 at 06:44 AM

    Hi,

    I've tried the iframe method several times previously (and again this time around). The styling/formatting gets messed up. I'm referencing the css for the form in the for the form html. I can't work out why the formatting won't hold.

    You can view the page in question @ http://www.globetechnical.co.uk/Contact

    If you compare this to my form (ID 23164070467350) in the form builder, you'll see what I mean.

    I'd be grateful if you could let me know where I'm going wrong.

    Also, I'd like to know what happened to the form submissions that didn't make it through. Are they lost forever? Are they retrievable? It would be useful to know for future reference.

    Thanks,

    Leon

  • Profile Image
    Welvin
    Answered on March 14, 2013 at 10:07 AM

    Hi Leon,

    Please kindly try to correct your file path. Put the full direct link or path to the CSS Stylesheet, same with the JS files just like what Jotform full source codes does.

    Next is, increase your Contact Page container to match with your form width. Your current contact page is 486px while your form width is 496px. Or, try to decrease your form width to make it easy.

    With regards to the form submissions, I am not sure if they can be retrievable. Please try to check your email address as well.

     

    Thanks

  • Profile Image
    Welvin
    Answered on March 14, 2013 at 10:10 AM

    In addition with regards to the file path. After I check them, there's an error:

    Failed to load resource simply means that the files are not available in your server or the file path is incorrect.

     

    Thanks

  • Profile Image
    GlobeTechnical
    Answered on March 14, 2013 at 11:22 AM

    Hi Welvin,

    I'm not entirely sure I'm understanding what you mean when you say "put the direct link" or "put the direct file path". If you're referring to the full path (e.g. http://globetechnical.co.uk/Form/css/styles/form.css) then I've tried this. It didn't work...

    To illustrate, I've now reverted my form to the way it was before (not using iframes) and it's working fine (except for the "Thank You" page issue) with the urls as they are:

    http://www.globetechnical.co.uk/Contact

    Please clarify.

    Re: emails/form submissions - There's nothing wrong with my email address. Take a look at previous posts on this thread and you'll see that the problem was due to our email address having been on your bounce-back list (our MX records were being updated when a submission was made and your servers got a bounce-back). That issue is fixed and submissions are now coming through just fine. I was asking whether it's possible to retrieve the emails/submissions that were missed. I just need to know either way for future reference.

    Many thanks,

    Leon

  • Profile Image
    ardy0689
    Answered on March 14, 2013 at 12:23 PM

    Hello,

    In regards with your email/submissions concern, whenever your email is caught up in our bounce list you will not receive your email notifications but still the submitted data from the form will still be received from your form submissions page.

    As shown in the illustration, just click any form from your list and you will see a Submissions button. Even if you have not receive your email notifications all the data will still be on our server. The only problem that I can think of here is tracing what submissions did not go through your email. Looking at the dates will help a lot here.

     

    About the thank you page, I would like to suggest is to create another empty webpage. Put your form source code there including any inline css code you have created and any css files that are needed on your form. This is just similar to what you did on your contact page except the page is blank, no designs, no navigations and etc. just the form.

    After you have created this webpage, embed an iframe on your contact page and reference the link to your newly created webpage where the form is.

    Actually, it is just the same with the iframe in Jotform builder, the only difference is that you got your form hosted on your server on its own page. You just need to change the link and targetting the form webpage.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://www.globetechnical.co.uk/myform.html" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    As you can see from above this is a JotForm Iframe embed I just change the link where the form page is.

    Please let us know if this works for you. Thanks

  • Profile Image
    GlobeTechnical
    Answered on March 14, 2013 at 01:43 PM

    Hi,

    Re: form submissions - I thought I had seen that button somewhere. Thank you for reminding me.

    As far as the iframe method is concerned, I'm afraid we're going around in circles. Please refer to my previous posts in which I explain that I can't seem to get iframes working without messing up the formatting/styling. I'd (still) be grateful for some advice on how to get around this problem.

    As always, thanks for your time. I'll look forward to your response.

    Regards,

    Leon

  • Profile Image
    ardy0689
    Answered on March 14, 2013 at 02:36 PM

    Hi Leon,

    You are welcome.

    About the IFRAME, what I suggested is a little different than the standard IFRAME embed method.

    You see what I suggested was to move your entire form source code(that automatically includes all inline css codes), be sure to attach or link any css files that are related to your form on this new blank web page. This is your proxy page.

    On the normal IFRAME embed you just need to copy and paste and your done. On the other hand, the IFRAME method I suggested needs you to change the URL in the IFRAME to target your newly created proxy page.

    From the example code I gave earlier that is the original IFRAME embed code but I changed the
    src url to target my proxy page where the form is embedded. After that you can begin pasting it to your contact page.

    After you have submitted your form and get redirected, the IFRAME window containing your proxy page, will the only one that will be redirected and not your whole contact page. My suggestion also avoids destroying your custom layout. That's the benefit of isolating the form and putting it in a proxy page.

    If you need further assistance during the creation of the proxy page. Please let us know. Thanks

  • Profile Image
    GlobeTechnical
    Answered on March 14, 2013 at 06:04 PM

    Ok, so I have the contact form. Then I use a blank page to reference/embed the form... and then call that page using the iframe? I'll try this tomorrow and get back to you.

  • Profile Image
    ardy0689
    Answered on March 14, 2013 at 06:11 PM

    Hello,

    Yeah, that's the exact idea. To summarize it:

    1. Create a blank page
    2. Download whole source code and embed the whole source code
    3. Apply your formattings and custom styles or your inline CSS. If they are inside an external CSS file along with your contact page styles, just move everything that are related to your form and move it to a separate CSS file and attach it into the blank page.
    4. From the contact page call the blank page using IFrame.

    The goal is to preserve the style so I emphasize the 3rd one.Please let us know how it goes. Thanks

  • Profile Image
    GlobeTechnical
    Answered on March 15, 2013 at 10:27 PM

    Hi,

    I eventually managed to get this working. Thanks for clarifying.

    This has introduced a couple of other problems though:

    1) If you look at my contact page now, you'll see that the form is slightly indented from the left hand side of the content section of the page. I need it to be aligned with the 'Contact Form' heading above it. Can you advise on how to achieve this or which bit of code is responsible?

    2) When you select a field to enter information, it displays a yellow border. How can I control the colour of the border for the active field? I'm unsure of whether it was doing this before - I just noticed it.

    Regards,

    Leon

  • Profile Image
    GlobeTechnical
    Answered on March 15, 2013 at 10:28 PM

    Hi,

    I eventually managed to get this working. Thanks for clarifying.

    This has introduced a couple of other problems though:

    1) If you look at my contact page now, you'll see that the form is slightly indented from the left hand side of the content section of the page. I need it to be aligned with the 'Contact Form' heading above it. Can you advise on how to achieve this or which bit of code is responsible?

    2) When you select a field to enter information, it displays a yellow border. How can I control the colour of the border for the active field? I'm unsure of whether it was doing this before - I just noticed it.

    Regards,

    Leon

  • Profile Image
    ardy0689
    Answered on March 16, 2013 at 06:58 AM

     

    Hello Leon,

    1) This is your IFRAME code, I just inserted this inline css to adjust the margin to the left. You can play with the value

    <iframe scrolling="no" frameborder="0" style="margin-left:-6px;width: 100%; height: 452px; border: medium none;" src="../Form/form_proxy.html" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>

    2) The yellow border is normal when you change normal fields to required fields. From your proxy page you should see this in your <head> tag and in between <style>..</style>

     

     

    .form-required {

    color: #FF8300;

    }

    You should change the color value. If it does not work, add !important after the color value
    eg.  color: #C8A1F8 !important;

    You may use this http://www.colorpicker.com/ to pick your colors and get the hex color code.

    If you need further assistance please do not hesitate to ask.

    Thanks

     

  • Profile Image
    GlobeTechnical
    Answered on March 16, 2013 at 07:26 AM

    Hi,

    1) Re: iframe - that's great. I've made the change on my test system and it's properly aligned now. I'll set that live shortly.

    2) Yeah, I set it to #FF3800 on purpose. That's the orange colour you see around the site. it does not seem to make any difference what colour I put in there. Even adding !important has no effect. The currently selected field still displays in yellow. Are you sure that's the class I should be defining? I would have thought there would be a class specifically for styling whichever field is active/selected...

  • Profile Image
    ardy0689
    Answered on March 16, 2013 at 07:53 AM

    Hello,

    Sorry, you are correct it is not .form-required I found it to be this lines of code in your <style>...</style>

     

    .form-line-error input, .form-line-error textarea, .form-validation-error {
    background-color:#FFFFFF;
    border:1px solid #FF8300;
    -moz-box-shadow:0 0 2px #FF8300;
    -webkit-box-shadow: 0 0 2px #FF8300;
    box-shadow: 0 0 2px #FF8300; }


    The background-color is the color of the whole field on that line. Currently white. 

    The color here: border:1px solid #FF8300; Is the one you probably changed to orange. It refers to the border color of any field. However, I noticed that the active field is yellow when you use Chrome and not with Firefox and IE. I just remembered Chrome usually does that to any form in the internet. I hope this information is useful to you. You can change the colors from that CSS classes.
  • Profile Image
    GlobeTechnical
    Answered on March 21, 2013 at 06:17 AM

    Hi,

    Thanks for the info regarding Chrome's treatment of form fields. I did some additional reading and it seems that Google also find it necessary to use a custard-yellow background for auto-fill fields. I have no idea why and it seems that there is no easy, reliable fix for this.

    Either way, I acknowledge that this is certainly not your fault - so thank you for providing the information.

    Kind regards,

    Leon

  • Profile Image
    jefreylandicho
    Answered on March 21, 2013 at 08:15 AM

    Can you try adding this code in your Form Style CSS, it should remove the yellow border and background

    form :focus { outline: none; background:#fff !important; }