How to align my form buttons and use images for the buttons background

  • Profile Image
    devignedenis
    Asked on May 26, 2014 at 03:55 PM

    I am having trouble lining up my submit buttons so they look great. 

    We would like the EXIT and the ENTER buttons side by side.

    Here is the enter button:

    Here is the Exit button:

     

    Please advise.

     

    :)  Thanks so much!

  • Profile Image
    EliezerN
    Answered on May 26, 2014 at 05:06 PM

    Hi,

    I think this is the form you are talking about: http://www.jotform.ca/form/41320459069252

    Is this what you are looking for? http://form.jotform.co/form/41456218277862

    If so, Please follow these steps to get your form buttons working properly:

    1. Copy the next html code and paste inside your Text of your Enter field:

    <p><a target="_blank" href="http://shout96.wix.com/sop3#!home/mainPage" ><img src="//oi61.tinypic.com/2pt9s09.jpg" alt="" /></a></p>

    Please note that in my form I changed the href value of the enter button to https://www.jotform.com.

    2. Then, inject this CSS code to your form: 

    #text_84, #cid_84

    {

    width:138px !important;

    height:48px !important;

    margin-top:5px !important;

    }

    #id_84

    {

    position:absolute !important;

    margin-top:-5px !important;

    width:138px !important;

    }

    .form-buttons-wrapper

    {

    margin-left:150px!important;

    margin-top:19px !important;

    }

    Here is how to inject CSS codes to forms: How to inject custom CSS codes

     

    Then your form will look this way:

    Please inform us if you need with this query.

    Thanks

  • Profile Image
    devignedenis
    Answered on May 30, 2014 at 10:06 AM

    Yikes, It did not come out right for me...

    http://www.jotform.ca/form/41320459069252

     

    Please advise !  thank so very mcuh!

  • Profile Image
    Carina
    Answered on May 30, 2014 at 11:42 AM

    Upon inspecting your form I could not find the html code suggested by my colleague inside the Text field:

    <p><a target="_blank" href="http://shout96.wix.com/sop3#!home/mainPage" ><img src="//oi61.tinypic.com/2pt9s09.jpg" alt="" /></a></p>

     

    I also added the condition that will show the enter button only if option yes is chosen:

    If you wish you can clone this form:

    http://form.jotformpro.com/form/41495043040950?

    Let us know if the problem persists.

    Thank you

  • Profile Image
    devignedenis
    Answered on May 30, 2014 at 11:41 PM

    The big red buttons ENTER and EXIT are missing on the form...

    on the clone....  Like below

    Please advise

  • Profile Image
    TitusN
    Answered on May 31, 2014 at 09:40 AM

    Hello,

    We sincerely apologize - but that text will get cleared for security reasons.

    Why not use a second Submit button - change the Button Image, and then program the form to send it to the URL of your choosing?

    I've prepared a demo here - please examine it and advice.

    Thanks.