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

    When I press submit on my button the left edge gets cut off?

    Asked by peterotoole on July 21, 2012 at 12:54 PM

    When I press submit on my form, the left edge of the button gets cut off. Is there anyway to prevent this from happening?

     

    Thanks once again for all your incredible help.

    Screenshot
  • Profile Image
    JotForm Support

    Answered by abajan on July 21, 2012 at 01:32 PM

    To which form are you referring? If it's embedded in a web page, please provide the URL so that we can view the form in that context.

    Thanks for your compliment, by the way :)

  • Profile Image

    Answered by peterotoole on July 21, 2012 at 01:42 PM

    The form is embedded in my website. the address is www.peterotole.me.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by liyam on July 21, 2012 at 03:24 PM

    Hello peterotoole. Can you tell us the browser that you're using and also the Operating System of your computer?  Somehow I tried this using Firefox, Chrome, and IE8 and I didn't see the submit button getting cut off from the said browsers.

  • Profile Image

    Answered by peterotoole on July 21, 2012 at 03:50 PM

    Hi there! I am using Safari 5.1.7 on Mac using Mac OS X Lion 10.7.4

    Something to note is that it only gets cut off once you press the submit button. Thanks again!!

  • Profile Image

    Answered by peterotoole on July 21, 2012 at 03:53 PM

    I have since changed the style of the buttons in the hope that it would fix the problem but it's stil the same. The blue highlight gets cut off. Maybe an easy solution would be to disable this highlight. Is this possible?

  • Profile Image
    JotForm Support

    Answered by abajan on July 21, 2012 at 06:06 PM

    Okay, the change in button style is what prompted me to ask you to identify the form because I couldn't find any form looking like that in your account.

    Anyway, initially, I searched the submit button's stylesheet for the declaration causing the blue border, so that a rule could be injected to get rid of it but I now think that the style is browser generated. The best solution I can presently come up with would be to nudge the button to the right, just enough to allow the full border to be seen after the button has been clicked. (Your current injected CSS is probably responsible for the clipping of the blue border.)

    Inject the following rule and let us know if it helps:

    #input_2 {
    margin-left: 5px;
    }

  • Profile Image

    Answered by peterotoole on July 23, 2012 at 02:16 PM

    hi there and thanks again for your help. Just before I go to the last resort of moving the buttons right, i would love to see if another solution could be found. I managed to find this code online to disable Safari's blue highlighting but when i injected it into the CSS it doesn't work. Would you be able to tell me if it's possible to add this to the button to disable the highlight?

     

    input:focus { outline: none; }

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2012 at 03:45 PM

    Hi again

    You've found the solution!  :)

    It's just that the selector is incorrect. Changing the rule to the following should solve the problem:

    .form-submit-button.form-submit-button-carbon {
    outline: none;
    }


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2012 at 03:52 PM

    Incidentally, if you want to suppress the blue outline for everything, change the rule to the following:

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

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2012 at 04:02 PM

    LOL

    I forgot about the dropdown selector. Okay, to really stop the highlighting for everything, inject the following:

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

  • Profile Image

    Answered by peterotoole on July 23, 2012 at 04:02 PM

    Thanks abajan! I tired the fist line of code you supplied above and it removed the blue highlight on the sumbit button. I tried that new code but it doesn't seem to work. It removes the blue on the name field however but it's on the others and also back on the submit button. The last line of code you gave me removed it from the submit but this has strangely added it back and removed it from the name field?

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2012 at 04:06 PM

    After I posted the second code, I realized that a comma was missing. Try the latest code I posted and see if it works. It certainly does in this clone of the form.

  • Profile Image

    Answered by peterotoole on July 23, 2012 at 04:10 PM

    Abajan you are a genius! thanks a million!!!

    While I have you, can i ask you a few small other questions and I promise this is the last!!

    1: Is it possible to replace the buttons with your own buttons that have normal & overstates?

    2: Is it possible to integrate Typekit and use custom fonts?

    3: If I wanted to move all the headings in a few pixels, what code would I need?

    Thanks again for all your help! You have been so incrdibly helpful!!

     

  • Profile Image
    JotForm Support

    Answered by idarktech on July 24, 2012 at 12:52 AM

    Glad my colleague's solution works for you. He is indeed a Genius! :)

    While my friend isn't yet around, I guess, allow me to answer your questions.

    1. I can see that your form buttons is completely the same as Abajan's form buttons. Was this sorted out?

    2. Please check your separate thread about this: http://www.jotform.com/answers/115724-Is-it-possible-to-add-Typekit-fonts-to-Jotform#1

    3. If you're referring to Header Tool, you may try this CSS Code:

    .form-header-group {

    padding-left: 40px !important;

    }

    Change 40px to your desired pixels.

    I'm sure my friend would get back to you as soon as he gets ON.

    Hope this contributes. Feel free to contact us again if you need any further assistance. We're here to help you anytime.

    Thanks!

  • Profile Image

    Answered by peterotoole on July 24, 2012 at 03:17 PM

    Thanks idartech. What I actually meant with the buttons is can I change the buttons to my own custom uploaded graphics?

    In regards to the headers. What I meant here is... What code would I need to add to move my headings in a few pixels? Headings being 'Full Name', 'Email', 'Reason for Contacting' and 'Message'.

     

    Thanks again for all your patience with me. You've all been such amazing help. Peter

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 24, 2012 at 07:12 PM

    What I actually meant with the buttons is can I change the buttons to my own custom uploaded graphics?

    Yes, it is possible to set the Button Image for Submit button. If you would like to set the images for Print & Clear buttons, we can try to write some CSS for you.

    What I meant here is... What code would I need to add to move my headings in a few pixels? Headings being 'Full Name', 'Email', 'Reason for Contacting' and 'Message'.

    I would like to recommend you to set the Label Align Top for your Full Name field, so that all your fields will be aligned to Top.

    Then, you can inject something like:

    .form-label-top {

    padding-left: 10px;

    }

    Please feel free to contact us if you need any further assistance.

  • Profile Image

    Answered by peterotoole on July 25, 2012 at 03:41 PM

    Thanks for the info above! Is it possible to remove all the titles such as first name etc and replace with hint text like I have in the message box? This would make the form much cleaner. I would then need to adjust the spacing between the different fields and I think then I'd be finally, finally happy with everything! I so so grateful for all the help so far.

  • Profile Image
    JotForm Support

    Answered by idarktech on July 25, 2012 at 07:22 PM

    Yes, that's possible. You may use the following CSS codes to remove the field labels.

    .form-label-left, .form-label-top{

    display:none !important;

    }

    This would also reduce the field spacing. 

    Let us know if you need anything else. Thanks!

  • Profile Image
    JotForm Support

    Answered by abajan on July 25, 2012 at 08:02 PM

    @peterotoole

    Unfortunately, there's no hint example option in the form builder for Full Name fields. Your alternatives would be to either use Hover Text or replace the field with a text box for the first name and one for the last name. (As soon as you attempt to delete the full name field, you will be warned by the form builder about losing associated data. So, save copies of the current submissions if taking this route.)

    Having the First Name and Last Name fields appear on a single line as is currently the case with the Full Name field would require shrinking each of them and injecting CSS to bring the fields close to each other, as presently obtains with the Full Name field.

    I'll I've cloned the latest version of your form to see how best I can assist you with this. I'll be back...

  • Profile Image
    JotForm Support

    Answered by abajan on July 26, 2012 at 12:21 AM

    Okay, here's the clone. The only thing is that its appearance is not consistent from browser to browser. I tried in styling the "Reason for Contacting..." option to look different from the other options in the drop down and match the other placeholder texts but it was an exercise in futility. (Styling form controls can be tricky.)

    Incidentally, I noticed that a text area was used for the email field instead of the default. Was there any particular reason for this or was that just done in error?

  • Profile Image

    Answered by peterotoole on July 26, 2012 at 01:53 PM

    Oh that looks great abajan and thank you so much for taking the time out to try to get it to work. This might just do the trick!! Is it possible to clone this into my account on Jotform? thanks again!!

  • Profile Image

    Answered by peterotoole on July 26, 2012 at 01:56 PM

    Actually i just copied the URL and copied from source so i have it now. I will put it in place an and see what it looks like. In regards to a text area being used for the email. This was a mistake on my side, which is no surprise to me!!

  • Profile Image

    Answered by peterotoole on July 26, 2012 at 02:01 PM

    Just tried the code and it all looks brilliant. Is there anyway to now keep the font as Helvetica as it appears as Courier or something similar at the moment.

  • Profile Image
    JotForm Support

    Answered by jonathan on July 26, 2012 at 06:01 PM

    @peterotoole

    Hi, I checked your form, and it is already using Helvetica font. You can make sure of this by going to

    1. Setup & Embed

    2. Preferences

    3. Form Styles and Font Family

    Please inform us if you have further inquiry.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on July 27, 2012 at 08:38 AM

    @peterotoole

    It appears you've made the change to the CSS to achieve the Helvetica font that I was just about to suggest.

    Cheers :)

  • Profile Image

    Answered by peterotoole on July 27, 2012 at 08:57 AM

    hi Abajan, yeah I had a look at the code and changed the font as it was obvious what to change. I also replied to let you know I didn this but it might not have sent correctly. thanks for all your help to date. I think I am pretty happy with the form now but will let you know if I need to change anything in the future. you've been such a great help. thanks!