PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Forms look bad ready-css not working and missing elements

  1. pyroboy024
    Member

    I have no idea what is happening here this is a completely empty php page i made for a fancybox button here are the issues i am having:

    Date Calendar Icon is missing
    Have to use large fields for elements (time & Service Type) to display full text
    Ready-css not working: 2-column (gf_left_half & gf_right_half)
    Submit button no style

    http://www.garagedoorsolutionstx.com/schedule-appointment-popup/
    (the actual link for the pop up on on the entire site in the widgets area called "schedule now")

    This is also another problem place with these issue:
    Tested: Ready-css not working
    Submit button no style

    http://www.garagedoorsolutionstx.com/contact/

    I assume this is site wide because these are my only two forms i've made thus far and i'm running into a lot of styling issues

    Posted 10 years ago on Tuesday May 21, 2013 | Permalink
  2. Richard Vav
    Administrator

    Looking at the appointment page you are loading jQuery twice, if you right click and view the source of the page you will see that on line 16 jQuery 1.9 is being loaded from the Google CDN

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    and then on line 966 the WordPress bundled version 1.8.3 is being loaded (the correct way to load jQuery)

    <script type='text/javascript' src='http://www.garagedoorsolutionstx.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

    Loading jQuery multiple times is not advisable as it can cause javascript errors.

    Now scroll down to the bottom of the source code and you will notice that the footer section is missing so the datepicker activation script is also missing which is why the datepicker icon isn't appearing and the datepicker isn't working.

    I assume this page is using a custom template you need to make sure that it contains the wp_footer(); php hook.

    As for the CSS ready classes not working, that is because you have the label position set as left aligned, they only work if the labels are set to top aligned.

    Resolve these issues and then we can take a look at any remaining issues later.

    Regards,
    Richard

    Posted 10 years ago on Tuesday May 21, 2013 | Permalink
  3. Richard Vav
    Administrator

    I forgot to mention that you will also need to move the <!-- Add fancyBox2 --> section down below the wp_head(); hook that way the fancybox scripts aren't loaded until after jQuery.

    Posted 10 years ago on Tuesday May 21, 2013 | Permalink