What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Upload button width

    Asked by ipbr21054 on May 30, 2016 at 08:58 AM

    Hi,

    Here is the form in question 60854960060354

    I would like to make the width of the Upload Photo Button the same width

    as the fields above, Name,Email, etc etc.

     

    The reason being is i need to put text below this button but it will only show on one line because of the button width.

    If i make button width wider then i can put text all on one line.

     

    Please advise how i can make the button the same size as text box fields above.

    I can then edit my other forms.

    Thanks

    upload button width button width size wider custom CSS
  • Profile Image

    Answered by ipbr21054 on May 30, 2016 at 09:33 AM

    Hi,

    I have now found how to edit width.

    I have done this & edited my text.

    Please can you make Upload a Phone button center to page.

    For internet form & iphone form.

    Currently it is to the right & not center.

    I see the following code but not sure if this is where i need to edit or how to edit ??

    #cid_23 {
        margin : auto !important;
        width : 60% !important;
    }

    #cid_23 > div {
        margin : auto !important;
    }

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 30, 2016 at 10:55 AM

    Hi,

     

    Please try replacing the CSS you provided with the CSS below.

    ---------------------------------------------

    #cid_23 {

        margin : auto !important;

        width : 100% !important;

    }

    #cid_23 > div {

        margin : auto !important;

    }

    .qq-uploader {

    width: 100%;

    }

    .form-all .qq-upload-button {

    width: auto;

    }

    ---------------------------------------------

     

    To inject CSS to your form, please see How to Inject Custom CSS Codes.

    Do let us know if you need further assistance.

  • Profile Image

    Answered by ipbr21054 on May 30, 2016 at 11:26 AM

    That worked great but now pushed the Send button to the left & now not center.

  • Profile Image
    JotForm Support

    Answered by Jan on May 30, 2016 at 12:46 PM

    Please use this custom CSS code to align the "Send" button to center.

    #id_14 {
    margin: 10px auto !important;
    width: 350px !important;
    }

    Hope that helps. Thank you.

  • Profile Image

    Answered by ipbr21054 on May 30, 2016 at 01:01 PM

    Hello,

     

    That makes it center on the internet but not mobile iphone.

    See screen shot of iphone below,still left.

     

  • Profile Image
    JotForm Support

    Answered by Jan on May 30, 2016 at 02:05 PM

    You are correct. First, please erase the CSS code I provided above. 

    In the Form Designer, click the "Send" button. The Button Styles in the Design tab will appear. Click the "Center Alignment" icon at the bottom part. This will put the button to center. If you preview it on mobile devices, it'll appear at center as well.

    This is how it should look like in the mobile phone:

    Hope that helps. Thank you.

  • Profile Image

    Answered by ipbr21054 on May 30, 2016 at 02:29 PM

    Many thanks,great job.

    Have a nice evening.