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

    custom submit button and text alignment

    Asked by jkielty on October 16, 2012 at 01:44 PM

    Hi,

    I would like to use a custom submit button or program the submit field to that area of my site.  I also would like to have the text  left aligned to the email box. When I align it left, it stays on the top.  I have shrunk these fields to be side by side.

    See attached

     

    thanks julie

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Rodjit on October 16, 2012 at 03:40 PM

    Hi Julie,

    I just give you the instructions on how to put custom submit button image. Thread here.

    To put custom image for submit button; see visual guide

    I have done creating a sample of the form you want to achieve;

    https://www.jotform.com/form/22895524777974? please feel free to clone and modify it to suit your needs. And see how I manage to inject custom CSS codes into it.

    Thanks


     

  • Profile Image

    Answered by guest_22746046019048 on October 17, 2012 at 12:55 PM
    Hi there,
    the link for the form you made for me says it's invalid.
    I did inject the CSS from what you posted but it is still not changing the padding.
    See attached.
    Thanks for you help!
    ________________________________
  • Profile Image

    Answered by jkielty on October 17, 2012 at 12:57 PM

    Hi,

    I just sent you an email.  The link you posted is not valid.  Can you resend.

    I did inject the CSS above, but it is still not appearing to change the padding.

    Thanks for your help!

     

     

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 17, 2012 at 01:24 PM

    Hi there,

    May I ask which link is not valid?  I have tested all the links and they all seem to be working fine.

    Please take a look at the form that my colleague posted here.

    Is this the result you are looking to accomplish?

    If so, you can clone that form and use the settings that have been applied.

    If it is not what you are looking for, please do let us know and we will be glad to continue to troubleshoot for you.

  • Profile Image

    Answered by jkielty on October 17, 2012 at 01:26 PM

    http://www.jotform.com/form/22895524777974

    I keep getting an invalid form error

  • Profile Image

    Answered by pinoytech on October 17, 2012 at 01:32 PM

    Hi,

    Your form is working fine in my end and I wasn't able to reproduce the said issue of your form. Can you please try to delete your browser cache and cookies?

    Thanks.

  • Profile Image

    Answered by jkielty on October 17, 2012 at 03:17 PM

    Thanks I see it now.

    Can you clone a form with just the two fields and the submit button?

     

     

     

     

  • Profile Image

    Answered by pinoytech on October 17, 2012 at 03:35 PM

    No, that is not possible. You need to clone your form first, then remove unwanted field/update. Please follow this guide: http://www.jotform.com/help/27-How-to-Clone-an-Existing-Form

    If you need further assistance, feel free to contact us at anytime.

    Thank you!

  • Profile Image

    Answered by jkielty on October 17, 2012 at 04:02 PM

    Hi,

    Sorry I meant can you make a form with just the two fields and the submit button for me to insert into my CSS. I've been trying to do this although I'm having trouble with moving the fields up (what is the css for the fields not the lable?).  I've also not had luck moving the submit button up modifying the CSS you made.  I've changed the margin/padding but noting happens.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Mike_T on October 17, 2012 at 04:12 PM

    Can you try to Clone the following form?

    http://form.jotformpro.com/form/22906647372964

    It should not be affected by invalid form error.

    Thank you.

  • Profile Image

    Answered by guest_22746046019048 on October 17, 2012 at 04:15 PM
    Yes I did clone that but it still needs adjusting to fit and I also didn't want the graphic part to now be a png that I cannot edit.
    thanks
    ________________________________
  • Profile Image
    JotForm Support

    Answered by Mike_T on October 17, 2012 at 05:01 PM

    You can simply remove or change the background .png from injected CSS code.

    I have removed background from the following form, and added example CSS for positioning:

    http://form.jotformpro.com/form/22906647372964

    You can check CSS classes and element IDs using browser tools for web development like Firebug. In Chrome you can right click on some element and then use a Inspect Element option.

    If you need any further assistance, please let us know.

  • Profile Image

    Answered by guest_22746046019048 on October 18, 2012 at 03:28 PM
    I'm working off the form that was cloned however, when I try to change the margin or padding of the submit button, it does not do anything to the button. I am trying to make the button more centered vertically in the box and over a bit to the right.
    See attached screen shot. Here is my form: http://form.jotform.us/form/22914903420144
    ________________________________
  • Profile Image
    JotForm Support

    Answered by Mike_T on October 18, 2012 at 05:33 PM

    You may try to play with the #cid_2 id to change the position of the Submit button image.

    For example, try:

    #cid_2 {

    margin-top: -5px;

    margin-left: -22px;

    }

    Unfortunately, screenshots can not be attached to the posts, but you can embed them. Thank you.

  • Profile Image

    Answered by guest_22746046019048 on October 19, 2012 at 11:30 AM
    Great. thank you so much
    ________________________________
  • Profile Image

    Answered by guest_22746046019048 on October 19, 2012 at 11:40 AM
    Hi again,
    This is not working in IE8 on a PC. The background does not show up. Is there fallback code?
    Thanks
    Julie
  • Profile Image
    JotForm Support

    Answered by Rodjit on October 19, 2012 at 02:16 PM

    Hi,

    Is this your output, http://www.jotform.com/22894742248160? There is no background or any image background that is injected into this.

    This is my output from the first place: http://jotformpro.com/form/22895524777974, this needs more customization.

    Thanks

  • Profile Image

    Answered by guest_22746046019048 on October 19, 2012 at 02:35 PM
    No. This is my output: http://form.jotform.us/form/22914903420144
    And here is the CSS:
    .form-all{
    background: url('http://balancepro.org/balanceproNEW.org/HTML/images/quicktipsbg2.png')no-repeat;
    padding-top: 70px;
    position: relative;
    padding-left: 200px;
    }
    .form-label-left {
    width: 50px !important;
    margin-right:-7px;
    }
    #label_3 {
    margin-left: -40px;}
    .form-submit-button, .form-submit-reset, .form-submit-print {
    margin-top: 10px;
    margin-left: -50px;
    }
    .form-section, .form-section-closed {
    margin-top: -75px;
    }
    #cid_2 {
    margin-top: -5px;
    margin-left: -33px;
    }
    .form-line-error .form-error-message {
    display: none;
    }
    .form-line-error {
    background: transparent;
    }
    .form-button-error {
    display:none;
    }
  • Profile Image

    Answered by jkielty on October 19, 2012 at 03:13 PM

    hi,

    the submit button also is not aligned correctly in different browsers.  The CSS does not seem to be rendering the same in Mozilla, Chrome and IE. What is the fix for this?

  • Profile Image
    JotForm Support

    Answered by liyam on October 19, 2012 at 03:57 PM

    Hello,  jkielty.  I checked your form on different browsers and it somehow appears to be properly aligned.  To ensure that what we see is how it appears, can you please provide us a screenshot how it appears on your view?

    Thanks

  • Profile Image
    JotForm Support

    Answered by liyam on October 19, 2012 at 04:01 PM

    In addition, on your CSS background code, can you please insert a space between the URL image reference value and the no-repeat?

    background: url('http://balancepro.org/balanceproNEW.org/HTML/images/quicktipsbg2.png')*insert here*no-repeat;

    This is because the missing space in between makes the background image to not appear on IE browsers

    Thanks.

  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 11:07 AM
    Awsome! That fixed the background for IE8.
  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 11:07 AM
    Hi,
    Attached is a screen shot of Firefox and Chrome side by side. In Safari and IE8 it appears more like it does in Chrome. In Chrome the submit button has a rounded top corners which is not in the design. There also appears some sort of box (very subtle) around the submit button. In Chrome the top corners are rounded and the bottom of the button is straight.
    Thanks for your help!
  • Profile Image
    JotForm Support

    Answered by idarktech on October 22, 2012 at 11:19 AM

    Hi there,

    Sorry but we can't find your attachements. If you've replied via E-mail, please post here your screen URL's instead: http://www.jotform.com/answers/139252-custom-submit-button-and-text-alignment#23

    You can use http://pasteboard.co for screenshot uploads.

    Thanks!

  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 11:25 AM
    Here is the link:
    http://pbrd.co/SdVz0Y
    thanks
  • Profile Image

    Answered by pinoytech on October 22, 2012 at 11:30 AM

    Hi,

    I've cloned your form and made some workaround on it. Can you please take a look at this form on different browser?

    http://www.jotformpro.com/form/22954078518967

    Thanks,

  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 11:36 AM
    The submit button looks better but it still is over too far to the left on Chrome, IE, Safari. Looks most like it should in Firefox.
  • Profile Image

    Answered by pinoytech on October 22, 2012 at 11:44 AM

    Can you please check it again? http://www.jotformpro.com/form/22954078518967

    Thanks,

  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 11:56 AM
    Same thing. It looks the same on Chrome, Safari, IE8, but different in Firefox. The button in the first 3 browsers needs to be further to the right closer to the end of the long rectangular box.
  • Profile Image

    Answered by pinoytech on October 22, 2012 at 12:08 PM

    Kindly check it again. http://www.jotformpro.com/form/22954078518967

    Thanks,

  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 12:33 PM
    It looks good in Chrome, IE8 and Safari and Firefox on PC, but Firefox on Mac looks like this:
    http://pbrd.co/VjZrfm
    Also FF on PC the font has changed. How can I fix that?
    Thanks
  • Profile Image

    Answered by guest_22746046019048 on October 22, 2012 at 03:48 PM
    Hi there,
    Did you get my last reply:
    It looks good in Chrome, IE8 and Safari and Firefox on PC, but Firefox on Mac looks like this:
    http://pbrd.co/VjZrfm
    Also FF on PC the font has changed. How can I fix that?
    Thanks
  • Profile Image
    JotForm Support

    Answered by Rodjit on October 22, 2012 at 07:04 PM

    Hi,

    Please remove;

    margin-left: 55px !important;

    from your injected codes;

    .form-submit-button-img {

    margin-top: 1px !important;

    margin-left: 55px !important;

    }

    And do the adjustments on the background image. Use photoshop to scale it so its end won't be something wider.

    Font looks the same, nothing had change when I viewed it on FF.

    Thanks

  • Profile Image

    Answered by guest_22746046019048 on October 23, 2012 at 10:57 AM
    Hi,
    I'm not asking for you to adjust the background image. I'm having browser imcompatibilities that have not been solved. Why are the fields longer in FF then in Chrome. Also look at the submit button placement. Screen shot in link.
    http://pbrd.co/Rf3Y4m
    Thanks,
    Julie
  • Profile Image

    Answered by fxr on October 23, 2012 at 02:01 PM

    Hi Julie,

    Its the highly customised CSS that is not compatible with all these browsers. 

    You may have to simplify the form to get proper cross-browser support again. 

    I will review what options you have in a couple of hours. 

  • Profile Image

    Answered by guest_22746046019048 on October 23, 2012 at 02:13 PM
    OK thanks, I appreciate it.
  • Profile Image

    Answered by fxr on October 23, 2012 at 06:56 PM

    I still think this CSS could and should be simplified

    But, this is has the submit button alignment is out by one pixel (top) on Firefox. 

    --

    Test form is here: http://form.jotformpro.com/form/22966483320961

    --

    Jotform CSS editor is stripping out the @ sign used for the Firefox specific CSS.

    ( I will try and figure out how to fix that tomorrow morn )

     

    Update your form to use this CSS:

    .form-all{

    background: url('http://balancepro.org/balanceproNEW.org/HTML/images/quicktipsbg3.png') no-repeat;

    padding-top: 70px;

    position: relative;

    padding-left: 200px;

    }

    .form-label-left {

    width: 50px !important;

    margin-right:-7px;

    }

    #label_3 {

    margin-left: -40px;}

    .form-submit-button, .form-submit-reset, .form-submit-print {

    margin-top: 10px;

    margin-left: -50px;

    border: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    webkit-border-radius: 0px;

    border-radius: 0px;

    }

    .form-section, .form-section-closed {

    margin-top: -75px;

    }

     

    .form-line-error .form-error-message {

    display: none;

    }

    .form-line-error {

    background: transparent;

    }

    .form-button-error {

    display:none;

    }

     

    .form-textbox {width:120px !important;} 

    .form-label-left {font-family:'Verdana' !important; font-weight:normal !important;}

     

    #input_2 {

    position:absolute; top:1px; left:35px;

    }

     

    /* Firefox 3.0+ */

     @-moz-document url-prefix() {

                            #input_2 {

                            top:0px;

                        }

                        }

  • Profile Image

    Answered by guest_22746046019048 on October 24, 2012 at 01:51 PM
    Thanks, but this form isn't working.
  • Profile Image
    JotForm Support

    Answered by Mike_T on October 24, 2012 at 04:10 PM

    Mentioned form is working fine from my side. If it is still not working for you, please let us know how to reproduce the problem.

    Also, you may take a look at this tutorial to find out how to Clone Fxr's form to your account.

    I would also recommend you to either remove or edit first Email Notification, as it is pointed to Rodjit's email address.

    Thank you.

  • Profile Image

    Answered by guest_22746046019048 on October 24, 2012 at 04:25 PM
    Thank you. I did clone and it is working. Do you know if Fxr is still working on a fix for the submit button being off by 1px in FF?
  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 24, 2012 at 05:04 PM

    Hi there!

    We are glad your form is working as you wanted it!

    I will notify Fxr of you rinquiry and he will get back to you when he has a chance.