Community Forums 

Main Content

Graphic Buttons for a Form Submit

    Apr 10 2016 16:24:46

    #1

    LazyCarrot

    Join date : 2009-06-26      Posts : 52

    This is a follow-up to my previous post below, (sorry for hogging the top of the forum board guys!) for which Debbie Q pointed me towards an alternative and much more user intuitive solution....

    Ok so now I have a neat solution to my original problem and a relatively simple Form that I can 'backwards engineer' and figure out how it works.

    Basically it comprises 2 Drop Down Menus and a Submit Button.
    And it works (which is a big plus!)

    What has left me scratching my head though is making it look pretty.

    When using a simple html submit button I was able to create a graphic of my own (with a rollover) to substitute for the default submit button.
    It's starting to look like that may not be possible (leastways not without significant rocket science) to do the same within a Form.

    So in summary, what I'm after is a way of replacing the default Drop Down and Submit 'form' buttons with my own graphics.
    Is that possible? or am I going to have to suck up the defaults?

    I'm really aware that this is more of a 'web coding' question rather than a Mal's Cart specific query
    but the answers I get from coding specific forums are more confusing than the questions I ask
    and I really appreciate the responses from you guys. Hope I'm not taking advantage of your good natures


    For clarification - I've pasted the Form coding below:

    <form action="http://ww4.aitsafe.com/cf/add.cfm";;; method="post">
    <input type="hidden" name="userid" value="99999999">
    <input type="hidden" name="return" value="www.lazycarrot.co.uk/index.html">;
    <input type="hidden" name="price" value="11.99">
    <input type="hidden" name="product[]" value="Classic T-Shirt">
    <input type="hidden" name="product[]" value="BDYL-001">

    <select name="product[]" size="1">
    <option selected value="">Select Colour</option>
    <option value="White">White</option>
    <option value="Ash">Ash</option>
    <option value="Natural">Natural</option>
    </select>

    <p> &nbsp; </p>

    <select name="product[]" size="1">
    <option selected value="">Select Size</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="2XL">2XL</option>
    </select>

    <p> &nbsp; </p>

    <input type="submit" value="Add to Basket">
    </form>



    Apr 10 2016 21:02:38

    #2

    Debbie Q

    Join date : 2008-09-18      Posts : 4994

    <input type="image" src="add_to_basket.gif" border="0">

    change "add_to_basket.gif" to the name and location of your Submit button graphic.

    Debbie Q

    Mal's Support: www.mals-e.com/support.php
    GT's Forms and examples: www.malsforms.com
    Helpful java scripts: www.gemasana.com/mals
    Shipping help documents: www.stoner.org.uk/mals

    My Create-A-Book Publishing - mycreateabook.com
    Personalized Books, Music CDs and Gifts for all ages and occasions.

    Please help me out and share my site on your networks.




    Apr 11 2016 14:50:49

    #3

    LazyCarrot

    Join date : 2009-06-26      Posts : 52

    Thanks again Debbie for your response - it's a huge help not just in solving this specific problem but also in getting to grips with how forms work in general... much appreciated - I'll go and try it out now!