Forum

Thread tagged as: Question, Runway, Forms

Use perch form in overlay - prevent default post submission action

We have a perch form opening in an overlay from clicked link in header of all site pages. Email is sent fine to recipient and response stored in db. We would like to customise what happens after that. Ideally the form would submit and we could replace the content in the overlay with a message and close button.

I have done the following so far -

Created small app in Apps called 'overlay_form_submission'

function overlay_form_submission_form_handler($SubmittedForm){
if ($SubmittedForm->id == 'contact') {
// fields are $SubmittedForm->data
echo '<script>alert("Message received and understood!!!!");</script>';
//print_r($SubmittedForm->id);
}
}

Perch form tag is <perch:form id="contact" method="post" app="perch_forms overlay_form_submission">

So form output is handled by perch_forms first then passed to overlay_form_submission.

The alert box there stops the default post submission action of 'perch_forms' which is reloading the current page ie. the overlay's parent. No redirect is specified in the form options tab.

On clicking OK in alert box the overlay closes and current page reloads.

Can I replace the alert box with an action that prevents the perch_forms page reload so I can display message in overlay?

Could I copy into my new app and edit the perch_forms submit and save response code to stop after email send and db write? Therefore removing the need to call perch_forms at all but maintaining the email send and response save functionality.

Hope that makes sense!

Alternative I guess is to handle the form output completely with external script and not have Runway store responses etc

Thanks

Keith
Keith Winter

Keith Winter 0 points

  • 4 years ago
Robert Ketter

Robert Ketter 103 points

4 years ago

are you using the success tag in your form? Your success message will be shown and the form suppressed unless you explicitly state the form be re displayed. I had one site I added a class to the success section of the form then used JavaScript to check for the class and do some magic based on those results.
Keith Winter

Keith Winter 0 points

4 years ago

I am yes but even though I do not have a redirect URL in form settings tab the page reloads after form submission. I do not see the success message.

I have ajax pulling in this custom php file into jquery overlay


    include('../runtime.php');
    /*$theform = perch_content_custom('Contact', array(
        'template'=>'../content/contact_form.html',
        'skip-template' => true,
        'return-html' => true, 
    ));
    print_r($theform)*/
    perch_form('Contact')

I couldn't get the perch_content_custom tag to work for some reason, returned empty array so commented out so am using perch_form. This displays the form and submits fine but reloads page.

I have noticed also that 2 other forms i have working using perch_content_custom in a normal page rather than overlay display success message but they do reload too.

I must have something wrong here I think!

Thanks
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I don't follow what the point of the custom app is. Could you explain?
Keith Winter

Keith Winter 0 points

4 years ago

I was trying intercept the default action I guess! Planning on running some jquery to replace content of overlay with message. If I remove the custom app from the perch form tag, leaving just the default the overlay closes on submission.

As the ajax call is pulling in a php file that loads the form via perch_form tag I would assume the default action is to then replace the form in the overlay with the success message? However the whole page, parent and all reloads.

Thanks for your help as always.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You can put your response in the <perch:success> tags as part of the form template.
Keith Winter

Keith Winter 0 points

4 years ago

Hi Drew Found solution online, got it working. Submitting forms now via ajax.

https://perchd.io/submitting-perch-forms-using-ajax

Thanks for help.
Keith Winter

Keith Winter 0 points

4 years ago

Sorry still have one issue.

The following works fine, sends email and stores response, does not reload page and replaces form with new content but does not handle the file upload at all. File is not present in uploads dir and it is not shown in response details view. Am I missing something here?


$(function() {

    // Get the form
    var form = $('#form1_cv');

    //$(form).submit(function(event){
    $(document).on('submit', '#form1_cv', {}, function(event) {

        // Serialize the form data and store the ID of the submitted form
        var formData = $(form).serialize(),
            id = $(form).attr('id');

        // Stop the browser from submitting the form.
        event.preventDefault();

        $.ajax({
            type: "POST",
            // Get the URL we're submitting to from the current form
            url: $(form).attr('action'),
            data: formData
        }).done(function(data) {
            $(form).replaceWith('Thanks!');
        });
    });

});

Thanks
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Is your JavaScript sending the file to the server?
Keith Winter

Keith Winter 0 points

4 years ago

Hi Drew Happy new Year Fixed the issue over Xmas, thanks.