@all,

I have the following code for an Inquiry Contact form.

Code: Select all

<cms:form action='' method="post" name="enquiry-form" id="enquiry-form">
    <label>Full Name * <cms:if k_error_fname><small id="fname_error" class="error" style="display: inline-block; color: #000;">&nbsp;We need a name to address you!</small></cms:if></label>
    <br>
    <cms:input name="fname" id="fname" type="text" class="input" required="1" />
    <div class="ptop-10"></div>
    
    <label>Email Address * <cms:if k_error_email><small id="email_error" class="error" style="display: inline-block; color: #000;">&nbsp;We will definitely write to you!</small></cms:if></label>
    <br>
    <cms:input name="email" id="email" type="text" class="input" required="1" validator="email" />
    <div class="ptop-10"></div>
    
    <label>Mobile * <cms:if k_error_mobile><small id="mobile_error" class="error" style="display: inline-block; color: #000;">&nbsp;We won't call you till you want!</small></cms:if></label>
    <br>
    <cms:input name="mobile" id="mobile" type="text" class="input" required="1" validator='non_negative_integer | exact_len=10' />
    <div class="ptop-10"></div>
    
    <label>Message * <cms:if k_error_message><small id="message_error" class="error" style="display: inline-block; color: #000;">&nbsp;Write something, we love to read!</small></cms:if></label>
    <br>
    <cms:input type='textarea' name="message" id="message" class="input" rows="4" required="1" ></cms:input>
    <div class="ptop-10"></div>
    
    <cms:if k_success >   
        <cms:send_mail from=k_email_from to=k_email_to subject='Feedback from your site'>
            The following is an email sent by a visitor to your site :
            <cms:show k_success />
        </cms:send_mail>
        
        <cms:set_flash name='success_msg' value="Thank you. We will get back to you as soon as possible." />
        <cms:redirect k_page_link />
        
    </cms:if>
    
    <center>
        <button type="submit" class="button btn btn-default" data-toggle="modal2" data-target="#EnquiryFormSuccess">
            <i class="fa fa-envelope-o"></i> &nbsp; Enquire Now
        </button>
        <div class="ptop-20"></div>
    </center>
</cms:form>

and the success modal as:

Code: Select all

<!-- View Projects Modal -->
<div class="modal2 fade" id="EnquiryFormSuccess" tabindex="-1" role="dialog" aria-labelledby="EnquiryFormSuccess">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Our Projects</h4>
            </div>
            <div class="modal-body">
                <div class="ptop-20"></div>
                <div class="row">
                    <div class="col-md-12">
                        <cms:if "<cms:get_flash 'success_msg' />" >
                            <p id='mail_success' class='success'><cms:get_flash 'success_msg' /></p>
                        </cms:if>
                        <div class="ptop-20"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- View Projects Modal -->

I want to be able to submit the form (error free) and upon submission, once the page refreshes, I want to show a success message in the modal.

I referred the post: viewtopic.php?f=4&t=7411 for the same. But when the form submits and redirects the popup doesn't display. I have also uncommented the

require_once( K_COUCH_DIR.'addons/cart/cart.php' );

line in the "kfunctions.php".

Can anyone please shed light on the same?

Regards,
GenXCoders

[KK]

Hi,

First check if the flash-message is being received as expected.
To do that, place the message handler immediately above the form itself as follows -

Code: Select all

<cms:if "<cms:get_flash 'success_msg' />" >
    <h2><cms:get_flash 'success_msg' /></h2>
</cms:if>

<cms:form action='' method="post" name="enquiry-form" id="enquiry-form">
    ..
    ..
</cms:form>

Once you can see the message, remove the <h2>block and replace it with the modal dialog box code (so the dialog box itself should be generated within the <cms:if "<cms:get_flash 'success_msg' />" > block).

Hope it helps.

@KK Sir,
Yes it did the trick. Thanks.

The current working code is:
The Form:

Code: Select all

<cms:form action='' method="post" name="enquiry-form-success" id="enquiry-form-success">
    <label>Full Name * <cms:if k_error_fname><small id="fname_error" class="error" style="display: inline-block; color: #000;">&nbsp;We need a name to address you!</small></cms:if></label>
    <br>
    <cms:input name="fname" id="fname" type="text" class="input" required="1" />
    <div class="ptop-10"></div>
    
    <label>Email Address * <cms:if k_error_email><small id="email_error" class="error" style="display: inline-block; color: #000;">&nbsp;We will definitely write to you!</small></cms:if></label>
    <br>
    <cms:input name="email" id="email" type="text" class="input" required="1" validator="email" />
    <div class="ptop-10"></div>
    
    <label>Mobile * <cms:if k_error_mobile><small id="mobile_error" class="error" style="display: inline-block; color: #000;">&nbsp;We won't call you till you want!</small></cms:if></label>
    <br>
    <cms:input name="mobile" id="mobile" type="text" class="input" required="1" validator='non_negative_integer | exact_len=10' />
    <div class="ptop-10"></div>
    
    <label>Message * <cms:if k_error_message><small id="message_error" class="error" style="display: inline-block; color: #000;">&nbsp;Write something, we love to read!</small></cms:if></label>
    <br>
    <cms:input type='textarea' name="message" id="message" class="input" rows="4" required="1" ></cms:input>
    <div class="ptop-10"></div>
    
    <cms:if k_success >   
        <cms:send_mail from=k_email_from to=k_email_to subject='Enquiry form'>
            The following is an email sent by a visitor to your site :
            <cms:show k_success />
        </cms:send_mail>
        
        <cms:set_flash name='success_msg' value="We will get back to you as soon as possible." />
        <cms:redirect k_page_link />
        
    </cms:if>
    
    <center>
        <button type="submit" class="button btn btn-default" data-toggle="modal" data-target="#enquiry-form-success-modal">
            <i class="fa fa-envelope-o"></i> &nbsp; Enquire Now
        </button>
        <div class="ptop-20"></div>
    </center>
</cms:form>

The Modal:

Code: Select all

<cms:if "<cms:get_flash 'success_msg' />" >
            <div class="modal fade" id="enquiry-form-success-modal" tabindex="-1" role="dialog" aria-labelledby="enquiry-form-success-modal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Thanks for writing to us!</h4>
                        </div>
                        <div class="modal-body">
                            <div class="ptop-20"></div>
                            <div class="row">
                                <div class="col-md-12">
                                    <p id='mail_success' class='success'><cms:get_flash 'success_msg' /></p>
                                    <div class="ptop-20"></div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </cms:if>

The Additional jQuery (this was added coz i have multiple Modals on the same form):

Code: Select all

$(document).ready(function() { $('#enquiry-form-success-modal').modal("show") });

Regards,
GenXCoders