Question

I’m using superfish menu for my site (which is using Silverstripe), see superfish menu example here.

The site is all working fine but the contact page, it seems everytime I put $contactUsForm in, the contact page would try to load the contact form first, the down arrows in the superfish menu disappear for a few seconds and the menu moves towards the left. Then the arrows appear and the menu moves to the normal positions again after the form is loaded.

Every other page is fine. Can anyone give me some hints why this is happening and how can I fix it? Thanks.

Here is my ContactPage.php I can add more code here if needed.

static $db = array(

    "Phone"     => "Varchar",

    "Email"     => "Varchar",

    "Address"   => "Text",

    "Thanks"    => "Text",

    "Long"      => "Int",

    "Lat"       => "Int",

    //added for google map 04012012

     "EmbedCode" => "HTMLText" 

);



static $has_one = array(

);



function getCMSFields() {

    $fields = parent::getCMSFields();



    $fields->addFieldToTab('Root.Content.ContactDetails', new TextField('Phone'));

    $fields->addFieldToTab('Root.Content.ContactDetails', new TextField('Email'));

    $fields->addFieldToTab('Root.Content.ContactDetails', new TextareaField('Address','Address',8,3));

    $fields->addFieldToTab('Root.Content.ContactDetails', new TextareaField('Thanks','Thank You Message',8,3));     

    #$fields->addFieldToTab('Root.Content.Main', new TextField('Long'));

    #$fields->addFieldToTab('Root.Content.Main', new TextField('Lat'));

    //added for google map 04012012

     $fields->addFieldToTab('Root.Content.ContactDetails', new TextareaField('EmbedCode', 'Embed Code')); 





    return $fields;

     }

     function HasSentContact() {

        return (isset( $_GET['sent'] ) ) ? true : false;

     }

   function onBeforeWrite() {

$this->EmbedCode = str_replace("></iframe>", "> </iframe>", $this->EmbedCode);

 parent::onBeforeWrite();

}

}


 class ContactPage_Controller extends Page_Controller {


public function init() {

    parent::init();

    Requirements::themedCSS('Contact'); 

}



function contactUsForm() {

            $recaptchaField = new RecaptchaField('MyCaptcha');
    $recaptchaField->jsOptions = array('theme' => 'white'); // optional it changes the look added 07122011


    // Create fields

    $fields = new FieldSet(

    new TextField('Name'),

    new TextField('Surname'),

    new TextField('Email', 'Email Address'),

    new TextField('Phone', 'Phone Number'),

    new TextareaField('Message', 'Enquiry'),

    new LabelField('MyCaptcha', 'Please enter the characters below'),
    $recaptchaField

    //new PhpCaptchaField(),

    //new HeaderField ("Please Enter What You See Here, it's not case sensitive", "6")

    );



    // Create actions

    $actions = new FieldSet(

    new FormAction('doContactUs', 'Submit')

    );



    //valididate fields

    $validator = new RequiredFields('Name', 'Email', 'Message');



    return new Form($this, 'contactUsForm', $fields, $actions, $validator);



}


function doContactUs($data, $form) {



    $from = $data['Email'];

    $to = $this->Email;

    $subject = 'Contact Us Form';

    $body = $data['Name'].' '.$data['Surname'].'\n'.$data['Email'].'\n'.$data['Phone'].'\n\n'.$data['Message'];


    $email = new Email($from, $to, $subject, $body);

    $email->sendPlain();

    //Director::redirectBack();

    Director::redirect($this->Link().'?sent=1');

}

}
?>

ContactPage.ss:

    <div id="intro">

                    <h1 id="h1_home">$Title</h1>

<% if HasSentContact %>
    <div id="Form">
    <h2>$Thanks</h2>
    </div>
<% else %>
    $Content
    <div id="Form">
    $contactUsForm
    </div>    
<% end_if %>

    <div id="Details">
        <h3>GOOGLE MAP</h3>
        <!--added 05012011, added divs-->
        <div id="googlemap">    {$EmbedCode} </div>

        <div id="contactinfo">
        <h3>Contact Info</h3>
        <table class="alignRight">
            <tr>
                <td class="width200 alignLeft">Phone</td>
                <td>{$Phone}</td>
            </tr>
            <tr>
                <td class="alignLeft">Email</td>
                <td><a href="mailto:{$Email}">{$Email}</a></td>
            </tr>
            <tr>
                <td class="alignLeft">Address</td>
                <td>{$Address}</td>
            </tr>
        </table>
        </div><!-- contactinfo -->
    </div><!--Details-->


     $Form 
     </div><!--intro-->

Answer 1

Sounds like a JavaScript conflict problem. SilverStripe 2.4 includes some Prototype JS, along with some jQuery, to render forms on the front end. They don’t play nicely together.

Try wrapping your Superfish JS (your code, not the file you downloaded from their website) in a closure like so:

(function($) {
    $(document).ready(function(){
        // your code here.
    })
})(jQuery);

Read more at the SS docs – http://doc.silverstripe.org/framework/en/topics/javascript/

Another tip – use a JS debugger. In Chrome comes bundled with great dev tools, and FireFox has the FireBug plugin. Use the JS console in either to see if there are any JavaScript errors.