Copying form fields

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

garymichael

Asked on April 02, 2017 at 08: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?

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.

Hope this helps.

garymichael

Answered on April 02, 2017 at 11:45 PM

Lord Jesus, I sure hope this works... awesome! Thanks....

garymichael

Answered on April 02, 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 yourthoughts?...

JotForm Support

Chriistian

Answered on April 03, 2017 at 03: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

Answered on April 06, 2017 at 01: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?

JotForm Support

liyam

Answered on April 06, 2017 at 02: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.

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

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

Answered on April 07, 2017 at 04:45 PM

​​Hey, I have another question; please take a look at the Resident Surveyform I'm working on now. On the second radio button selection row itstarts with - Marital Status. I can't seem to get it to space outproperly. *I noticed if it's a radio label (.form-radio-item), then theyare 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!*...

JotForm Support

Kevin_G

Answered on April 07, 2017 at 07: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:

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:

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

Answered on April 08, 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.

JotForm Support

Mike_G

Answered on April 08, 2017 at 04: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.

JotForm Support

Mike_G

Answered on April 08, 2017 at 05: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

Answered on April 08, 2017 at 06:44 PM

Nevermind I figured it out. It's when you take a radio list from verticalto horizontal using column toggle in the settings. I set it to 3 columnsgoing horizontally and I couldn't space them out, while staying even withthe 3 columns aligned vertically. Like this:Column 1 Column 2 Column 3Column 1 Column 2 Column 3Column 1 Column 2 Column 3Now if I try to space these columns out across the page. But I figured itout... 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 thelist.. 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 alist. But there's a teeny small box around the radio button & label, andit's an (ID).Thanks, also

the Designer is just hanging on save!! You may want to checkthat out as well....

JotForm Support

Welvin

Answered on April 09, 2017 at 02: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.

JotForm Support

Mike_G

Answered on April 09, 2017 at 05: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.