Forums

Hi Guys

Ok, I gave up. I think there is something going on with CF v5 when it comes to interpreting <textarea> in a multipage form setup.

I use CF v5 to design a multipage form that utilizes the styling elements from Yootheme's UIKit. I created each page as a standalone form and tested them individually to make sure the HTML is at least rendered as intended and the code does not crash the designer. All the pages passed this test, so I started concatenate them into a multipage setup with an approach shown in the attachment. The HTML code from each page is copied into the Custom element in its assigned page. This process worked well, and I was able to put data into DB. That is, until pages with <textarea> are introduced.

If a page with <textarea> is added, it would crash the designer and render it to be unusable, regardless of whether Form Theme is loaded or not. When enter the problem form via Form Manager, you can see from Crash2 that General, Designer and Setup are kind of merged onto one page. In Crash3, you'll see the screen shot when the Edit button of that Custom Element is clicked.

I tried to debug w/ a simplified design by using the demo plus a snippet of code w/ the <textarea>. See screen shot of the Designer in .

This is the snippet of code I pasted in:

<fieldset data-uk-margin>
	<legend>Alcohol Consumption</legend>
	
	<div class="uk-form-horizontal">
		<div class="uk-form-row uk-margin-top">
			<label class="uk-form-label">Do you consume alcohol regularly?</label>
			<div class="uk-form-controls uk-form-controls-text">
				<input type="radio" id="drinkalcohol" name="drinkalcohol" value="yes">
					<label for="drinkalcohol"> Yes</label>
				<input type="radio" id="drinkalcohol" name="drinkalcohol" value="no" checked>
					<label for="drinkalcohol"> No</label>
			</div>
		</div>
	</div>

	<div class="uk-form uk-form-stacked">
		<div class="uk-form-row">
			<label class="uk-form-label" for="alcoholconsumption">Describe your alcohol consumption</label> 
			<div class="uk-form-controls">
				<textarea id="alcoholconsumption" name="alcoholconsumption" cols="75" rows="2" placeholder=""></textarea>
			</div>
		</div>
	</div>
</fieldset>

<div class="uk-width-1-1 uk-text-center">
	<button class="uk-button uk-button-primary uk-button-large" name="submit6" type="submit">##BUTTON##</button>
</div>

This form is rendered correctly as an individual form. When it's added as Page4 to a MPF, CFv5 still renders correctly, but the form crashes Form Manager (I tried to enclose a .cf5bak, but the forum wouldn't let me. If I don't use any of the Yootheme UIKit styling element, then the designer would omit the </textarea> and display every following piece of HTML code in the textarea itself.

So here is the code from that MPF. Please help, I really need to get over this problem so I can release the work. Thank you very much for your support. If there is anything you need to debug this problem, please don't hesitate to ask.

SH

<div class="gcore-line-tr gcore-form-row" id="ftr-fld1"><div class="gcore-line-td" id="ftd-fld1"><label for="fld1" class="gcore-label-left">Page 1</label>
<div class="gcore-display-table gcore-input" id="fin-fld1">	<label for="text5" class="control-label gcore-label-left">Text Label</label>
<div class="gcore-input gcore-display-table" id="fin-text5">
	<input name="text5" id="text5" value="" placeholder="" maxlength="" size="" class="form-control A" title="" style="" data-inputmask="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-3">
	<div class="gcore-input gcore-display-table" id="fin-button6">
		<input name="button6" id="button6" type="submit" value="submit" class="form-control A" style="" />
	</div></div></div></div><!--_CHRONOFORMS_PAGE_BREAK_--><div class="gcore-line-tr gcore-form-row" id="ftr-fld2"><div class="gcore-line-td" id="ftd-fld2"><label for="fld2" class="gcore-label-left">Page 2</label>
<div class="gcore-display-table gcore-input" id="fin-fld2"><div class="form-group gcore-form-row" id="form-row-4">
	<label for="dropdown7" class="control-label gcore-label-left">Dropdown Label</label>
<div class="gcore-input gcore-display-table" id="fin-dropdown7">
	<select name="dropdown7" id="dropdown7" size="" class="form-control A" title="" style="">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="form-group gcore-form-row" id="form-row-5">
	<div class="gcore-input gcore-display-table" id="fin-button8">
		<input name="button8" id="button8" type="submit" value="Submit" class="form-control A" style="" />
	</div>
</div></div></div></div><!--_CHRONOFORMS_PAGE_BREAK_--><div class="gcore-line-tr gcore-form-row" id="ftr-fld3"><div class="gcore-line-td" id="ftd-fld3"><label for="fld3" class="gcore-label-left">Page 3</label>
<div class="gcore-display-table gcore-input" id="fin-fld3">	<label for="checkbox_group9" class="control-label gcore-label-left gcore-label-checkbox">Checkbox Group</label>
<div class="gcore-input gcore-display-table" id="fin-checkbox_group9">
	<div class="gcore-single-column" id="fclmn10">
		<div class="gcore-checkbox-item" id="fitem7">
			<input name="checkbox_group9[]" id="checkbox_group96" class="A" title="" style="" type="checkbox" value="No" />
<label class="control-label gcore-label-checkbox" for="checkbox_group96">No</label>
</div>
<div class="gcore-checkbox-item" id="fitem9">
	<input name="checkbox_group9[]" id="checkbox_group98" class="A" title="" style="" type="checkbox" value="Yes" />
<label class="control-label gcore-label-checkbox" for="checkbox_group98">Yes</label>
</div>
</div>
</div>
</div>

<div class="form-group gcore-form-row" id="form-row-12">
	<div class="gcore-input gcore-display-table" id="fin-button10">
		<input name="button10" id="button10" type="submit" value="Submit" class="form-control A" style="" />
	</div>
</div></div></div><!--_CHRONOFORMS_PAGE_BREAK_--><div class="gcore-line-tr gcore-form-row" id="ftr-fld4"><div class="gcore-line-td" id="ftd-fld4"><label for="fld4" class="gcore-label-left">Textarea</label>
<div class="gcore-display-table gcore-input" id="fin-fld4"><fieldset data-uk-margin>
	<legend>Alcohol Consumption</legend>
	
	<div class="uk-form-horizontal">
		<div class="uk-form-row uk-margin-top">
			<label class="uk-form-label">Do you consume alcohol regularly?</label>
			<div class="uk-form-controls uk-form-controls-text">
				<input type="radio" id="drinkalcohol" name="drinkalcohol" value="yes">
					<label for="drinkalcohol"> Yes</label>
				<input type="radio" id="drinkalcohol" name="drinkalcohol" value="no" checked>
					<label for="drinkalcohol"> No</label>
			</div>
		</div>
	</div>

	<div class="uk-form uk-form-stacked">
		<div class="uk-form-row">
			<label class="uk-form-label" for="alcoholconsumption">Describe your alcohol consumption</label> 
			<div class="uk-form-controls">
				<textarea id="alcoholconsumption" name="alcoholconsumption" cols="75" rows="2" placeholder=""></textarea>
			</div>
		</div>
	</div>
</fieldset>


<div class="uk-width-1-1 uk-text-center">
	<button class="uk-button uk-button-primary uk-button-large" name="submit6" type="submit">##BUTTON##</button>
</div>
</div></div></div>

Gents

Any word on this? I might have complicated the process by including code w/ Yootheme UIkit elements, but this is a behavior that can be replicated with a standard textarea element as well. Even a quick yeah or nay is much appreciated.

kind regards,
SH

Hi studiocardo,

If the designer is crashed and you are using custom elements then this is most probably a problem with your code, a tag left open or some misplaced quote can break it, but this should not happen in v5 since it doesn't render the custom code in the designer, so I'm not sure.

Please try to create a multi page form with the default designer elements instead of using your custom code ? check if this will work or not ?

You may also try to simplify your custom code in order to spot the problem, don't use a lot of tags and just use the textarea code, check how this works ?

Regards,
Max

Max

I am aware of how missing tag would crash the designer. As I mentioned in the original posts, all the pages are individually tested before they were amalgamated into a MP form. The question is thus: why would the designer crash in a MP format that would otherwise work fine individually?

I can't send you a backup version of the failed form. Nonetheless, this is something that you can easily replicate on your side, and here's the easiest way to do it:

1. go to the standard demo-multipage that is bundled w/ CFv5, replace the radio select in last page with a <textarea> in the designer. And you'll notice everything works and looks fine.
2. create a separate simple single stand-alone form with a single <textarea> element and a submit. Again, nothing to write home about.
3. Now, delete Page3 container in 1, create a new container and a custom element for Page3. Copy the code from 2 into the custom element of the new Page3 in the demo-multipage.

You'll see the problem. I gdiff the source code between the original and new demo-multipage and I found there to be no missing tags. And there should be no misplaced quote since the CFv5-generated transplanted code was copied over from other instance… Most difference between the forms are css tags that should not have contribute to the problem.

Perhaps I can circumvent the problem by using build-in elements in designer for pages that require <textarea>, but that essentially will break the style convention I wish to maintain. And that also means I have to recreate those pages, perhaps not that big of deal. But I sure would like a definitive response from the development team on this issue, and an issue that has burned a lot of my time.

regards,
SH

Hi SH,

I experimented a bit and can confirm what you found.

To add a bit. If I just put <textarea></textarea> in the custom code action in Container #4 and then save, when I reopen the </textarea> tag has disappeared.

If I put <textarea><//textarea> then both parts are saved; if I put <div></div> both tags are saved.

Bob

Hi,

It looks like the problem exists in any custom code element, just use "<textarea></textarea>" as Bob mentioned and that breaks it, the </textarea> tag is used as the closing tag for the code box textarea!!

I have fixed this issue and it should be available in the new update, hopefully in the next few hours!

Regards,
Max

Hi Max

Well, it just get weirder…

I wrapped the <textarea></textarea> tag with <div>>/div> in the simple demo-multipage example and it appeared to be working.

I then did the same thing to my own form, the ones with Yootheme UIkit elements. The problem page has 5 <textarea> and I wrapped all of them with their own <div></div>. Again the flow goes like:

1. in Designer, create a new container with new Custom element. Edit the Custom and paste in the source code.
2. in Code, the Form Type is set to be "Wizard"
3. Save the form. Right away, the Designer exploded the page w/ the <textarea> and rendered all the elements. But I was able to show the form and saw it through to the end - all textareas are rendered.
4. Return to the Form Mgr, save the form, the HTML render stops at the first text area with the following content:

</div></div></div></form>
</main>

5. and everything after the first </textarea> is gone except the three closing </div>, the </form> and the </main>…
6. Designer crashed if I tried to edit the Custom element.
7. I went back to the sample demo-multipage and the Designer crashed too.

Can't wait to see your fix. Is it possible to get an early access to this fix? I really really need to get this wrapped up.

Much appreciated.
SH

Hi Max

I tried the patch and the Designer remained stable without crashing after first few multipage form tests. However, all <textarea> still need to be wrapped with <div> in order for them to be rendered properly.

Thank you for your help. I guess another RC release is in the near future.

regards,
SH

Please clarify the words "rendered properly" ?🙂

Regards,
Max

Hi Max

sorry for the delayed reply. I removed the <dvi> tag around the <textarea> in the example MP form again and this time the elements following the <textarea> are all loaded. I cleared the cache and repeated the process and confirmed the results. So I think I was probably running a cached version when I reported the "improper render".

I think the patch solve the problem.