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

    How to re-align Radio Button Option and Back button?

    Asked by oseojoy on August 13, 2013 at 04:38 PM

    i have to download my source code for further changes that i need to make to them. but before i can do that or be provided with instructions by jotform team on it, i need to fix this other option with 5 fields on one line and the rest on the line below and lined with above options in their own columns.

     

    UPDATE NEW FORM COPY

    http://jotform.us/form/32246169877163

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

    Screenshot
    other option JotForm source fields on one line
  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 06:00 PM

    Hi,

    You basically want it under Facebook option, right? Here's a clone version of your form with modified codes: www.jotformpro.com/form/32247136474959. You can simply cloned this form or replace your current Custom CSS codes to this one:

    #other_10 {

    margin-left: 150px !important;

    position: absolute !important;

    margin-top: -17px !important;

    }

    #input_10 {

    margin-left: 172px !important;

    position: absolute !important;

    margin-top: -20px !important;

    }

    .form-pagebreak {

    border-top: none !important;

    background: transparent !important;

    }

    .form-sub-label {

    color: #2A2A2A !important;

    }

    #form-pagebreak-back_388 {

    top: -59px !important;

    position: relative;

    left: 167px;

    }

    #input_2 {

    margin-left: auto;

    }

    The output:

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 06:27 PM

    The Codes has been modified! There's something wrong with the previous codes. Please kindly re-check. 

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 06:28 PM

    I would suggest cloning the form instead: http://www.jotformpro.com/form/32247136474959. Follow this guide: How to Clone a Form.

    Thanks

  • Profile Image

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

    Welvin

     

    I have other injected css in my form as well as what you just suggested, however, my results look not so great now for some reason after i entered this code. please see screen shot and ensure that you know which form is my current live update version. named beta launch

     

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

    I am going to attempt to undo these codes until you reply again.

     

    the form has been cloned and changed multiple times to this last version in the last few hours. we expect to go ahead and go live with this version after we fix this and couple of other alignment issues that i have asked about elsewhere and thus will leave the color picker for a later release of the form. 

    url of where it can be found www.joyphot obooth.com/#!0/c1nlp

    this referenced form is going to be our working interim solution until i get all these issues resolved first and then be able to move for all offline injections for color picker, etc. which i should be able to take care of it myself, falling back on these guides you have taken the effort and time to post for me.

     

    THANKS A BUNCH to you and your team! :)

  • Profile Image
    JotForm Support

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

    Hi,

    Can't you not just clone the form version by our colleague Welvin? This form http://www.jotformpro.com/form/32247136474959 - his version of the form is well aligned already.

    This are the CSS codes used in Welvin's form

     

       /* Injected CSS Code */

    #other_10 {

    margin-left: 150px !important;

    position: absolute !important;

    margin-top: -17px !important;

    }

    #input_10 {

    margin-left: 172px !important;

    position: absolute !important;

    margin-top: -20px !important;

    }

    .form-pagebreak {

    border-top: none !important;

    background: transparent !important;

    }

    .form-sub-label {

    color: #2A2A2A !important;

    }

    #form-pagebreak-back_388 {

    top: -59px !important;

    position: relative;

    left: 167px;

    }

    #input_2 {

    margin-left: auto;

    }

        /* Injected CSS Code */

     

    From what I can see in your form, the only CSS code that would matter if you want to merge it with Welvin's CSS codes is those that were use on the upload field. This CSS codes

     

    .qq-upload-button {

    cursor: pointer;

    -moz-border-radius: .5em;

    -webkit-border-radius: .5em;

    border-radius: .5em;

    padding: 8px 18px;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-shadow: -1px -1px 0px #C70042;

    border: 1px solid #CC0447 !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #faafd4;

    -webkit-box-shadow: inset 0px 1px 0px 0px #FAAFD4;

    box-shadow: inset 0px 1px 0px 0px #FAAFD4;

    background: #FF5C92;

    background: -moz-linear-gradient(top, #FF5C92 0%, #F00252 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF5C92), color-stop(100%,#F00252));

    background: linear-gradient(top, #FF5C92 0%, #F00252 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c92', endColorstr='#f00252', GradientType=0 );

    }

     

    .qq-upload-button:hover {

    border: 1px solid #CC0447 !important;

    background: #FF5CA0;

    background: -moz-linear-gradient(top, #FF5CA0 0%, #FF036C 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF5CA0), color-stop(100%,#FF036C));

    background: linear-gradient(top, #FF5CA0 0%, #FF036C 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5ca0', endColorstr='#ff036c', GradientType=0 );

     

    }

     

     

    If OK with you, my suggestion is like this.

    1. Clone Welvin's form http://www.jotformpro.com/form/32247136474959

    2. Append your CSS codes (only those mentioned above), to the existing CSS codes on the form.

    3. Update the other necessary changes needed i.e. the Email Notificaiton (recreate them if needed)

    Test and review the resulting form.

     

    I actually did my suggested steps -- and this is the resulting form http://www.jotformpro.com/form/32248202538955 . The form is aligned as suggested and the upload field have the CSS applied as well.

     

    Hope this help. Inform us if you need further assistance.

    Thanks.

     

  • Profile Image

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

    no cloning that form is no longer useful. 2 more hours of work has been logged and a whole lot of fields have changed around, hence his thing not working for me when copied directly. i wish i could do the easy route. but this is good enough of a guidance and clarification by jotform's always awesome backup :)

     

    you can see my valid form ends in 6146 and welvin did the work on an earlier version. but its all good, he knows his code and you totally cleared it up for me, leaving no room for question. i know exactly what i have to do now. and hopefully i can learn this stuff myself a bit and ask less and less questions and be able to use it for future clients and forms as well.

    i will go in manually (as i really personally want to experiment with the color picker thingy too that he helped me on elsewhere, gotta do source code updates) and find all the id fields and replace them with welvin's suggestions. if anything i clone his form and look up the ids in there to ensure i am going to change to the exactly equivalent field in my form.

    EDIT 1: Even your cloned form has something wrong with the back button on last page which kinda has been the issue to be resolved since before this post. I will play around with values to fix it though, i think i got it. will update.

    Thank you alll

     

    EDIT 2: so i just cleared my custom css section and reinput the codes given above, results:

    solved the issue with other option, nicely done

    but back button near the submit line still problematic, donno how to solve see image. this will basically do me and this form part if it gets done tonight, 12:30 am here and cant wait til this goes live so that my boss will be off my behind :)

     

    THANKS

     

  • Profile Image

    Answered by oseojoy on August 14, 2013 at 01:36 AM

    ANY help will be appreciated before me brain crashes tonight, not sure if you guys get a notification of "edits", so here is a manual bump just in case :) PLEASE SEE LAST UPDATES ABOVE

    i am so close to be done

    thanks

  • Profile Image
    JotForm Support

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

    @oseojoy 

    To align the back button with submit button use the following CSS codes. This also centers the 3 buttons in your form.

    Chrome:

    Firefox:

     

     

    .form-pagebreak-back-container{

    position: relative;

    top: -59px;

    left: 204px;

    }

     /*FF hack*/

    .form-pagebreak-back-container,  x:-moz-any-link, x:default  {

    top: -61px;

    left: 201px;

    }

    .form-buttons-wrapper{

    margin-left: 35% !important;

    }

    Hope this helps. Thanks!

     

     

  • Profile Image

    Answered by oseojoy on August 14, 2013 at 03:24 AM

    awesome!

     

    hey let me ask you this eltoncris, are you not the same guy that went by idarktech at some point in the past on these forums?

    but i need to know what part of previously posted codes from jonathan above do i need to remove, because i now see this.

     

     

    heres my injected stuff with all of what jonathan said and you posted with above results (line breaks manually added on this thread post only)

    /* Injected CSS Code */#other_10 {margin-left: 150px !important;position: absolute

    !important;margin-top: -17px !important;}#input_10 {margin-left: 172px !important;position:

    absolute !important;margin-top: -20px !important;}.form-pagebreak {border-top: none

    !important;background: transparent !important;}.form-sub-label {color: #2A2A2A

    !important;}#form-pagebreak-back_388 {top: -59px !important;position: relative;left:

    167px;}#input_2 {margin-left: auto;}/* Injected CSS Code */.qq-upload-button {cursor:

    pointer;-moz-border-radius: .5em;-webkit-border-radius: .5em;border-radius: .5em;padding: 8px

    18px;color: white;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;text-

    shadow: -1px -1px 0px #C70042;border: 1px solid #CC0447 !important;-moz-box-shadow: inset

    0px 1px 0px 0px #faafd4;-webkit-box-shadow: inset 0px 1px 0px 0px #FAAFD4;box-shadow: inset

    0px 1px 0px 0px #FAAFD4;background: #FF5C92;background: -moz-linear-gradient(top, #FF5C92

    0%, #F00252 100%);background: -webkit-gradient(linear, left top, left bottom, color-

    stop(0%,#FF5C92), color-stop(100%,#F00252));background: linear-gradient(top, #FF5C92 0%,

    #F00252 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c92',

    endColorstr='#f00252', GradientType=0 );}.qq-upload-button:hover {border: 1px solid #CC0447

    !important;background: #FF5CA0;background: -moz-linear-gradient(top, #FF5CA0 0%, #FF036C

    100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF5CA0), color-

    stop(100%,#FF036C));background: linear-gradient(top, #FF5CA0 0%, #FF036C 100%);filter:

    progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5ca0', endColorstr='#ff036c',

    GradientType=0 );}

    .form-pagebreak-back-container{position: relative;top: -59px;left: 204px;}/*FF hack*/.form-

    pagebreak-back-container,  x:-moz-any-link, x:default  {top: -61px;left: 201px;}.form-buttons-

    wrapper{margin-left: 35% !important;}

  • Profile Image
    JotForm Support

    Answered by Welvin on August 14, 2013 at 09:53 AM

    Hi,

    Yes, he's idarktech before :)

    Can you please let us know the updated form you have? So we can clone it again, check and see the errors that needs to be corrected.

    We are almost there. But I feel lost at this. :) Just the updated form you have.

    Thanks

  • Profile Image

    Answered by oseojoy on August 14, 2013 at 12:21 PM

    yes, current version of the form is this

    http://form.jotform.us/form/32250379966160

    i promise i wont switch on u welvin! this is already live on our site. so any changes u do, i will directly update the site, i hope they work this time, im sure they will.

  • Profile Image
    JotForm Support

    Answered by Welvin on August 14, 2013 at 02:41 PM

    Hi,

    I've fixed it. Get the CSS Codes here: http://pastebin.com/CKXtZWia and replace all your current forms codes to this one.

    Results = 

    FF: https://shots.jotform.com/welvin/screen/c7wve1h9vs.png

    Chrome: https://shots.jotform.com/welvin/screen/1pmr5hxfqr.png

    IE: https://shots.jotform.com/welvin/screen/lkkwtm9cjt.png

     

    Thanks