1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Help] Custom Submit Button

Discussion in 'HTML & JavaScript' started by ouchthathurts, Nov 24, 2011.

  1. ouchthathurts

    ouchthathurts Regular Member

    Joined:
    Feb 16, 2011
    Messages:
    438
    Likes Received:
    654
    Occupation:
    SEO
    Location:
    Japan
    Hey guys,


    I bought a really nice theme from themeforest last week, first time ever buying a theme and have been waiting since then to get support for one extremely annoying problem.

    I got a php email form from some guys here at BHW which works amazingly, the only problem is the 'submit' button is ugly compared to the rest of the page.

    Here is the code

    <?php
    if(isset($_POST["submit"])) {
    $firstName = htmlspecialchars(trim($_POST["firstName"]));
    $lastName = htmlspecialchars(trim($_POST["lastName"]));
    $email = htmlspecialchars(trim($_POST["email"]));
    $website = htmlspecialchars(trim($_POST["website"]));

    $message = "First name: ".$firstName."\n Last Name: ".$lastName."\n Email: ".$email."\n Website: ".$website;

    mail("email@internet.net", "Sign Up", $message);
    }

    ?>
    <div class="sign-up-form">
    <form action="" method="POST">
    <p>Sign up for this awesome service, <em>it'll only take a second!</em></p>
    <ul>
    <li><label>First Name</label>
    <input type="text" name="firstName" /></li>
    <li><label>Last Name</label>
    <input type="text" name="lastName" /></li>
    <li><label>Email Address</label>
    <input type="text" name="email" /></li>
    <li><label>Website</label>
    <input type="text" name="website" /></li>
    <input type="submit" name="submit" value="Submit" />
    </ul>
    </form>

    <div class="cleaner"></div>
    <a href="./sign-up.php" class="call-to-action"> What are you waiting for?<strong>Get it Now</strong></a>
    </div>


    What im trying to do is have the class="call-to-action" be the input type='submit' button. Do you think this is possible?

    Heres a demo of the theme.


    As you can see the div class "cleaner" / class="call-to-action" has a really nice sign up button that I would like to use.

    Any help or tips would be greatly appreciated as my website is practically ready to go apart from this one annoying problem.


    Dam my hack n slash coding skills :eek:
     
    Last edited: Nov 24, 2011
  2. xpwizard

    xpwizard Junior Member

    Joined:
    Nov 6, 2010
    Messages:
    198
    Likes Received:
    122
    You just need to change the submit type input to a image one:

    Code:
    <INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
    (You can give it a class to have an indented button while hovering, but someone else can explain that ;))
     
    • Thanks Thanks x 1
  3. ouchthathurts

    ouchthathurts Regular Member

    Joined:
    Feb 16, 2011
    Messages:
    438
    Likes Received:
    654
    Occupation:
    SEO
    Location:
    Japan
    Thanks for replying but it isn't as easy as that with this theme, the image looks like this.

    [​IMG]

    I messaged someone on fiver seeing if they can do it for me aswel as adding a more advanced sign up that dumps the data into a database then emails me a copy at the same time
     
  4. sockpuppet

    sockpuppet Junior Member

    Joined:
    Nov 7, 2011
    Messages:
    155
    Likes Received:
    145
    try this:
    put the 'sign-up.php' in your form and give an id
    HTML:
    <form id="mform" action="sign-up.php" method="POST">
    
    and in the link you write
    HTML:
    <a href="document.forms['mform'].submit();" ...
    
    edit:
    i'm not sure if forms[id] works in all browsers, you can also try document.forms[0] (0 is the index of your form)


    edit2:
    you have to rename your submit button too, it clashes with the submit function
    and make it invisible
    HTML:
    <input type="submit" name="button_submit" value="submit" style="display:none" />
    
    also i forgot javascript in href
    HTML:
    <a href="javascript:document.forms[0].submit();" ...
    
    or use onclick
    HTML:
    <a href="#" onclick="document.forms[0].submit()" ...
    
     
    • Thanks Thanks x 1
    Last edited: Nov 28, 2011
  5. ouchthathurts

    ouchthathurts Regular Member

    Joined:
    Feb 16, 2011
    Messages:
    438
    Likes Received:
    654
    Occupation:
    SEO
    Location:
    Japan
    Still no luck man

    Had 4 people on fiverr say they could do it no problem, then after I send them a blank copy of my theme they have stopped responding (no money has been exchanged)

    I guess its just the way the themes set up, changing small things is a bit of a pain!


    If anyone thinks they could do it, I'm willing to send you a copy of the files (1 html file, 1 css file and image folder) and pay $5 itno your paypal!

    Heres a image of the problem

    [​IMG]

    *Mods* apologies if this is against the rules!