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

    clueless with css: style file upload button like my pagebreak and submit buttons

    Asked by oseojoy on August 13, 2013 at 05:29 PM

    how to do this on the form mentioned?

    Page URL:
    http://form.jotform.us/form/32246420096146

    style
  • Profile Image
    JotForm Support

    Answered by EltonCris on August 13, 2013 at 06:25 PM

    Hi,

    Copy the CSS codes in the following URL and inject it to your form. 

    CSS: http://pastiebin.com/520ab205b9793

    Result: http://form.jotformpro.com/form/30627757709969?

    Cheers!

  • Profile Image

    Answered by oseojoy on August 13, 2013 at 06:33 PM

    sweet!

     

    now if you don't mind, how do i make the text font color on this button white? nvm looked wrong in form editor, looks fine on preview. white as it gets :)

     

    and how can i center the button to my form field, without centering the field title/instructions. (subtitle can be centered as long as it expands all the way across, otherwise it is working just fine now.

  • Profile Image
    JotForm Support

    Answered by jonathan on August 13, 2013 at 08:15 PM

    Hi,

    Are you referring to the Submit button?

    The submit button have the "Button Align" property which you can set to "Center" 

     

    This will center the button with reference to the form.

    But perhaps this is not what you need since it look misplaced.
    The original "Auto" align seems much better. Tell us how you meant it centered and in reference to what.

    Thanks. 

     

  • Profile Image

    Answered by oseojoy on August 13, 2013 at 08:41 PM

    Hi jonathan, nope i am not, perhaps did confuse you guys a bit with my 2nd statement in my later post.

     

    UPLOAD button - align center ?

    still in need :)

     

    this is just a follow up question to the original question which has been answered perfectly already

     

    latest update and refreshment of the same form is here with the provided answer already incorporated

    http://form.jotform.us/form/32246420096146 

     

    I do want this however which i have posted about and waiting for separately:

    put working back button nicely next to submit and clear on the same line, and then have them all three centered in relation to for width. I also want my other page breaks centered but they have no such option and i am horrible with code finding and writing myself as you can tell. need that CSS magic for them, but do not want to confuse and mix topics like happened yday. so lets keep this one to the topic at hand, center upload button.

     

    however if you like to help me out with what you broght up yourself, please see my other thread. see my screenshot that shows the submit and back button messed up still. but that thread is also about another topic as you can see. once all that is fixed and if i had not gotten the alignement on page breaks and back/submit/clear correct yet, then i will post one final thread about it specifically. 

     

    Thanks as always guys

  • Profile Image
    JotForm Support

    Answered by jonathan on August 13, 2013 at 11:45 PM

    Hi,

    Can this modification on the size of the upload field button acceptable?

    http://jotformpro.com/form/32247973610960

     

    Instead of moving the upload button left/right to center it on the form, I resized it instead so that it aligns with the other fields on top.

    I added this CSS code 

     

    .qq-uploader {

    width: 287px;

    }

     

    Tell us your feedback.

    Thanks.

  • Profile Image

    Answered by oseojoy on August 14, 2013 at 12:07 AM

    nope. my form is 800+ pixels wide.

     

    the form you see here is just a sample form your coworker posted, its nothin to do with my actual form which you have seen in the other thread and has hundreds of conditions and fields about photo booth :)

     

    there is an upload button on the last page of that form and i have gotten it to look like the one here so far, and just need to pull it to center of my form in the current existing size of the button.

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 14, 2013 at 02:29 AM

    @ oseojoy

    How about this?

    #cid_389{

    margin-left: 300px;

    }

    Result:

    Let us know if you want further adjustments. You can also play around with the px value.

  • Profile Image
    JotForm Support

    Answered by jonathan on August 14, 2013 at 02:38 AM

    Hi,

    You can try adding this code on the that big form...

     

    .qq-uploader {

    position: absolute;

    margin-left: 30%;

    }

    Give us your feedback.
    Thanks.
  • Profile Image
    JotForm Support

    Answered by jonathan on August 14, 2013 at 02:39 AM

    I apologize, I did not realize that my colleague had responded to it already.

    Nonetheless, it seems our suggestion is close to similar. You may want to apply his code instead since he is the better CSS coder. =)

     

    Thanks.