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

    Signup form needs help aligning prices and move price box

    Asked by BBC2016 on April 25, 2016 at 11:21 PM

    can u help me make the top of my contact form look like the attached image I made for you?

     

    HELP ON:

    There should be a black line at the top that ends like shown in the image length should be like image.

    The title should be MEMBERSHIP TYPE

    The product amount should be on the RIGHT side.

    The Patron Member Donation price box should be on the RIGHT under the other amounts

    The   ($500 and above) should be under the Patron product title

    The total should be blue and under the price box

    There should be a black line at the bottom like shown in the image, length should be like image.

     

    who can help me with this??? Im going nuts!!

    Thanks for being AMAZING!!!!!

     

    https://form.jotform.com/60588171931157

    Screenshot
    prices move and aligning
  • Profile Image
    JotForm Support

    Answered by Charlie on April 26, 2016 at 04:23 AM

    This link https://form.jotform.com/60588171931157 you shared does not have any products or membership type on it. It just shows the basic contact form fields:

    I presume you are referring to this form: https://form.jotform.us/60548442926158?

  • Profile Image

    Answered by BBC2016 on April 26, 2016 at 03:49 PM

    yes. can u provide css?

  • Profile Image

    Answered by BBC2016 on April 26, 2016 at 03:57 PM

    i wait so long for a response just to be asked about what form....u provided the right link. can u please provide css??? please??? how long will it take to respond? Ive waited hours already.

  • Profile Image
    JotForm Support

    Answered by david on April 26, 2016 at 06:53 PM

    Adding this code to your form should allow you to align your product prices to the right:

    .form-product-details b {
        float : left;
        margin-left : 400px;
        margin-top : -20px;
    }

    #id_13 {
        max-width : 500px;
    }

    Here is how the form would look with the change made:

    https://form.jotform.com/61166743517963

    You can clone the form to your own account if you would like:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image

    Answered by BBC2016 on April 26, 2016 at 08:07 PM

    thanks for your help so far but you forgot some stuff that i needed help on I wrote it at the top of these messages! I hope I dont have to wait HOURS for another response.

     

    please I' typed ALL this out so this wouldnt happen - please help on:

     

     

    There should be a black line at the top that ends like shown in the image length should be like image.

    The title should be MEMBERSHIP TYPE

    The Patron Member Donation price box should be on the RIGHT under the other amounts

    The   ($500 and above) should be under the Patron product title

    The total should be blue and under the price box

    There should be a black line at the bottom like shown in the image, length should be like image.

     

  • Profile Image
    JotForm Support

    Answered by Charlie on April 27, 2016 at 01:40 AM

    Please note that we can assist you in creating and designing your forms by giving you some resources and some quick CSS codes. However, it would be best if you learn CSS coding if you would like to design your form using that method. Knowledge with CSS + Form Designer Tool will allow you to make changes on your form from basic to advance.

    The problem on this is that the form has a lot of CSS code, continuously adding CSS code on it without actually cleaning it up and having a solid plan or design will most likely cause problems in your end in the future.

    In this case, you already have around 1,000 lines of CSS code, if we just added again a new CSS code without considering the existing one, then we might add conflicts on it and errors will start to show up. I went ahead and cloned my colleague's form and made the redesign as per your requirement. Here's the cloned form: https://form.jotform.com/61170167302950. You can clone my form by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    The CSS code I have is added at the very bottom of the CSS line, I have attached comments on them so that you can see what CSS code block points to the element.

    Here are some guides to help you get started:

    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started 

    Here's the link to our video tutorials in using the Form Designer Tool:

    https://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- 

     

    I hope that helps.