Problems With Source Code...

  • Profile Image
    jeffsingerphoto
    Asked on January 08, 2013 at 10:08 PM

    I created my form and downloaded the source code.  I added the code to my website.  The forms is showing up but I have two problems.

    1.  THe formatting is all off.

    2.  The Captcha image isn't showing up.  It's just "spinning"

    The page is linked.

    I've attached a grab of what the form should look like. (note, I did remove the font related CSS so my custom fonts would come through):

  • Profile Image
    jeanettebmz
    Answered on January 08, 2013 at 10:41 PM

    This happens due to several reasons:

    1. You have jquery libraries on the same page where the form is, which is in conflict with the form's code (which is made in Java Prototype)

    2. Captcha image field is also not working for the same reason , as most browsers have javascript disabled , so you need to activate it

    Please remvoe the entire souce code. And, in order for you to avoid these issues, please use the iFrame code instead.

    To get your form's iframe code, please follow this steps below:

    1. Go to Setup & Embed

    2. Click Embed Form

    3. Select iFrame

    4. Copy the provided code.

  • Profile Image
    jeffsingerphoto
    Answered on January 08, 2013 at 11:55 PM

    I was using the iFrame version however I can't get the custom fonts to work with that method.  The captcha actually works fine when I used the iFrame version so I know javascript is enabled.

     

    I need to get it working using the source code in order to use my custom fonts.

     

    Thanks!

  • Profile Image
    liyam
    Answered on January 09, 2013 at 12:22 AM

    Hello.  Have you tried using Google web fonts with your JotForm?

    I also checked your web page and noticed that you're missing libraries and scripts to make JotForm run properly on your webpage.  You can try adding this on your header if it will work:

    <script src="http://max.jotfor.ms/min/g=jotform?3.1.1317" type="text/javascript"></script> <script type="text/javascript"> JotForm.init(function(){ JotForm.initCaptcha('input_5'); JotForm.highlightInputs = false; }); </script>

    Otherwise, you will need to get the code again and carefully remove the parts that are not necessary.

    If you need further assistance, please let us know.

    Thanks.

  • Profile Image
    jeffsingerphoto
    Answered on January 09, 2013 at 12:54 AM

    I use fonts.com.  Basically the same thing as Google web fonts.

    Ok, that got the Captcha working but the formatting of the forms is still off.  I really don't know anything about CSS and HTML.  I just figure it out as I go along, so I'm sure there's something obvious I'm missing.  Something you may notice in 1 minute that will take me 2 hours to figure out.

    Thanks for the help!

  • Profile Image
    idarktech
    Answered on January 09, 2013 at 01:18 AM

    Hi,

    You also need to declare the form's CSS codes. Add the following codes between <head> tags of your page.

    *Removed*

    Let us know if this doesn't help. Thanks!

  • Profile Image
    idarktech
    Answered on January 09, 2013 at 01:20 AM

    I have repasted it on a clean sheet. You can grab the codes here: http://pastie.org/pastes/5652834/text

    Thanks!

  • Profile Image
    jeffsingerphoto
    Answered on January 09, 2013 at 01:32 AM

    Ahh... I was using code from a previous iteration of my form.  It looks like it's working for the most part.  However the submit form is in the wrong place for some reason.

    Thanks again!

  • Profile Image
    jeffsingerphoto
    Answered on January 09, 2013 at 01:36 AM

    Hmmm.  I thought it was working.  Now it's not.  Let me try again.

  • Profile Image
    jeffsingerphoto
    Answered on January 09, 2013 at 01:39 AM

    Yeah, not working.  I added the code you put on a clean sheet.  Formatting is still off.

  • Profile Image
    idarktech
    Answered on January 09, 2013 at 01:43 AM

    You must have added it incorrectly. Here's how it looks like after adding the CSS codes on your page page, above the closing </head> tag.

    http://idarktech.com/test/test_form_164106.html

    Also, I can't seem to find the css codes on your page? Are you viewing it locally? If you can update your page, we can help you check it here. Thanks!

  • Profile Image
    jeffsingerphoto
    Answered on January 09, 2013 at 01:59 AM

    Ok... Working.  However, the code on the "clean sheet" page you created was different than the code you had in the sample page you created on idarktech.com.  I took that code and put it in mine and it works.  So I think that was the problem. The code I get from the actual form page is correct.  So I think what happened last time was I put that code in and saw it working.  Messed with it and then the next time used your pastie.org code which is different.

    What is strange is I put the code in my "styles.css" file which is where CSS stuff usually goes (I'm using a template called Indexhibit and they break the files up on the backend so they are managable) but this code only worked in the main index.php page.

    But again, I know nothing about html/css... so who knows.


    Thanks!

     

  • Profile Image
    idarktech
    Answered on January 09, 2013 at 02:18 AM

    I see, but they appear the same here since they are on the same file. =)

    Anyway, glad to hear it's working now. I can confirm it here.

    --

    That will not work on the linked CSS source e.g. 

     

    <link target="_blank" href="http://max.jotfor.ms/min/g=formCss?3.1.1317" rel="nofollow noopener" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotform.us/css/styles/nova.css?3.1.1317" rel="nofollow noopener" />

    This two CSS source should be embedded on that page not on your style.css file.

     

    However, the other long CSS codes under <style type="text/css"> tag is possible. You just need to remove  <style type="text/css"> and its closing tag </style> before you can add the CSS codes between them to your style.css file.

    Thanks!

  • Profile Image
    jeffsingerphoto
    Answered on January 09, 2013 at 09:32 AM

    Ok, so it turns out that your scripts are effecting another part of my website and making something important not work.  So, I removed this code and the other part of the website started working again:

    <script src="//max.jotfor.ms/min/g=jotform?3.1.1317" type="text/javascript"></script> <script type="text/javascript"> JotForm.init(function(){ JotForm.initCaptcha('input_5'); JotForm.highlightInputs = false; }); </script>

     

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

     

     

    <script type="text/javascript">

       JotForm.init(function(){

          JotForm.highlightInputs = false;

       });

    </script>

     

    But, the crazy thing is... the forms still worked.  How can that be?  What does these scripts do and are they not even necessary?

    Thanks!

  • Profile Image
    jonathan
    Answered on January 09, 2013 at 10:02 AM

    Hi,

    I cannot seem to find the captcha field in the form. Reading back on the discussion, I think my colleagues had provided workaround scripts to fix the captcha field issue. But if you modified the form and remove the captcha, then there is no need for that additional script anymore.

    You are using the source code of the form, you can view it in your web page source. This makes the form still work because it actually is still there.

    Can you please confirm also if the form and your web page are working fine now at this time? If there is still issue, please provide more details about it and we will check further.

    Will await for your updates.

    Thanks.