Form builder is not working properly

Hi Team,

Since yesterday, I've been facing a lot of issues and glitches while using the Form builder, currently on v4. For example, when I've not changed any options but simply refresh the builder or reopen it after closing it, I get changes made to the layout like this:

The spacing between the labels and the form width is suddenly modified without me touching any settings. 

This is how the form is supposed to look like:

Also I'm facing a lot of problems trying to add a new field which is a configurable list widget. When I add it to the builder this is how it is supposed to look:

However when I switch to the preview mode or view the form on the site it disappears:

Could you guys please assist me with what's going on? The builder has been glitching so much the last couple of days, it's become a real pain to work on my form.

The form's ID is 71282996628471. I've already tried clearing the form cache and my browser cache numerous times. That hasn't solved the issue. Switching between v3 and v4 has not helped with these issues either.

Hoping for an answer at the earliest.

Thanks!

Varun

We're sorry for this inconvenience. I checked your form and particular section:

I checked your form and particular section:

This problem is because those fields width is going over the width of the form. That is easily solvable by increasing the width of the form, you can insert the below CSS code to your Custom CSS code field:

.form-all {

    width: 860px!important;

}

 

That should make your form look like this:

Also, regarding the glitches, you were mentioning, since we didn't experience any reports regarding that, which Browser are you using? 

Because, when I checked your form I wasn't able to replicate that issue.

We'll wait for your response.

Thank you!

Hi Nik,

Thanks for the reply. I'm using Chrome, however now i'm using Firefox but some of these glitches still remain. I've recreated the form and this form's ID is: 71302550670447.

The main issue i'm trying to solve is one where the configurable list widget is seen on the builder however once i preview the form it disappears. It only occurs for this particular widget.

This is how the field is supposed to look:

And this is how the widget appears on preview of the form:

These are the Field configuration settings I'm using for this widget:

: dropdown : All Company Sizes, Micro (TurnoverTurnover 200 Cr.) : Select Company Size
: static : companies in
: dropdown : All Industries, Consumer Discretionary, Consumer Staples, Energy, Financials, Health Care, Industrials, Information Technology, Materials, Telecommunication Services, Utilities : Select Industries
: static : located in
: dropdown : Tier 1 cities, Tier 2 cities, Tier 3 cities, Tier 1 and Tier 2 cities, Tier 2 and Tier 3 cities, Pan-India Markets, Global Markets : Select Markets


And this is the CSS code:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
.staticText{
white-space: nowrap;
}


Could you please tell me if there's a problem with the code? Why is this issue happening?

Thanks!

Varun

Hi Varun,

I have cloned your form whose unique form ID is 71302550670447 on my end and pasted the configuration settings which you have given. However, I cannot replicate your issue. Would you please check my result?

Here is my cloned form: https://form.jotform.com/71303468223955

If you want to clone my test form on your end, please follow the user guide that I have shared with you below:

How to Clone an Existing Form from a URL

If your problem persists, would you please send us your Google Chrome console result by following the .gif image which I have attached so that we inspect it in detail?

We are sorry any inconvenience you have. 

Thank you.

Kindest Regards.

Hi Amy,

The form you've cloned has a problem with the first dropdown - All the options are not showing:

There are more options and the first options isn't correct. This is the entire list of option results that we want to have for this dropdown are: All Company Sizes, Micro (Turnover <5 Cr.), Small (Turnover <20 Cr.), Medium (Turnover <200 Cr.), Large (>Turnover 200 Cr.)

Otherwise the other dropdown fields seem alright. 

I just tested our form with by replacing the "<" & ">" symbols and now all the options seem to be working:

There seems to be some issue with using these symbols in the configuration settings. Why is this so?

Thanks,

Varun

Opps...

Dear Varun,

Sorry I didn't realise that you have used "<" and ">" symbols in your configuration settings. Yes, you are right. These symbols aren't allowed to use due to the security measures. In our form elements, the use of HTML codes is not allowed and as the symbols "<" and ">" represent HTML codes, the system automatically deleted those lines.

Ah I see.. That clears things up. I guess we'll have to go without the symbols then. 

Thanks Amy!

I'm sorry to say that.

For now, unfortunately...

You're quite welcome Varun. Thank you for letting me clarify it. Please let us know if you need further assistance.