Form submission help


(Innes Zenati) #1

Matrix Version: 6.21.2.

Looking for some help trying to debug a form I have been editing. The current live version works - https://www.ros.gov.uk/services/expedite-requests/submit-a-request

But upon adding some new fields etc. (which I have tried commenting out) I can now no longer submit the form. Squiz devs could also not debug this for me. I have been through the code, email options etc. to no avail. Is there something I am clearly missing here? When I hit submit it merely refresh the form to the beginning.

Any help or advice would be very much appreciated.

<form>

Choose the option that describes you

You are:

  • a member of the public
		    <li><input class="sq-form-field required" name="q99386:q4" id="q99386_q4_1" value="1" type="radio" data-show-target=".details, .fas, .public" data-hide-target=".agent, .body, .citizen" data-msg="select an option">
		        <label class="block-label selection-button-radio" for="q99386_q4_1">a professional</label></li>
		        
		    <li><input class="sq-form-field required" name="q99386:q4" id="q99386_q4_2" value="2" type="radio" data-show-target=".details, .public" data-hide-target=".agent, .fas, .citizen" data-msg="select an option">
		        <label class="block-label selection-button-radio" for="q99386_q4_2">another public body like Crown Estates Scotland</label></li>
        </ul>
    </fieldset>
</div>   

Enter your personal details

<div class="form-section">
    <fieldset>
		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99387_q1%
				<!-- name -->
				%question_field_99387_q1%
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99387_q2%
				<!-- email -->
				%question_field_99387_q2%
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99387_q4%
				<!-- tel -->
				%question_field_99387_q4%
			</div>
		</div>
	</fieldset>
</div>
		
<div class="form-section">
    <fieldset>
		<div class="public hidden">
			<div class="form-group row">
				<div class="col-lg-6">
					%question_label_99478_q2%
					<!-- solicitor company name professional -->
					%question_field_99478_q2%
				</div>
			</div>
		</div>

		<div class="fas hidden">
			<div class="form-group row">
				<div class="col-lg-6">
				    %question_label_99478_q5%
				<!-- FAS no -->
				    %question_note_99478_q5^tagif:span class="form-hint"%
					%question_field_99478_q5%
				</div>
			</div>
		</div>

		<div class="agent hidden">
			<div class="form-group row">
				<div class="col-lg-6">
					%question_label_99397_q4%
					<!-- Submitting solicitor public -->
					%question_field_99397_q4%
				</div>
			</div>
		</div>
	</fieldset>
</div>

<div class="form-section">
	<fieldset>
	    <div class="agent hidden">
		    <div class="form-group row">
			    <div class="col-lg-6">
				    %question_label_99397_q1%
				    <!-- title no public -->
				    %question_note_99397_q1^tagif:span class="form-hint"%
				    %question_field_99397_q1%
			    </div>
		    </div>
		</div>
		
		<div class="public hidden">
			<div class="form-group row">
				<div class="col-lg-6">
					%question_label_99478_q7%
					<!-- title no professionals -->
					%question_note_99478_q7^tagif:span class="form-hint"%
					%question_field_99478_q7%
				</div>
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q2%
				<!-- application no -->
				%question_note_99397_q2^tagif:span class="form-hint"%
				%question_field_99397_q2%
			</div>
		</div>

		<div class="public hidden">
			<div class="form-group row">
				<div class="col-lg-6">
					%question_label_99397_q8%
					<!-- parent title no -->
					%question_note_99397_q8^tagif:span class="form-hint"%
					%question_field_99397_q8%
				</div>
			</div>
		</div>
		
		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q9%
				<!-- Applicants name -->
				%question_note_99397_q7^tagif:span class="form-hint"%
				%question_field_99397_q9%
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q3%
				<!-- Address -->
				%question_note_99397_q3^tagif:span class="form-hint"%
				%question_field_99397_q3%
			</div>
		</div>
		
		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q10%
				<!-- Address line 1 -->
				%question_field_99397_q10%
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q5%
				<!-- Address line 2 -->
				%question_field_99397_q5%
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q6%
				<!-- Town / city -->
				%question_field_99397_q6%
			</div>
		</div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_99397_q7%
				<!-- Postcode -->
				%question_field_99397_q7%
			</div>
		</div>
	</fieldset>
</div>

<div class="form-section">
    <fieldset> 	    
        <div class="form-group row">
            <div class="col-lg-12">
		        <legend class="sq-form-question-title">Is the key date required?</legend>
		        <div class="js-revealer-radio">
			        <div class="multiple-choice">
				    <input type="radio" name="q225853:q4" id="q225853_q4_0" value="0" class="sq-form-field required" data-msg="You must tell us if the key date is required" data-show-target=".date" data-hide-target=".no-date">
				    <label class="block-label selection-button-radio" for="q225853_q4_0">Yes</label>
			        </div>
			        <div class="multiple-choice">
				    <input type="radio" name="q225853:q4" id="q225853_q4_1" value="1" class="sq-form-field required" data-msg="You must tell us if the key date is required" data-hide-target=".date">
				    <label class="block-label selection-button-radio" for="q225853_q4_1">No</label>
			        </div>
		        </div>
            </div>
        </div>    

     <div class="date no-date hidden">
	    <div class="form-group row .date">
		    <div class="form-group col-lg-6">
                <legend class="sq-form-question-title date">Key date</legend>
            <div class="sub-row">
                <div class="col-lg-6">
            <input type="date" name="q225853_q1_value[dmY]" value="" size="8" maxlength="10" onfocus="this.select()" id="q225853_q1_value_dmY" class="form-control input-lg">
                </div>
            </div>
            </div>
    	</div>
    </div>

		<div class="form-group row">
			<div class="col-lg-6">
				%question_label_225853_q3%
				%question_note_225853_q3^tagif:span class="form-hint"%
				 <!-- Lender -->
				%question_field_225853_q3%
			</div>
		</div>
	</fieldset>
</div>

<div class="form-group row public hidden"> <!-- Professional -->
<fieldset>
	<legend class="question">
	    <div class="row">
	        <div class="col-lg-12">
	            Select reason for expedite
	        </div>
	    </div>
	</legend>
	<label class="form-label sr-only" for="q99408_q4">Select a reason for your expedite</label>
	<div class="form-group row">
		<div class="col-lg-6">
			<select name="q99408:q4" id="q99408_q4" class="form-control input-lg js-revealer">
        <option value="op0" data-r-show-target="" data-r-hide-target=".info, .file, .privacy">- Select reason -</option>
        <option value="op1" data-r-show-target=".info, .file, .loss, .privacy" data-r-hide-target=".personal">Financial loss/ loss of future transactions</option>
        <option value="op2" data-r-show-target=".info, .personal, .privacy" data-r-hide-target=".loss, .file">Personal reasons</option>
        </select>
		</div>
	</div>
</fieldset>

<!-- <div class="criteria form-group row hidden"> Criteria requires evidence - professional
    <div class="col-lg-12">
        <fieldset>
            <legend class="indent sq-form-question-title"><h1 class="question">Select one reason from below</h1></legend>
            <ul class="multiple-choice input-group">
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_0" value="0" class="sq-form-field"><label for="q99408_q6_0">Lender won't approve mortgage - re-mortgage, equity release or additional borrowing</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_1" value="1" class="sq-form-field"><label for="q99408_q6_1">Lender’s solicitor will not proceed</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_2" value="2" class="sq-form-field"><label for="q99408_q6_2">Loss of future transaction (sale, servitude, deed of conditions etc)</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_3" value="3" class="sq-form-field"><label for="q99408_q6_3">Panel removal impact</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_4" value="4" class="sq-form-field"><label for="q99408_q6_4">Commercial impact</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_5" value="5" class="sq-form-field"><label for="q99408_q6_5">Court case</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_6" value="6" class="sq-form-field"><label for="q99408_q6_6">Boundary dispute</label></li>
                <li><input type="checkbox" name="q99408:q6[]" id="q99408_q6_7" value="7" class="sq-form-field"><label for="q99408_q6_7">Personal reputational damage</label></li>
            </ul>
        </fieldset>
    </div>
</div> -->

<!-- <div class="criteriano form-group row hidden"> Criteria not requiring evidence - professional
    <div class="col-lg-12">
        <fieldset>
            <legend class="indent sq-form-question-title"><h1 class="question">Select one reason from below</h1></legend>
            <ul class="multiple-choice input-group">
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_0" value="0" class="sq-form-field"><label for="q99408_q7_0">Risk of homelessness</label></li>
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_1" value="1" class="sq-form-field"><label for="q99408_q7_1">Terminal illness (settle estate)</label></li>
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_2" value="2" class="sq-form-field"><label for="q99408_q7_2">Risk to personal safety</label></li>
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_3" value="3" class="sq-form-field"><label for="q99408_q7_3">Section 75 (planning and development)</label></li>
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_4" value="4" class="sq-form-field"><label for="q99408_q7_4">Economic crime (Transparency and Enforcement) Act 2022 (for applications created pre-05/09/2022)</label></li>
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_5" value="5" class="sq-form-field"><label for="q99408_q7_5">De-Crofting</label></li>
                <li><input type="checkbox" name="q99408:q7[]" id="q99408_q7_6" value="6" class="sq-form-field"><label for="q99408_q7_6">Government-led grant</label></li>
            </ul>
        </fieldset>
    </div>
</div> -->

<div class="form-group row info hidden">
    <div class="form-section">
        <fieldset>
		    <div class="form-group row">
			<div class="col-lg-12">
				%question_label_99408_q3%
				<!-- further info professional -->
				%question_note_99408_q3^tagif:span class="form-hint"%
			    <div class="form-group row loss hidden">
				<p><strong>Residential</strong></p>
		        <p>For example you're at risk of bankruptcy or your remortgage offer will fall through by the 12th of the month.</p>
		        <p><strong>Commercial</strong></p>
		        <p>For example your deal is at risk of failure if the title isn't registered by the 12th of the month.</p>
			    </div>
			    
			    <div class="form-group row personal hidden">
		        <p>For example, you need to settle your affairs by the 12th of the month for peace of mind due to serious illness.</p>
		        <p class="info-alert"><strong>You do not need to supply evidence for personal reasons</strong></p>
			    </div>
					%question_field_99408_q3%
			</div>
		    </div>
        </fieldset>
    </div>
</div>

<div class="form-group row file hidden">
   <div class="form-section">
       <fieldset>
           <div class="form-group row">
		        <div class="col-lg-12">
			        %question_label_99408_q5%
			        %question_note_99408_q5^tagif:span class="form-hint"%
		        </div>
		        <div class="col-lg-6">
			    <!-- File upload solicitor / public body-->
			        %question_field_99408_q5%
			    <div class="sq-form-upload-add-btn-wrapper">
                    <input id="reset-browse" data-id="q99408_q5" type="button" value="Delete" title="Delete" class="sq-form-upload-add-btn">
                </div>
		        </div>
	        </div>
	        <div class="form-group row">
	            <div class="col-lg 12">
	                <p class="info-alert"><strong>If you do not supply the evidence required we will reject your application.</strong></p>
	            </div>
	        </div>
	    </fieldset>
   </div>
</div>
</div>

<div class="form-group row citizen hidden"> <!-- Citizen -->
<fieldset>
	<legend class="question">
	    <div class="row">
	        <div class="col-lg-12">
	            Select reason for expedite
	        </div>
	    </div>
	</legend>
	<label class="form-label sr-only" for="q213791_q1">Select a reason for your expedite</label>
	<div class="form-group row">
		<div class="col-lg-6">
		<select name="q213791:q1" id="q213791_q1" class="form-control input-lg js-revealer">
        <option value="op0" data-r-show-target="" data-r-hide-target=".infocitizen, .filecitizen, .privacy">- Select reason -</option>
        <option value="op3" data-r-show-target=".infocitizen, .filecitizen, .loss, .privacy" data-r-hide-target=".personal">Financial loss/ loss of future transactions</option>
        <option value="op4" data-r-show-target=".infocitizen, .personal, .privacy" data-r-hide-target=".filecitizen, .loss">Personal reasons</option>
        </select>
		</div>
	</div>
</fieldset>

<!-- <div class="criteriacitizen form-group row hidden"> Criteria requires evidence - citizen 
    <div class="col-lg-12">
        <fieldset>
            <legend class="indent sq-form-question-title"><h1 class="question">Select one reason from below</h1></legend>
            <ul class="multiple-choice input-group">
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_0" value="0" class="sq-form-field"><label for="q213791_q5_0">Lender won't approve mortgage - re-mortgage, equity release or additional borrowing</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_1" value="1" class="sq-form-field"><label for="q213791_q5_1">Lender’s solicitor will not proceed</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_2" value="2" class="sq-form-field"><label for="q213791_q5_2">Loss of future transaction (sale, servitude, deed of conditions etc)</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_3" value="3" class="sq-form-field"><label for="q213791_q5_3">Panel removal impact</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_4" value="4" class="sq-form-field"><label for="q213791_q5_4">Commercial impact</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_5" value="5" class="sq-form-field"><label for="q213791_q5_5">Court case</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_6" value="6" class="sq-form-field"><label for="q213791_q5_6">Boundary dispute</label></li>
                <li><input type="checkbox" name="q213791:q5[]" id="q213791_q5_7" value="7" class="sq-form-field"><label for="q213791_q5_7">Personal reputational damage</label></li>
            </ul>
        </fieldset>
    </div>
</div> -->

<!-- <div class="criteriacitizenno form-group row hidden"> Criteria not requiring evidence - citizen 
    <div class="col-lg-12">
        <fieldset>
            <legend class="indent sq-form-question-title"><h1 class="question">Select one reason from below</h1></legend>
            <ul class="multiple-choice input-group">
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_0" value="0" class="sq-form-field"><label for="q213791_q4_0">Risk of homelessness</label></li>
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_1" value="1" class="sq-form-field"><label for="q213791_q4_1">Terminal illness (settle estate)</label></li>
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_2" value="2" class="sq-form-field"><label for="q213791_q4_2">Risk to personal safety</label></li>
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_3" value="3" class="sq-form-field"><label for="q213791_q4_3">Section 75 (planning and development)</label></li>
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_4" value="4" class="sq-form-field"><label for="q213791_q4_4">Economic crime (Transparency and Enforcement) Act 2022 (for applications created pre-05/09/2022)</label></li>
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_5" value="5" class="sq-form-field"><label for="q213791_q4_5">De-Crofting</label></li>
                <li><input type="checkbox" name="q213791:q4[]" id="q213791_q4_6" value="6" class="sq-form-field"><label for="q213791_q4_6">Government-led grant</label></li>
            </ul>
        </fieldset>
    </div>
</div> -->

<div class="form-group row infocitizen hidden">
  <div class="form-section">
	<fieldset>
		<div class="form-group row">
			<div class="col-lg-12">
				%question_label_213791_q2%
				<!-- further info citizen -->
				%question_note_213791_q2^tagif:span class="form-hint"%
			<div class="form-group row loss hidden">
				<p><strong>Residential</strong></p>
		        <p>For example you're at risk of bankruptcy or your remortgage offer will fall through by the 12th of the month.</p>
		        <p><strong>Commercial</strong></p>
		        <p>For example your deal is at risk of failure if the title isn't registered by the 12th of the month.</p>
			</div>
			    
			<div class="form-group row personal hidden">
		        <p>For example, you need to settle your affairs by the 12th of the month for peace of mind due to serious illness.</p>
		        <p class="info-alert"><strong>You do not need to supply evidence for personal reasons</strong></p>
			</div>
			    %question_field_213791_q2%
			</div>
		</div>
	   </fieldset>
	</div>
</div>

<div class="form-group row filecitizen hidden">
  <div class="form-section">
   <fieldset>
	<div class="form-group row">
		<div class="col-lg-12">
			%question_label_213791_q3%
			%question_note_213791_q3^tagif:span class="form-hint"%
		</div>
		<div class="col-lg-6">
			<!-- File upload citizen-->
			%question_field_213791_q3%
		</div>
	</div>
	<div class="form-group row">
	    <div class="col-lg 12">
	        <p class="info-alert"><strong>If you do not supply the evidence required we will reject your application.</strong></p>
	    </div>
	</div>
    </fieldset>
   </div>
</div>
</div>

We treat all requests as confidential. For information on how we use your data, read our privacy statement.

%form_honeypot_field% %submit_button^replace:sq-form-submit:btn btn-primary btn-default btn-lg btn-cta%


(Harinder Singh) #2

I tried 3 times and it submitted the form successfully. I noticed, that on submission it is embedding /_nocache in the thankyou page.

It seems like caching issue to me. Have you embedded this form in the standard page?


(Innes Zenati) #3

Hi Harinder, thanks for getting back to me on this.

So you have successfully submitted the live form in its current state or have you tested my above safe edit version?? Ah ok, I was not aware of that. I wouldnt want it embedding /_nocache in the thank you as that standard page was update to be a ‘application submitted’ page so that we could publish the correct content to customers.

By this do you mean the expedite form data / source code embedded in a standard page? Or do you mean the thank you page?


(Innes Zenati) #4

Hi @harinder.singh, I can now see your 3 test submissions via the live version. As stated this works fine but am concerned about it embedding /_nocache, how do I look into this further and fix?

Thanks again
Innes


(Innes Zenati) #5

I have checked guidance on the Squiz manual and read the below:

“You should not nest custom forms into other assets, such as standard pages. Nesting can lead to unexpected caching of another user’s submission details, potentially exposing them to other public users. Always present custom forms to the users on dedicated URLs and ensure that they are never cached.”

Do this mean I should not have forms as a child asset of a standard page?? Should all forms be a standalone asset??


(Innes Zenati) #6

The no cache might be appearing due to a condition we have set up for a file type check on the evidence field. This is set to make sure the file type is checked. I am not sure if this has been set up correctly?

Its currently set to:

“The following keyword matches the specified pattern - %globals_post_99408:q5%”

Is this correct and should we have this Keyword Regexp Condition set up to check this?? The ‘Force No Cache’ is set to Yes.


(Harinder Singh) #7

As public user, we cannot access assets in safe edit.

Nesting Custom form in the standard page is not recommneded. Having it as a Child asset is fine.

You can also disable the cache from Cache Manager for the custom forms and asset builders.


(Harinder Singh) #8

You do not need complex validation. You can enable the file type validations on upload field questions.

You can check and file type and file size before upload.


(Innes Zenati) #9

Great thanks very much! I have now removed that complex validation and added file type, file size and virus check within the validation area.


(Innes Zenati) #10

Yes, I the form is not nested within a page and is a child of the standard page asset. So, from reading previous threads I can see there have been similar issues in the past to do with cache affecting forms. So, can I disable the cache for ‘all’ custom forms via the type code specific?? When I try this it merely refreshes to a blank page…

I have also noticed quite a few old assets within our legacy site were sitting in the cache manager area so I have updated this… FYI I have only recently taken over this role to manage our website so I am still finding my feet in terms of the overall management within Matrix!


(Innes Zenati) #11

Sorry, should I have forms listed in the root node specific area or disable the cache for all custom forms??


(Harinder Singh) #12

DIsable the cache for all the custom forms and asset builder type assets.

This is an extra precaution to ensure that caching is completely disabled for all forms on all websites.


(Innes Zenati) #13

Ok, thanks again. Should I set the ‘caching status’ to ‘On’??

FYI I am still encountering the same issue where the form refreshes to the beginning so I am thinking it might be a validation issue. I have been able to get an older test version of the form so I will slowly add my new fields to see where this has went wrong.

Thanks again for your help.


(Innes Zenati) #14

I have continued to encounter errors when trying to test / submit forms. I have now added Validation %form_errors_message% keyword to confirm there are errors with validation.

Is there anything i can do to check what is causing the validation not to work?

This is the error message appearing on select fields, has anyone seen this before?


(Harinder Singh) #15

Try these option and the backend warning will not come.


(Harinder Singh) #16

If you have any test environment then I can look into it for you.


(Innes Zenati) #17

Morning, thanks that seems to have stopped the errors. Don’t know why they kept appearing as most of those options were ok.

Yes I have this form in our sandbox so I could make it live so you can take a look. That would be very much appreciated.


(Harinder Singh) #18

I had a quick look on this form. It is hard to tell from the frontend why your form is not submitting and throwing error message.

It looks like you marked some of your fields as required in the backend.

image

Note that even your frontend validation is doing your validation checks and showing the form questions based on your selection. Unfilled Hidden questions( but marked as required in the backend) will not let you submit the form.

You need to untick the required option in the backend and handle them through frontend validation only.


(Innes Zenati) #19

Hi there, ah ok that makes sense. I will check the fields where I have marked them as required in the backend and disable these. I will let you know how I get on.

Thanks very much for taking the time to check this for me.
Innes


(Innes Zenati) #20

Hi Harinder, I have checked all of the field assets and none of them have required / complex validation rules enabled. These only seem to be using front-end validation. Unsure what else to check / investigate to debug this issue.

Thanks again
Innes