How to customize the listing form

[julien.trqt]

Hi

In order to create a multi step listing form, I’d like to know where is located the file responsible to it ?

After some research, I found a php file : plugins > HP > Includes > Forms > class-listing-submit.php.

But is there a good way to custom it from here ?

Thanks

[andrii]

Hi,

You can customize forms using PHP snippets, please check these samples Search · user:hivepress form · GitHub and hook references Home | HivePress Hook Reference
When it comes to multisteps, we recommend doing it through JavaScript by creating steps inside the page, so you don’t need PHP.

​I hope this is helpful to you.

[julien.trqt]

Hi Andrii,

Thank you it’s helpful I’ll try

You say that I can do it inside the page with JS, at this time I don’t know where the “publish listing” page is located to customize it.

I know but I’m maybe wrong, that this page is displaying a HP block. In my case the publish listing page is a template where I added the (listing form) block. How to find the place where each fields of the block are located to then apply them JS Code and transform them to a ms form ?

Hope I’m clear, thank you for your help

[andrii]

Hi,

This form has a unique CSS class hp-form-listing-submit, through which you can target JS and work with HTML elements after the page loads.

[julien.trqt]

Thank you andrii I’ll certainly can do something with it

[julien.trqt]

Hi andrii,

I created something that works pretty great.

The only things is that at the first step, when I click on an item in the drop-down list, the whole form is displayed as it was initially (each step one below the other, vertically with every fields visible) instead of being able to click on the next button and display the next step.

Can you see where this problem might be coming from?

Here is the snippet :

document.addEventListener("DOMContentLoaded", function() {
  // 
  const form = document.querySelector(".hp-form");
  const formFields = form.querySelectorAll(".hp-form__field");
  const selectInput = form.querySelector("[name='categories']");
  const publishButton = form.querySelector(".hp-form__button");

  // Hide elements
  formFields.forEach((field, index) => {
    if (index !== 0 && field !== publishButton) {
      field.style.display = "none";
    }
  });

  // Fnctn next step
  function nextStep() {
    if (currentStep < formFields.length - 1) {
      formFields[currentStep].style.display = "none";
      currentStep++;
      formFields[currentStep].style.display = "block";
      updateButtonVisibility();
    }
  }

  // Fnctn prev step
  function prevStep() {
    if (currentStep > 0) {
      formFields[currentStep].style.display = "none";
      currentStep--;
      formFields[currentStep].style.display = "block";
      updateButtonVisibility();
    }
  }

  // Event manager for the change in the drop-down list (doesn't work)
  selectInput.addEventListener("change", function(event) {
    nextStep(); 
  });

  // Btn prev nxt
  const nextButton = document.createElement("button");
  nextButton.textContent = "Suivant";
  nextButton.addEventListener("click", function(event) {
    event.preventDefault();
    nextStep();
  });

  const prevButton = document.createElement("button");
  prevButton.textContent = "Précédent";
  prevButton.addEventListener("click", function(event) {
    event.preventDefault();
    prevStep();
  });

  // Insrt btn 
  const formFooter = form.querySelector(".hp-form__footer");
  formFooter.appendChild(prevButton);
  formFooter.appendChild(nextButton);

  
  prevButton.style.display = "none";

  
  function updateButtonVisibility() {
    if (currentStep === 0) {
      prevButton.style.display = "none";
    } else {
      prevButton.style.display = "inline-block";
    }
    if (currentStep === formFields.length - 1) {
      nextButton.style.display = "none";
      publishButton.style.display = "inline-block";
    } else {
      nextButton.style.display = "inline-block";
      publishButton.style.display = "none";
    }
  }

  // Event publish btn
  publishButton.addEventListener("click", function(event) {
    event.preventDefault();
  });


  let currentStep = 0;
  updateButtonVisibility();
});

Thank you for your help

[andrii]

Hi,

Please note that the Ajax form automatically updates after selecting a category to show category-specific attributes. You can try to block this behavior via JS. But please note that we cannot debug custom code, we only provide general recommendations Support Policy | HivePress

I believe this will be useful to you.

[julien.trqt]

Thanks I understand