Contact Form 7 Multi-Step Addon next button not working

[ariellevate]

Hi!
I created this page with the Creative contact form 3 and the 3 party plugin Contact Form 7 Multi-Step Addon, it was working fine for a long time, and now the next button has stopped working and I am at a loss on how to correct it.

page: https://www.showdevida.no/book/

[tristup]

Hi Ariell,

Thanks for reaching out.
I have checked and found that the JavaScript error is showing in the Browser Console while clicking on the Next button. It seems the issue is related to the 3rd Party plugin, I would suggest you contact the plugin author with this and let us know the feedback from them.

Thanks

[ariellevate]

Hi! I went to the plugin authors page and there are 4 months old posts there with the same issue:
https://wordpress.org/support/plugin/contact-form-7-multi-step-addon/

There are no responses from the authors. The only fixes Other users have provided are to revert back to older versions of CF7 or alter the code which did not work for me.

I don’t want to use old versions of CF7 as this plugin can be prone to spam/ hacking. And I don’t want to run into future problems with this plugin as it seems they are not regularly updating it.

So I replaced the plugin with a plugin called Ultimate Addons for Contact Form 7 by Themefic.

Although I am having some trouble trying to style it the same way the previous one was. I was able to style the next and previous buttons by replacing:
.wpcf7 .trx_mscf_next,
.wpcf7 .trx_mscf_prev,

with:
.wpcf7 button.uacf7-next,
.wpcf7 button.uacf7-prev,

But,

The two issues I have is:

1. I cannot figure out how to make it so that the current/ active step has a different color than the rest of the steps.

I altered this code to use the selectors for the new plugin:

.wpcf7 .uacf7-steps.steps-form div.uacf7-steps.steps-form.active {
color: rgb(185,150,92);
}

.wpcf7 .uacf7-steps.steps-form div.uacf7-steps.steps-form.active:after,
.wpcf7 .uacf7-steps.steps-form div.uacf7-steps.steps-form.active:before {
background: rgb(185,150,92);
color: #fff;
}
But nothing changes. I’m not sure if it’s possible with this plugin or what to put.

2. Problem: I cannot find a way to line up the “SEND/submit button” with the “previous” button like it was before on the final step. Now the Send button is on top of the previous, I would like them to stand next to each other like the “previous” and “next”
   I added this:
   display:inline-block;
   margin-right:5px;
   to the:
   .wpcf7 input[type=“submit”]

But it only added the 5 px margin-right.

Could you provide some insight here? Would highly appreciate it, and hope this research can come to use for others who have installed the very neat creative contact form 3 from the design could.

[ruenel]

Hello Ariell,

Regretfully what you are trying to do is beyond the scope of our support. We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

And also, all of your issues are coming from a 3rd party plugins. It is best that you contact the creators of the plugins or contact a 3rd party developer that is more familiar with the plugin and on how to troubleshoot. modify the plugins.

Thank you for your understanding.