Multi-Step Forms Acf Field?

Two things –

First: how complicated multi might be an issue but believe this already has this ability as you can use hooks or conditions or actions to achieve.

Second: you say like AF does. AF is built on using ACF so it definitely is suitable for forms including multi, ah IMO.

PS I am still learning and a lot of things are there but not easy to notice until one uses them because the documentation is still limited.

Hello,

Thanks for the feature request! Yes, this is definitely something I have in mind, and it was also requested before. I’m working on a multistep feature with an UI for ACF Extended Forms. However, I cannot tell you when it will be out.

Meanwhile, what you can do is to chain your forms between each others. Example:

Form 1 > Success page = Form 2 > Success page = Form 3.

It is also possible to do it with Javascript, but it will become quite more complex to code (as you have to change the validation process to only validate the current step etc…).

The first solution is more simple in my opinion.

I’ll keep you updated as soon as the feature is up for ACF Extended ??

Regards.

Hi, this is probably a late answer, but I was playing around and trying to figure how we could create a multi-step form and this is what I came up with.
First override form HTML render and add this code:

<!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
  </div>
<!-- Tabs are the steps of the form: -->
<div class="tab"> <p>{field:field_key}</p><p>{field:field_key}</p></div>
<div class="tab"> <p>{field:field_key}</p><p>{field:field_key}</p><p>{field:field_key}</p></div>

 <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button"  id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button"  id="nextBtn" onclick="nextPrev(1)">Next</button>	
 </div>

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
				document.getElementById("subBtn").style.display = "none";

  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").style.display = "none";
				document.getElementById("subBtn").style.display = "inline";	
  } else {
    document.getElementById("nextBtn").style.display = "inline";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("testForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

give an id to submit button
<input type="submit" id="subBtn" value="%s"/>

and add the css styles:

		/* Hide all steps by default: */
.tab {
  display: none;
}

				/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}

input.invalid{
  background-color: #ffdddd;
}
#subBtn{
	display:none;
	float:right;
	margin-top:10px;
}

Reference: w3schools
I hope this helps someone ??

ok so thinking about it its an interesting idea maybe could be possible by following this steps
1- Create a page for each step you are planning to have
2- Create the Fields Group using ACF
3- Create a new shortcode for each step
4- Include a seprate acf_form() in each shortcode created
5- in acf_form you are able to select the fields you want to appear
6- using add_action(‘acf/save_post’, ‘function_name’) you can now detect the save of the first step and get the new post id, then you can redirect the user to the next step passing the id as a parameter in the URL
7- after the user redirected to the next step page, you can now use the id in the URL to update the post created in the first step with the current step fields and so on

to be honest i didnt try this, but it seems like a good starting point
good luck

@yourtrustedfreelancer THANK YOU – You just solved like 5 issues i had at once