Conditional Fields for Contact Form 7 + Contact Form 7 Multi-Step Forms

  • Hello,

    I have setup a multi-step form using the Contact Form 7 Multi-Step Forms plugin.

    On Step 2 of my Multi-Step Form, I have some Conditional Fields setup using the Conditional Fields for Contact Form 7 along with some standard fields.

    When I go to Step 3 (The final step) of the multi-step form, it doesn’t store any of the fields that I filled in on Step 2 of the process, only the information inputted in Step 1.

    Its basically not storing any of the inputted fields in Step 2.

    If I remove the conditional groups and logic and just add the fields as normal fields, everything works fine. Its the conditional logic which seems to be causing the issue.

    May you be able to advise?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    please share the page

    Thread Starter hamiltonbrooke

    (@hamiltonbrooke)

    Hi Jules,

    Here is a link to the registration form in question:

    https://stage.swoffers.co.uk/register/

    The conditional fields can be seen when selecting an area of interest, the first part of step 2.

    You will notice that if you fill out each stage of the form, the final part of the multiform stores everything from step 1 but nothing from step 2. If I disable the conditional fields, the multiform stores everything from steps 1 and 2.

    Here is the code for steps 2 and 3 of the form:

    Step 2

    <div class="uk-form-row">
	<label class="uk-form-label">PLEASE SELECT YOUR AREAS OF INTEREST</label>
</div>

<div class="uk-form-row">
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			[checkbox swof-local class:uk-form-label use_label_element "Local Market"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-local-rental class:uk-form-label use_label_element "Local Market Rentals"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-open class:uk-form-label use_label_element "Open Market"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-open-rental class:uk-form-label use_label_element "Open Market Rentals"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-alderney class:uk-form-label use_label_element "Alderney"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-sark class:uk-form-label use_label_element "Sark"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-barbados class:uk-form-label use_label_element "Barbados"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-commercial class:uk-form-label use_label_element "Commercial"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-ftb class:uk-form-label use_label_element "First-time buyer"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-other class:uk-form-label use_label_element "Other"]
		</div>
	</div>
</div>

<div class="uk-form-row" style="margin-top: 0;">
	[group group-sales]
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="" style="margin-top: 20px;">
		<div class="uk-width-medium-1-2">
			<label class="uk-form-label" for="">Minimum Price</label>
			<div class="uk-form-controls">[select swof-min-price class:uk-width-1-1 include_blank "￡100,000" "￡200,000" "￡300,000" "￡400,000" "￡500,000" "￡600,000" "￡700,000" "￡800,000" "￡900,000" "￡1,000,000" "￡1,500,000" "￡2,000,000" "￡2,500,000" "￡3,000,000" "￡3,500,000" "￡4,000,000" "￡4,500,000" "￡5,000,000+"]</div>
		</div>
		<div class="uk-width-medium-1-2 swof-form-col">
			<label class="uk-form-label" for="">Maximum Price</label>
			<div class="uk-form-controls">[select* swof-max-price class:uk-width-1-1 include_blank "￡100,000" "￡200,000" "￡300,000" "￡400,000" "￡500,000" "￡600,000" "￡700,000" "￡800,000" "￡900,000" "￡1,000,000" "￡1,500,000" "￡2,000,000" "￡2,500,000" "￡3,000,000" "￡3,500,000" "￡4,000,000" "￡4,500,000" "￡5,000,000+"]</div>
		</div>
	</div>
	[/group]
	[group group-rentals]
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="" style="margin-top: 20px;">
		<div class="uk-width-medium-1-2">
			<label class="uk-form-label" for="">Minimum Price (PCM)</label>
			<div class="uk-form-controls">[select swof-min-price-pcm class:uk-width-1-1 include_blank "￡0" "￡500" "￡1,000" "￡1,500" "￡2,000" "￡2,500" "￡3,000" "￡3,500" "￡4,000" "￡4,500" "￡5,000+"]</div>
		</div>
		<div class="uk-width-medium-1-2 swof-form-col">
			<label class="uk-form-label" for="">Maximum Price (PCM)</label>
			<div class="uk-form-controls">[select* swof-max-price-pcm class:uk-width-1-1 include_blank "￡0" "￡500" "￡1,000" "￡1,500" "￡2,000" "￡2,500" "￡3,000" "￡3,500" "￡4,000" "￡4,500" "￡5,000+"]</div>
		</div>
	</div>
	[/group]
</div>

<div class="uk-form-row">
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-medium-1-2">
			<label class="uk-form-label" for="">Bedrooms</label>
			<div class="uk-form-controls">[select swof-bedrooms class:uk-width-1-1 include_blank "1" "2" "3" "4" "5" "6"]</div>
		</div>
		<div class="uk-width-medium-1-2 swof-form-col">
			<label class="uk-form-label" for="">Parking</label>
			<div class="uk-form-controls">[select swof-parking class:uk-width-1-1 include_blank "None" "On Street" "Off Street" "Garage"]</div>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">TYPE OF PROPERTY REQUIRED</label>
</div>

<div class="uk-form-row">
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-small-1-2">
			[checkbox swof-apartment class:uk-form-label use_label_element "Apartment/Flat"]
		</div>
		<div class="uk-width-small-1-2">
			[checkbox swof-detached-bungalow class:uk-form-label use_label_element "Detached Bungalow"]
		</div>

		<div class="uk-width-small-1-2">
			[checkbox swof-detached-house class:uk-form-label use_label_element "Detached House"]
		</div>
		<div class="uk-width-small-1-2">
			[checkbox swof-semi-detached-bungalow class:uk-form-label use_label_element "Semi-detached Bungalow"]
		</div>

		<div class="uk-width-small-1-2">
			[checkbox swof-semi-detached-house class:uk-form-label use_label_element "Semi-detached House"]
		</div>
		<div class="uk-width-small-1-2">
			[checkbox swof-terraced-bungalow class:uk-form-label use_label_element "Terraced Bungalow"]
		</div>

		<div class="uk-width-small-1-2">
			[checkbox swof-terraced-house class:uk-form-label use_label_element "Terraced House"]
		</div>
		<div class="uk-width-small-1-2">
			[checkbox swof-property-with-wing class:uk-form-label use_label_element "Property With Wing"]
		</div>

		<div class="uk-width-small-1-2">
			[checkbox swof-renovation-property class:uk-form-label use_label_element "Renovation Property"]
		</div>
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">PREFERRED PARISHES</label>
</div>

<div class="uk-form-row">
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			[checkbox swof-castel class:uk-form-label use_label_element "Castel"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-forest class:uk-form-label use_label_element "Forest"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-st-andrew class:uk-form-label use_label_element "St Andrew"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-st-martin class:uk-form-label use_label_element "St Martin"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-st-peter-port class:uk-form-label use_label_element "St Peter Port"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-st-pierre-du-bois class:uk-form-label use_label_element "St Pierre du Bois"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-st-sampson class:uk-form-label use_label_element "St Sampson"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-st-saviour class:uk-form-label use_label_element "St Saviour"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-torteval class:uk-form-label use_label_element "Torteval"]
		</div>
		<div class="uk-width-1-2">
			[checkbox swof-vale class:uk-form-label use_label_element "Vale"]
		</div>
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">Any Other Requirements?</label>
	<p style="font-size: 12px; line-height: 1; margin-top: 0;"><strong>E.g.</strong> Size of garden, condition, sheltered housing required, pets to accommodate, ground floor flat or lift access only etc.</p>
	<div class="uk-form-controls">
		[textarea swof-other-requirements class:uk-width-1-1]
	</div>
</div>

<div class="uk-form-row">
	[multistep "2-3-https://stage.swoffers.co.uk/register/confirm-your-registration/"]
	[previous class:uk-button class:uk-button-success "GO BACK"]
	[submit class:uk-button class:uk-button-success "NEXT"]
</div>

    Step 3

    <div class="uk-form-row">
	<h3 style="margin-top: 0;">Personal Information</h3>
	<hr style="margin: 15px 0;">
</div>

<div class="uk-form-row">
	<h4>Name</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Title:</strong><br/>[multiform "swof-title"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Name:</strong><br/>[multiform "swof-first-name"] [multiform "swof-last-name"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<h4>Contact Details</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Email Address:</strong></strong><br/>[multiform "swof-email"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Telephone Number:</strong><br/>[multiform "swof-phone"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Mobile Number:</strong><br/>[multiform "swof-mobile"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Work Number:</strong><br/>[multiform "swof-work"]</p>
			</div>
	</div>
</div>

<div class="uk-form-row">
	<h4>Address</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>House Name/Number:</strong><br/>[multiform "swof-address-1"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Address Line 1:</strong><br/>[multiform "swof-address-2"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Address Line 2:</strong></strong><br/>[multiform "swof-address-3"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Address Line 3:</strong></strong><br/>[multiform "swof-address-4"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Parish:</strong><br/>[multiform "swof-parish"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Country:</strong><br/>[multiform "swof-country"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0;"><strong>Postcode:</strong><br/>[multiform "swof-postcode"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Do You Have a Property to Sell?</strong><br/>[multiform "swof-property-to-sell"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Are You Happy to Live on a Clos?</strong><br/>[multiform "swof-happy-to-live"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<h3 style="margin-top: 0;">Property Requirements</h3>
	<hr style="margin: 15px 0;">
</div>

<div class="uk-form-row">
	<h4>Market Type(s)</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-1">
			<p style="margin: 0 0 15px;">[multiform "swof-local"] [multiform "swof-local-rental"] [multiform "swof-open"] [multiform "swof-open-rental"] [multiform "swof-alderney"] [multiform "swof-sark"] [multiform "swof-barbados"] [multiform "swof-commercial"] [multiform "swof-ftb"] [multiform "swof-other"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<h4>Property Criteria</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Min Price:</strong><br/>[multiform "swof-min-price"][multiform "swof-min-price-pcm"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Max Price:</strong><br/>[multiform "swof-max-price"][multiform "swof-max-price-pcm"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Bedrooms:</strong><br/>[multiform "swof-bedrooms"]</p>
		</div>
		<div class="uk-width-1-2">
			<p style="margin: 0 0 15px;"><strong>Parking:</strong><br/>[multiform "swof-parking"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<h4>Type(s) of Property</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-1">
			<p style="margin: 0 0 15px;">[multiform "swof-apartment"] [multiform "swof-detached-bungalow"] [multiform "swof-detached-house"] [multiform "swof-semi-detached-bungalow"] [multiform "swof-semi-detached-house"] [multiform "swof-terraced-bungalow"] [multiform "swof-terraced-house"] [multiform "swof-property-with-wing"] [multiform "swof-renovation-property"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<h4>Preferred Parish(s)</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-1">
			<p style="margin: 0 0 15px;">[multiform "swof-castel"] [multiform "swof-forest"] [multiform "swof-st-andrew"] [multiform "swof-st-martin"] [multiform "swof-st-peter-port"] [multiform "swof-st-pierre-du-bois"] [multiform "swof-st-sampson"] [multiform "swof-st-saviour"] [multiform "swof-torteval"] [multiform "swof-vale"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<h4>Any Other Requirements?</h4>
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-1-1">
			<p style="margin: 0 0 15px;">[multiform "swof-other-requirements"]</p>
		</div>
	</div>
</div>

<div class="uk-form-row">
	<p>Thank you for completing our registration form. We will automatically email you information on matching properties as requested.</p>
</div>

<div class="uk-form-row">
	<div class="uk-grid uk-grid-medium" data-uk-grid-margin="">
		<div class="uk-width-medium-1-1">
			[checkbox swof-contact-text class:uk-form-label use_label_element "Tick this box to be advised of the latest properties via text message"]
		</div>
		<div class="uk-width-medium-1-1">
			[checkbox swof-contact-latest class:uk-form-label use_label_element "Tick this box if you would like the latest property news"]
		</div>
		<div class="uk-width-medium-1-1">
			[checkbox swof-contact-review class:uk-form-label use_label_element "Tick this box if you would like to receive a printed copy of our Open Market review published 3 times a year"]
		</div>
	</div>
</div>

<div class="uk-form-row">
	[multistep "3-3"]
	[previous class:uk-button class:uk-button-large class:uk-button-success "GO BACK"]
	[submit class:uk-button class:uk-button-large class:uk-button-success "SUBMIT"]
</div>

    Really hope you can help me solve this one!

    Cheers,
    Ollie

    Plugin Author Jules Colle

    (@jules-colle)

    Oh right, the summary fields.. this is a known bug that I’m trying to sort with the plugin author. But didn’t give it much priority yet. Will look into it. Normally, if the form is submitted, the values should be submitted, but there’s something off with the summary.

    Thread Starter hamiltonbrooke

    (@hamiltonbrooke)

    Hi Jules,

    Is it the summary fields that is the issue though?

    I noticed that if you fill out steps 1 and 2, go to the final step and then go back to step 2 it hasn’t stored any of the entered information yet if you go back to step 1 it has?

    Thanks again,
    Ollie

    I am literally dealing with this exact same issue. Any updates?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Conditional Fields for Contact Form 7 + Contact Form 7 Multi-Step Forms’ is closed to new replies.