CODEWITHSUNDEEP
htmlformssubmit
JackR
JackR

Reputation: 13

My form submit button is not showing correctly

I have created an form that submits the contents to email. I have used the exact same coding in many other websites, but for my new website http://www.peterevansfuneraldirectors.co.uk/contact-us.html the submit button is just a grey square with text, rather than the usual button. Also the hand doesn't come up on hover.

My form code is...

<form action="php/FormToEmail.php" method="post" name="ContactForm" id="ContactForm" onsubmit="MM_validateForm('name','','R','email','','RisEmail','message subject','','R','message','','R');return document.MM_returnValue" >

                <div class="form-text">
                <b>Name<span class="purple">*</span></b><br />
                <input name="name" type="text" id="name" size="35" style="height:23px; background-color:#FFF; color:#000; border: 1px solid #CCC;" />
                </div><br />

                <div class="form-text">
                <b>Email<span class="purple">*</span></b><br />
                <input name="email" type="text" id="email" size="35" style="height:23px; background-color:#FFF; color:#000; border: 1px solid #CCC;" />
                </div><br />

                <div class="form-text">
                <b>Message Subject<span class="purple">*</span></b><br />
                <input name="message subject" type="text" id="message subject" size="35" style="height:23px; background-color:#FFF; color:#000; border: 1px solid #CCC;" />
                </div><br />

                <div class="form-text">
                <b>Message<span class="purple">*</span></b><br />
                <textarea name="message" type="text" id="message" rows="8" cols="55" style="background-color:#FFF; color:#000; border: 1px solid #CCC;" ></textarea>
                </div><br />

                <div class="submit-button">
                <input type="submit" name="submit" value="Submit" />
                </div>

            </form>

Thanks in advance!

Jack.

Upvotes: 1

Views: 4268

Answers (3)

Linton
Linton

Reputation: 1

There is nothing wrong with your html. Probably you are using css to style this button. Try to remove css "border" property from the subtmit button.

You have a nice plugin for Firefox called Firebug that allows you to check css properties, you can try it if you can´t find the property that is causing that. Just right click on the button element and select "Inspect element with Firebug".

Upvotes: 0

avasin
avasin

Reputation: 9726

That happened because of css. You have margin/padding/border disabled for this element.

If i disable these styles - button will be displayed normally.

Look at this style:

* {
  margin:0; // disable for button
  padding:0; // disable for button
  border:0; // disable for button
}

Upvotes: 1

Eric J.
Eric J.

Reputation: 150108

That is because of the CSS styles that are being applied to the button.

If you remove the CSS styles, it looks just like a standard button.

If you want a specific cursor over the button, look into the CSS Cursor style.

Upvotes: 1

Related Questions