How can I customize the submit button?

  • Profile Image
    nensusa
    Asked on May 21, 2011 at 02:59 AM

    Hi there, I have a quick q:

    Is there a way for me to customize the submit button?

     

    Thanks!

  • Profile Image
    abajan
    Answered on May 21, 2011 at 10:16 AM

    Hi nensusa

    Yes, the submit button can be customized. For instance, you can just change its text by clicking it and then clicking "Submit Text" in the toolbar, editing the text, clicking "OK" and saving the form:

     

    You can also completely replace the button provided with an image. Just enter the image's URL in the "Button Image" box and Presto!:

     

    Was these the sort of things you were thinking of doing? Please let us know if you need additional information regarding this or any other aspects of our forms.

    Thanks for asking.

     

    ~ Wayne

  • Profile Image
    abajan
    Answered on May 22, 2011 at 12:19 AM

    Nensusa's reply in my email:

    Yes, thank you. Don't understand image URL as I am not a programmer, can I just point to an image on my desktop? Also when I look at my form in my website I see that it is offset to the right not aligned left like the rest of my content , I'd there anything I can do?

    ------------------------------ End of message -----------------------------------

    Hi nensusa

    To get the current button lined up correctly, please load the form in question into the form builder and go to Setup & Embed > Preferences > Form Styles > Inject Custom CSS and type:

    .form-buttons-wrapper {
    margin-left:159px !important;
    }

    (As shown in this screenshot)

    When done, click "Close Settings" and save the updated form.

    To address your first question, no, you cannot just point to an image on your desktop (unless your computer is operating as a server). The image needs to be uploaded first and then its URL (the address of where it's located on the Internet) needs to be put into the "Button Image" text box I showed in my previous post.

    If you have an image already prepared, here's one way to upload it and get the URL:

    1. On a separate tab or window to the form builder, go to https://www.jotform.com/help/image_upload.php?naked=true and click "Choose File"

    2. A folder on your computer will open. Navigate to the image of the submit button that you want to use

    3. When you find it, either double-click it or click it and then click "Open"

    4. When the folder disappears from the screen, click "Send Image" and you will see the image load. At this point, the image has been uploaded and its URL is in the text box labelled "Image URL:"

    5. That URL needs to be copied. Place your mouse in the box, click it and when you see the insertion point blinking in the box, press the "Ctrl" key and while that key is being pressed, press "A". This will select all of the URL. (It will turn to white text on a blue background, if your computer is set to its default theme.)

    6. Release the "A" key and while "Ctrl" is still being pressed, press "C". This action will copy what is selected (the URL) to the clipboard

    7. Return to the tab or window containing the form builder and click the submit button field

    8. Click the "Button Image" toolbar button and then click inside the blank text box with the mouse. Once again you will see the insertion point blinking

    9. Press "Ctrl" and "V" to paste the contents of the clipboard (the URL of the button you would have uploaded) into the text box.

    10. Click "OK" and save the change

    At this point you should see your new submit button occupying the space where the default button was. You may need to adjust the value (159) of the left margin a bit in the injected CSS code I provided above, to get it lined up properly with the rest of the form.

    Hopefully you found this post useful in attaining your objective. Please don't hesitate to ask for clarification of anything stated above.

    Thanks and Good Night from Barbados :)

     

    ~ Wayne

  • Profile Image
    nensusa
    Answered on May 22, 2011 at 01:00 AM
    Thanks Wayne,

    Thank you for explaining the image url!

    When I placed in the code the "send" link moved further out
    instead of aligning left with the form field it is now moved further
    out right

    My original question was how I could move the entire form to align
    with the rest of the content on my site
    see attachment (the form is moved 43 pixels in from the rest of the
    content (see CONTACT header)

    Thanks again,
    Susanne







  • Profile Image
    NeilVicente
    Answered on May 23, 2011 at 11:26 AM

    Hello Susanne,

    Glad that one of our team members, Wayne, was able to help you with your question. Can you post again the screenshot (or the address, if possible) of the site where the form is embedded? It will definitely help us visualize what it is that you want to accomplish.

    Thank you for your cooperation. We will be waiting for your response.


    Regards,
    Neil

  • Profile Image
    nensusa
    Answered on May 23, 2011 at 08:53 PM
    Hi Neil,

    Thank you for helping!
    Am attaching the jpg (unfortunately I had to take the link off the
    site as I have problems receiving emails to that address at the moment),
    but I am attaching the JPg of the screenshot:




  • Profile Image
    nensusa
    Answered on May 23, 2011 at 09:01 PM
  • Profile Image
    nensusa
    Answered on May 23, 2011 at 09:03 PM

    see jpg below:

  • Profile Image
    nensusa
    Answered on May 23, 2011 at 09:03 PM

  • Profile Image
    NeilVicente
    Answered on May 24, 2011 at 04:25 AM

    Hi Susanne

    I apologize but I cannot solve your problem just by looking at the screenshot. I would appreciate it if you could give me the exact address to the page (you can take out the link in the menu if you want).

    There are a lot of probable solutions to this, but we can never know which one would work unless we see the source code of the page itself.

    We'll be waiting for your response. Let us know if there's any additional information that could help us in assisting you with this concern. Thank you.


    Neil

  • Profile Image
    nensusa
    Answered on May 24, 2011 at 10:55 AM

    http://susanne_kunkele.prosite.com/4992/contact

     

    Thank you!

  • Profile Image
    NeilVicente
    Answered on May 24, 2011 at 02:44 PM

    Inject this custom css codes in your form:

    .form-line {
    padding-left: 0;
    }

    .form-all {
    margin: 0;
    }

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Paste the css codes in the Inject Custom CSS textarea

     

    Let me know how it works for you. Thank you for using Jotform.


    Neil