Expanding form scripts

[kemiga]

I managed to make my form with various groups that drops down when pressing “NEXT”

I used this tutorial:

Expanding form

Demo:
https://www.quform.com/examples/expanding-form

When pressing the first “NEXT” button, the group 2 appears while it slides down. That part is okay.

But I want that while I press that “NEXT” button, the first group should display: none;

I want that it feels like multi pages, and not just dropdowns that slides down when pressing the “NEXT” button.

Someone have an idea for that?

[kemiga]

I actually found out how to hide the group. Might help others:


<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#show-section-2').click(function () {
$(this).remove();
$('.iphorm_1_10-group-wrap').slideDown();
$('.iphorm_1_5-group-wrap').hide();
$('.iphorm-submit-wrap-2').show();
return false;
});
});
</script>


Just insert the .hide line below into the already existing code above

$('.iphorm_1_5-group-wrap').hide();

Cheers

[kemiga]

Ok, so I got to hide the groups.. but I still need to show all the groups again if there is an error.

For example, if some of the required fields is not filled.

.iphorm-errors-wrap

How to show the groups again if the form is not sent because of the missing required fields?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[kemiga]

Hi Ally,

Thanks for the reply.

Well for me the easy workaround could be just to show the groups again if the error message appears.

How can I show the groups again if it there is an error?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[kemiga]

I found the code:

$('.iphorm-errors-wrap', $form).fadeIn(1000).show();

Could you be more specific what to do and what to add?

I guess you want to say add the following after the code above?

$('.iphorm_1_5-group-wrap').show();

• This reply was modified 10 years, 1 month ago by kemiga.

[kemiga]

Ok tried this and it worked. I know it’s a temporary workaround, but it worked:


// Fade all errors in
$('.iphorm-errors-wrap', $form).fadeIn(1000).show();

$('.iphorm_1_5-group-wrap').show(); <-- added this unique line
$('.iphorm_1_10-group-wrap').show(); <-- added this unique line


And when submitting the form again & if having success, I added the following part:


// Custom success callback
if (typeof settings.success === 'function') {
settings.success();
}
});

$('.iphorm_1_5-group-wrap').hide(); <-- added this unique line
$('.iphorm_1_10-group-wrap').hide(); <-- added this unique line
$('.iphorm-submit-input-wrap-4').hide(); <-- added this unique line


Thanks for the hints. Will look forward to the new plugin updates.

• This reply was modified 10 years, 1 month ago by kemiga.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts