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

    Problem with form CSS.

    Asked by BBC2016 on January 30, 2017 at 06:33 PM

    Your codes made more problems than i had before! Please help immeditaly if possible!!!!!


    I need the box to be flush and aligned RH - it is STILL cut off. See image below. Marked in red.


    There is alot of space between the the last product option and the total section in blue. Can we pull that up a little bit or something??? See image below marked in red.


    The other most important thing is, when someone clicks BENEFACTOR option - they must enter an amount...but you cant click on the box to enter an amount!!!!!!!!!


    I cant get anything to work with the codes your sending. Please can u show me a preview before I go crazy with all this????

    Page URL:
    http://buildingbridgescoalition.org/registration-form/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Chriistian on January 30, 2017 at 09:31 PM

    There seems to be several errors on the css of the form, which may be why the codes provided were not working for you. To resolve this, please open the Advanced Designer and find the braces } on the lines 960, 962, and 964. Remove these braces to fix the errors.

    Now to adjust the fields based on your requirement, please find the section of the code on your form similar to the one below and update it with the one below. I have highlighted the changes I made in yellow.

    label[for="input_13_1006"] + br + br + span.form-sub-label-container {

        margin: 0 65px 0 0 !important;

    }

    Find this section and replace the margin with the highlighted code below to adjust the Total.

    .form-payment-total {

        max-width: 100%;

        text-align: right;

        margin-top: -50px;

        color: #1777B4;

    }

    Find and replace the "width" section of the code with the one highlighted below.

    #cid_13 span.form-product-item:nth-child(12) {

        position: relative;

        top: -40px;

        left: 20px;

        width: 70%;

    }

    If you are unable to find these in the advanced designer, then you can place the codes at the very bottom of the code so that they will override the previous ones.

    Here's the result:

    You can also clone my demo form here: https://www.jotform.com/70298579096978 

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

  • Profile Image

    Answered by BBC2016 on January 31, 2017 at 07:15 PM

    its supposed to look like this attached image i made in paint program. see attached and provide demo form clone please???????

     

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 31, 2017 at 08:37 PM

    The one on your latest screenshot seems to be for a different form. I also noticed that you have already posted a thread regarding this issue. To avoid any confusion, we will answer your concern on the thread that you posted here: https://www.jotform.com/answers/1052549 

    Thank you.