Hello @Erandi
You will have to go a code approach here.
There are many ways to achieve this:
Use Liquid to Render Both Forms: Ensure both Form A and Form B are on the same page. You can use Liquid templates to render these forms. Initially, set Form B to be hidden.
2. Add JavaScript for Form Submission and Toggling: Implement JavaScript to handle the submission of Form A. Upon successful submission, you can use JavaScript to hide Form A and display Form B.
3. JavaScript to Hide/Show Forms: You can use simple style manipulation in JavaScript. For example, you might set display: none on Form A and display: block (or flex, depending on your layout) on Form B when Form A is successfully submitted.
Here’s a basic JavaScript snippet for the toggle effect:
document.getElementById('formA-submit').addEventListener('click', function(e) {
e.preventDefault();
// Add your form submission logic here
// After successful submission
document.getElementById('formA').style.display = 'none';
document.getElementById('formB').style.display = 'block';
});
Replace 'formA-submit', 'formA', and 'formB' with the appropriate IDs of your submit button and forms.
