Question

I am designing this site for a close family friends business, I am almost don't minus SEO however I have this really annoying thing happening on one of the pages because I have added this 3rd party email form onto the site.

When the page loads for a split second all of the CSS is ignored/overidden then it goes back to normal.

Its happening because of the email form because when I remove it, it works fine. here is the email form code

<form id="emf-form" target="_blank" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/n4JBWqS97920L" name="emf-form">
  <table style="text-align:left;" cellpadding="2" cellspacing="0" border="0" bgcolor="transparent">

    <tr valign="top">
      <td id="td_element_label_0" style="" align="">
        <li><strong>Name</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_0" style="">
        <input id="element_0" name="element_0" value="" size="30" class="validate[required]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_1" style="" align="">
        <li><strong><b>Email</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_1" style="">
        <input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_2" style="" align="">
        <li><strong><b>Subject</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_2" style="">
        <input id="element_2" name="element_2" value="" size="30" class="validate[required]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_3" style="" align="">
        <li><strong><b>Message</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_3" style="">
        <textarea id="element_3" name="element_3" cols="60" rows="10" class="validate[required]">
</textarea>
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <script type="text/javascript">
//<![CDATA[
        var RecaptchaOptions = {
                theme: 'clean',
                custom_theme_widget: 'emf-recaptcha_widget'
                };
        //]]>
        </script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
</script> <noscript><iframe src="https://www.google.com/recaptcha/api/noscript?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9" height="300" width="500" frameborder="0"></iframe><br />
        <textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge" /></noscript>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="right">
        <input name="element_counts" value="4" type="hidden" /> <input name="embed" value="forms" type="hidden" /><input value="Send email" type="submit" /><input value="Clear" type="reset" />
      </td>
    </tr>
  </table>
</form>

And here is a link to to page to show you whats happening, and if you need to see any of the other source code.

http://www.smithscreenprint.co.nz/contacts.html

any help would be greatly appreciated.

Was it helpful?

Solution

It's loading the recaptcha first. Remove that functionality if you want confirm this. I tested it on several browsers, and there's no problem. So it might have to do with the browser you are using (IE?). The only way to solve it might be to use a hack of some sort. Try different ways of loading. Don't use @import for css as well, if you are.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top