custom submit button

  • Profile Image
    marcusjmu
    Asked on July 19, 2010 at 07:36 PM

    Is there a way to customize the submit button? Upload a graphic or change the code somehow?

     

    thanks!

  • Profile Image
    aytekin
    Answered on July 20, 2010 at 02:26 AM

    It is not possible to change it on the form builder. What you should do is to get full form source code, copy it to your web site and then change the submit button to an image button instead.

    To get full source code, open your form on the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form"
    3. Click on "Advanced Options"
    4. Click on "Full Source Code".

  • Profile Image
    marcusjmu
    Answered on July 20, 2010 at 02:37 PM

    Do you have the code for this? I've tried two and it doesn't change the graphic.

  • Profile Image
    aprylprescan
    Answered on July 20, 2010 at 11:24 PM

    Hi! I am actually wondering this myself.

    Could you please specify how to do this exactly? Here is sample code for the form (after the CSS) What exactly do you change in the code below?

    Thanks!

     

    "<form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_1943141577" id="1943141577" accept-charset="utf-8">
        <input type="hidden" name="formID" value="1943141577" />
        <div class="form-all">
            <ul class="form-section">
                <li class="form-line" id="id_3">
                    <label class="form-label-left" id="label_3" for="input_3">  </label>
                    <div id="id_3" class="form-input">
                        <input type="text" class="form-textbox validate[Email]" id="input_3" name="q3_3" size="20" maxlength="75" />
                    </div>
                </li>
                <li class="form-line form-line-column" id="id_2">
                    <div id="id_2" class="form-input-wide">
                        <div style="text-align:center" class="form-buttons-wrapper">
                            <input id="input_2" type="submit" value="Get Report!" class="form-submit-button">
                        </div>
                    </div>
                </li>
                <li style="display:none">
                    Should be Empty:
                    <input type="text" name="website" value="" />
                </li>
            </ul>
        </div>
    </form>"

  • Profile Image
    aytekin
    Answered on July 22, 2010 at 07:31 AM

    Change this line:

                            <input id="input_2" type="submit" value="Get Report!" class="form-submit-button">

    If you search on Google, you will find many examples about image submit buttons. 

  • Profile Image
    aprylprescan
    Answered on July 22, 2010 at 11:37 PM

    Hi. Thanks for your reply! :-) So if we create our own submit button (jpeg), where exactly should the image be inserted in the code? (the above code you said to change) You said 'change this line'....can you give an example of what to change it to?

     

    Thank you for all your help. I love Jotform and am so glad I found it!

  • Profile Image
    aytekin
    Answered on July 23, 2010 at 04:21 AM

    You should replace that code with the image button code. 

    I cannot provide any code here. You will need to research Google and find out yourself, or hire a web developer. 

  • Profile Image
    aprylprescan
    Answered on July 23, 2010 at 11:49 AM

    I was just looking for an example of how the string should look with the inserted image code. Thanks anyway.

  • Profile Image
    RVRhacking
    Answered on August 13, 2010 at 02:41 PM

    brill thanks for the idea i mean the normal submit form is so dull

  • Profile Image
    axaris
    Answered on August 24, 2010 at 03:01 PM
  • Profile Image
    axaris
    Answered on August 24, 2010 at 03:01 PM