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

    Need blank text field for Pay Pal form

    Asked by justadream21 on October 13, 2011 at 12:13 AM

    I sell personalized Jewelry in which a person can have a name or a short phrase written on their jewelry. With the current pay pal form, there is only an option to add drop down or quantity boxes. There's no way for my customers to advise what name they want written on their jewelry which could easily be solved by adding a blank text field to the order form.

    Can someone look into adding this feature? Please?

  • Profile Image
    JotForm Support

    Answered by liyam on October 13, 2011 at 01:21 AM

    Hello,

    Your request can be one good additional feature so I will submit a ticket to our development team for this request. Unfortunately, I cannot provide a time lead to when this feature will be available.  You'll be informed once this is done.

    May we also know your thoughts on the possible functions on the text field for the payment tool that you are looking for? 

    For your present concern, based on your product list, you wish to have an individual text box for each charms, correct?  What we can do for now is align them to as such that each text box for the name will be aligned to the product group that you are selling.  Here's an example of the form I cloned with the CSS modified.  http://www.jotform.com/form/12852727278

    Feel free to clone the form if you wish.

  • Profile Image

    Answered by justadream21 on October 13, 2011 at 09:15 PM

    That would work great!!!!!! WOW thank you so much for your help. It is not very often that a company actually responds to its customers. Thank you!

  • Profile Image

    Answered by justadream21 on October 22, 2011 at 02:32 PM

    I don't know how to amend the form to add that option to each jewelry item. I think you only added it to six, not to mention that's only half of my jewelry inventory so I need to be able to add this free form text box myself. Any suggestions?

  • Profile Image
    JotForm Support

    Answered by liyam on October 23, 2011 at 07:15 AM

    First thing you need to understand is CSS.  I used CSS injection on this.  To learn more about CSS injection on your form editor here in JotForm, you can refer to this thread. You can try testing your form and remove the injection first, then do these steps:

     

    1.  I searched for the IDs of the li tags.  Here's an example of one tag enclosin the textbox:

    <li class="form-line" id="id_5">
            <label class="form-label-top" id="label_5" for="input_5">
              1st Single Charm Name:<span class="form-required">*</span>
            </label>

            <div id="cid_5" class="form-input-wide">
              <input type="text" class="form-textbox validate[required]" id="input_5" name="q5_1stSingle5" size="20" />
            </div>
          </li>

    2. Then I tried to identify all the IDs of these list (<li>) tags.  Here's what I found:

    id_5, id_6, id_7, id_8, id_9

    3. Now that we have the IDs, I inserted this code (Note: These IDs should be prefixed with a hash tag [#]):

    #id_5, #id_6, #id_7, #id_8, #id_9{
    margin-top: 35px;
    position: absolute;
    right: 0;
    width: 285px;
    }

    4. Now, after inserting the CSS, you will noticed that all will move to the right but will pile up in one area overflowing each other.  I then moved each list tag by inserting these codes:

    #id_6 {
    margin-top: 320px;
    }
    #id_7 {
    margin-top: 620px;
    }
    #id_8 {
    margin-top: 920px;
    }
    #id_9 {
    margin-top: 1210px;
    }

    Notice that I did not include #id_5, it's because it's no longer necessary to move it lower.

     

    Now if you ask, how can I add another text box and do the same?

    a.)  Insert a new textbox and save the form.
    b.)  Find the ID of the list tag where the textbox is.
    c.)  Once you found the ID, you can add it in the code in step 3. Example the ID of the tag is id_10

    ex: #id_5, #id_6, #id_7, #id_8, #id_9, #id_10{

    d:) Create another CSS code relevant for the id_10 ID:

    #id_10 {
    margin-top: 1310px;
    }

    Just adjust the margin to lower down the textbox from the top of the page.

    e:) Save your form and try viewing the form from the browser

     

    I know this is quite difficult to understand, But I do hope this helps some clarification regarding your concern. 

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

  • Profile Image

    Answered by justadream21 on September 11, 2012 at 12:10 AM

    I've tried to insert the CSS, and I read the previous post on how to inject CSS. I see where you can inject CSS, but firstly I am unable to see the rest of the CSS or HTML code to know what I am injecting where, and secondly when I copy and paste the above CSS code it doesn't show up. This is very complicated and I'm unable to do it ;( Honestly CSS may be something a bit more suited for web builders and I am not a web builder. Is there any way someone can simply add a 'blank form field' to the payment button?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on September 11, 2012 at 01:12 AM

    @justadream21

    Would you be amenable to a workaround as demonstrated in this sample form?

    If you noticed, a corresponding textbox field appears upon selecting an item from the list.

    The form above uses conditional logic to show/hide the textboxes.

    I suggest that you clone the said form to your account so you would be able to study how it works.

    If you need further information, please do not hesitate to ask.