Making Form Disappear After Submission

  • Resolved kaleyathomas

    (@kaleyathomas)


    7 years, 1 month ago

    I have created a custom designed form via petition.css, but I’m trying to figure out if there’s a way that I can make the form disappear entirely rather than “grey out” after submission. I basically want to see the “success” message only (i.e. thank you for signing), and then the form will go away so that the social share icons that I’ve added below the petition will be just below the success message. I’m hoping for a stronger call to action to share after the form is submitted. A pop-up would do the trick too, but I think that’s way out of my wheelhouse unless someone has a suggestion for a free plugin that would integrate with the submit button on the Speak Out! form. Hope this makes sense.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author SpeakOut!

    (@123host)

    What you are trying to achieve does make sense

    If you dynamically set the class .dk-speakout-petition on the form element to display:none; it will hide the form itself. You can test it in your browser developer tools. I made it happen https://gyazo.com/d574f42b405f03b9bcd52fe94d994d77

    The only problem is that your changes may be over-written with an upgrade. But I doubt the code will be more than a couple of lines so you could always re-add it.

    If you do get this to work, please submit the code here and I will look at adding it as an option.

    Thread Starter kaleyathomas

    (@kaleyathomas)

    If I add the following code to petition.css

    .dk-speakout-petition {
    display:none;
    }

    It will make the form disappear entirely, meaning that the user never sees it in the first place. I only want the form to go away after the user’s response has been submitted. Am I misunderstanding your instructions?

    Plugin Author SpeakOut!

    (@123host)

    Kind of.

    There is code to make the acknowledgement box appear after the form is submitted. At the same time that is when to vanish the form instead of making it opaque

    /wp-content/plugins/speakout/js/public.js

    Line 108

    change

    $( '#dk-speakout-petition-' + id + ' .dk-speakout-petition' ).fadeTo( 400, 0.35 );

    to

    $( '#dk-speakout-petition-' + id + ' .dk-speakout-petition' ).hide();
//$( '#dk-speakout-petition-' + id + ' .dk-speakout-petition' ).fadeTo( 400, 0.35 );
    Plugin Author SpeakOut!

    (@123host)

    FWIW, you could get very creative with the jquery CSS modifications and hide that little gap under the green box, hide the “read petition” box, change colours, anything you like.

    But do keep a backup of the file (public.js.copy) in case I ever update the file and you lose your customisation.

    Plugin Author SpeakOut!

    (@123host)

    Actually, I have added both lines to the code with instructions on how to switch from fade to hide, so from the next upgrade, the code will always be there, you will still have to activate it if the script is updated though.

    Thread Starter kaleyathomas

    (@kaleyathomas)

    This is awesome, thank you so much for your prompt responses.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Making Form Disappear After Submission’ is closed to new replies.