Copying form fields

  • garymichael
    Asked on April 2, 2017 at 8:11 PM

    Hi, Is there a way to copy and form field and keep the styling placed on it?  Currently, when I copy a field I have to redo the enter styling in the css section.

    Is there a way to do this, or will I always have to change the styling one by one?

  • Ian
    Replied on April 2, 2017 at 10:05 PM

    If you are referring to the styling done through custom CSS written for a field then there is a workaround.

    Instead of copying and redoing styling for the new field, you can add the field id to the existing class definition, using a comma separator.

    Copying form fields Image 1 Screenshot 30

    Copying form fields Image 2 Screenshot 41

    Hope this helps.

  • garymichael
    Replied on April 2, 2017 at 11:45 PM
    Lord Jesus, I sure hope this works... awesome! Thanks.
    ...
  • garymichael
    Replied on April 2, 2017 at 11:45 PM
    Oh but the problem with this is, I'm not entering the css on this screen,
    I'm entering it in the Designer and you can't copy the fields in there!
    You can only create the fields in editor, not the designer. What are your
    thoughts?
    ...
  • Chriistian Jotform Support
    Replied on April 3, 2017 at 3:54 AM

    Yes, you are right. You can create or copy fields in the Editor, but not on the Designer. However, if you mean that you do not want to style each field because you have copied it, I'm sorry to say but you need to style every field on the designer if you want to achieve the preferred style of your form fields. 

    Regards.

  • garymichael
    Replied on April 6, 2017 at 1:10 PM

    Ok then, I see... I'll just have to designate each section with comments so I know which is which... then get the field details in the Main screen... then click the css on the Main screen (not in the Designer) and just paste next to the field I want to copy the style from.

    Does that make sense?

  • liyam
    Replied on April 6, 2017 at 2:50 PM

    Hello garymichael,

    I'm not sure I'm understanding your idea on designating each section with comments. But so long as you don't get to confuse yourself and how you will be able to achieve what you wish in the end.

    Like for me, my way of creating my form and styling would be just add the fields I want, and my way of identifying each field would be via the Chrome browser's console.

    So I press right-click on the field that I wish to identify and style.

    Copying form fields Image 1 Screenshot 30

     

    And I find it easier that by selecting each line or hovering my mouse over the specific line on the browser's console, it highlights the specific field on the form

    Copying form fields Image 2 Screenshot 41

    Once I have identified each ID that I want to style, I try to open the form designer and insert my CSS there.

    In any case, if you need assistance, just let us know. Even if what you want is to let us do the styling for you, please don't hesitate to ask. We'll be more than happy to assist.

    Thanks.

  • garymichael
    Replied on April 7, 2017 at 4:45 PM
    ​​
    Hey, I have another question; please take a look at the Resident Survey
    form I'm working on now. On the second radio button selection row it
    starts with - Marital Status. I can't seem to get it to space out
    properly. *I noticed if it's a radio label (.form-radio-item), then they
    are connected and cannot be separated individually for styling!*
    Here's what I played around with:
    .form-radio-item label - the width does nothing
    .form-line (#id_25) - width does nothing either
    *Can you check it out see if you can space these horizontally!*
    ...
  • Kevin Support Team Lead
    Replied on April 7, 2017 at 7:17 PM

    If you need to increase the field's width then you need to apply the code to the entire  field directly which ID is "id_25". 

    Example: 

    Copying form fields Image 1 Screenshot 30

    If you need to affect the labels, then you could simply right click on the label option and copy its field ID, to do it, please follow the instructions given by my colleague above. 

    This is how that would work: 

    Copying form fields Image 2 Screenshot 41

    If the code you're injecting does not take effect on your field, you could also add the "!important" rule in order to override other width values that were injected to the form. 

    Hope this helps. 

  • Gary Michael
    Replied on April 8, 2017 at 11:46 AM

    Okay, yes I understand that... but it's when they are horizontally aligned.  I changed them to vertical just because it was taking a long time.  If you move single or multiple button items to horizontally align, then you'll see what I'm talking about. 

    When you space them out it doesn't move them apart.  Maybe I'm doing something wrong.  But can you try it and tell what I missed.  Thanks for your help, I appreciate it.

  • Mike_G JotForm Support
    Replied on April 8, 2017 at 4:41 PM

    Thank you for the additional information, we appreciate it. 

    Please give us some time to further inspect your form and find what's necessary to meet your requirements.

    We will get back to you as soon as possible.

    Thank you.

  • Mike_G JotForm Support
    Replied on April 8, 2017 at 5:42 PM

    I would like to apologize for any inconvenience, however, I have checked your form and I believe I may need to clarify things a bit with regards to what you're trying to achieve.

    Can you help us understand your concern further by explaining what you mean when you say horizontally align and vertically align, please? Are you referring to how the options in the radio button fields are listed? Are you trying to spread the options in the radio button field into multiple columns?

    Also, are you trying to create a larger space between the input (radio button) and its option label?

    Any specific details that you think would help us better understand your requirements, please provide it to us and that would be greatly appreciated. If possible, you can also include screenshots in your next reply describing what you would like to happen.

    We will wait for your response.

    Thank you.

  • garymichael
    Replied on April 8, 2017 at 6:44 PM
    Nevermind I figured it out. It's when you take a radio list from vertical
    to horizontal using column toggle in the settings. I set it to 3 columns
    going horizontally and I couldn't space them out, while staying even with
    the 3 columns aligned vertically. Like this:
    Column 1 Column 2 Column 3
    Column 1 Column 2 Column 3
    Column 1 Column 2 Column 3
    Now if I try to space these columns out across the page. But I figured it
    out... you have to do it like this:
    #id_50 {
    width : 288px;
    }
    #id_51 {
    width : 368px;
    }
    #id_52 {
    width : 369px;
    }
    #id_53 {
    width : 175px;
    But it's hard to see because you have to barely put your mouse on the
    list.. it's barely there because there is really 4 layers you can move :-)
    But they have to separately moved because they are connected when it's a
    list. But there's a teeny small box around the radio button & label, and
    it's an (ID).
    Thanks, also
    the Designer is just hanging on save!! You may want to check
    that out as well.
    ...
  • Welvin Support Team Lead
    Replied on April 9, 2017 at 2:14 AM

    That's great to know. You can also just change the width of the specific column in the radio button field. 

    As for the designer, we've already reported the matter to our developers. We are now waiting for an update. 

  • Mike_G JotForm Support
    Replied on April 9, 2017 at 5:50 AM

    I have decided to create a new thread for the issue you are having with the Advanced Form Designer so it can be monitored separately.

    Please click this link to go to that thread.

    Thank you.

  • Mike_G JotForm Support
    Replied on April 9, 2017 at 6:02 AM

    Apologies for any inconvenience. I just saw the thread you opened regarding the issue you're having with the Advanced Form Designer.

    Please disregard my previous message.

    Thank you.