Achieving this?

  • Profile Image
    UrbanEdge
    Asked on December 19, 2013 at 11:09 AM

    Hi

    I would like to know how i can achieve the attached image using jotform.

    What i am struggling with is positioning the submit button directly to the right of the input field.

    The 'form' will be used as a mailing list submission in the footer of my site.

    Please let me know what further information you require.

    Thanks,

    Daniel

  • Profile Image
    Welvin
    Answered on December 19, 2013 at 02:12 PM

    Hi Daniel,

    I've made quick form for you. Get it here: http://www.jotformpro.com/form/33525436913960

    Clone it by following this guide and check how I manage to do the formatting. You can check injected custom CSS codes by following this guide: How to Inject Custom CSS Codes

    Let us know if you need further assistance.

    Thanks

  • Profile Image
    Welvin
    Answered on December 19, 2013 at 02:12 PM

    I'm sorry. Here's how you can clone the form: How to clone an existing form from a URL :) Cheers!

  • Profile Image
    UrbanEdge
    Answered on December 19, 2013 at 02:14 PM

    Hey

    Well i gave it ago: http://www.jotform.com//?formID=33525768582869

    Will look through your code to improve it though.

    Thanks for doing this.

    Daniel

  • Profile Image
    UrbanEdge
    Answered on December 19, 2013 at 02:15 PM

    Do you know how to remove the blue / grey border when you click in the field?

  • Profile Image
    EliezerN
    Answered on December 19, 2013 at 04:24 PM

    To remove it please insert this CSS code:

    .form-submit-button:hover

    {

    color: rgb(188, 188, 188)!important;

     

    }

     

    Please inform us if you need further assistance with this.
    Thanks
  • Profile Image
    UrbanEdge
    Answered on December 19, 2013 at 05:11 PM

    Hey,

    Sorry for not being clear but i'm looking to remove the grey border that appears around the input field when you click to start typing. It also appears when you click the submit btn.

  • Profile Image
    Cesar
    Answered on December 19, 2013 at 11:18 PM

    The blueish border may be imposed by Safari, just as it is yellow on Chrome. IE and Firefox do not generate this highlight color.

    Kindly try injecting the following code to supress the highlight:

    input:focus,
    select:focus,
    textarea:focus,
    .form-submit-button {outline: none;}

    This is my example form: http://form.jotformpro.com/form/33528760098967

    Do let us know if you need further assistance, thank you.

  • Profile Image
    UrbanEdge
    Answered on December 20, 2013 at 08:25 AM

    Thats great. Thank you very much Cesar.

    Great service as always from the JotForm team.

    Thanks.

  • Profile Image
    ardy0689
    Answered on December 20, 2013 at 09:50 AM

    Thank you for those kind words and for continued support. On behalf of my colleagues, you are most welcome, if you encounter any problems or have any inquiries, please do not hesitate to contact us again. Thank you