Problems, need help? Have a tip or advice? Post it here.
7 posts Page 1 of 1
Hi Kamran,

I am trying to incorporate the contact form code we settled on last week and use it within twitter bootstrap modal.
I link to the modal which contains my form, fill out the info & click submit. The modal then closes and I do not know if it is successful or not. I have tried redirecting to the modal again but this does not seem to work. (Note: code below is just redirecting to page link)
Maybe it is not possible to keep modal open to show success or failure? See code below

Code: Select all
<a href="#myModal" role="button" class="btn" data-toggle="modal">Contact Us Now</a>
      
      <!-- Modal -->
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
               <h3 id="myModalLabel">Contact Us</h3>
              </div>
              <div class="modal-body">
               <p><cms:form action=' ' method='post' id='contact_form' class='form'>
               
               <!-- <form method="post" class="form"> -->
               
                  <div class="form-row">
                     <label class="form-label">Your Name</label>
                     <div class="form-item">
                        <cms:input type='text' name="name" id="name" value="" required='1' class="span5 small inputtext input_middle required" />
                        <cms:if k_error_name>
                              <p id='name_error' class='help'>Enter a Name</p>
                        </cms:if>
                     </div>
                  </div>
                  <div class="form-row">
                     <label class="form-label">Your Email</label>
                     <div class="form-item">
                        <cms:input type="text" id="email" name="email" value="" required='1' validator='email' class="span5 small inputtext input_middle required" />
                        <cms:if k_error_email>
                           <p id='email_error' class='help'>Enter a valid email address</p>
                        </cms:if>
                     </div>
                  </div>
                  <div class="form-row">
                     <label class="form-label">Select the Store You Wish to Contact</label>
                     <div class="form-item">
                        <cms:input type="dropdown" name="store" opt_values="Choose One | Dublin Rd. Pharmacy | Monksland" class="span5" />
                        <cms:if k_error_message>
                              <p id='store_error' class='help'>Please Select a Store</p>
                           </cms:if>
                     </div>
                  </div>
                  <div class="form-row">
                     <label class="form-label">Message</label>
                     <div class="form-item">
                           <cms:input type='textarea' cols="" rows="5" id="message" name="message"  required='1' class="span5 large textarea textarea_middle required"></cms:input>
                           <cms:if k_error_message>
                              <p id='message_error' class='help'>Enter a message</p>
                           </cms:if>
                     </div>
                  </div>
                  
                     <cms:if k_success >   
                           <p id='mail_success' class='success'>Thank you. We will get back to you as soon as possible.</p>
                           
                           <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 url='http://www.netsmart.ie/dev/cp/contact.php#myModal' />
                           
                     </cms:if>
                  
                                 
               </p>
              </div>
              <div class="modal-footer">
                  <div class="button-row">
                     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                     <input type="submit" id='send' class="btn btn-info">
                  </div>
               <!-- </form> -->
            </cms:form> 
               
              </div>
            </div>
            <!-- End Modal -->

The modal doesn't per say close... Your browser submits the form contents and reloads the page. To prevent this expected default behavior we need to use JavaScript/jQuery to reload only the contact form in the modal. Try placing the follow code after your other scripts:
Code: Select all
<script type="text/javascript">
$(document).ready(function() {
   $("#contact_form").submit(function(event) {
      event.preventDefault();
      $.ajax({
         type: "POST",
         url: $(this).attr("action"),
         data: $(this).serialize(),
         success: function(data) {
            $("#contact_form").html($(data).find("#contact_form").children());
         }
      });
   });
});
</script>

Additionally, please remove the 'redirect' tag. <p> tags should not contain block level elements, so also please remove the <p> before the 'form' tag and the </p> before the modal-footer. I haven't tested this, but it should work...
Hi cmsteam,

With the JS code given by @cheesypoof, please use the following HTML markup for the form.
It is a slightly modified version of the one pasted by you with the following modifications -
1. The 'form' tag now encloses the modal-header, modal-body and modal-footer divs.
2. The code for showing errors for the dropdown was using the wrong name. This is fixed.
3. Finally, redirect and flash messages won't work with AJAX. So, the form itself now shows the success message and hides the fields upon successful submission.
Code: Select all
<a href="#myModal" role="button" class="btn" data-toggle="modal">Contact Us Now</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <cms:form action=' ' method='post' id='contact_form' class='form'>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Contact Us</h3>
        </div>

        <div class="modal-body">
            <cms:capture into='my_buffer'>
                <div class="form-row">
                    <label class="form-label">Your Name</label>
                    <div class="form-item">
                        <cms:input type='text' name="name" id="name" value="" required='1' class="span5 small inputtext input_middle required" />
                        <cms:if k_error_name>
                            <p id='name_error' class='help'>Enter a Name</p>
                        </cms:if>
                    </div>
                </div>

                <div class="form-row">
                    <label class="form-label">Your Email</label>
                    <div class="form-item">
                        <cms:input type="text" id="email" name="email" value="" required='1' validator='email' class="span5 small inputtext input_middle required" />
                        <cms:if k_error_email>
                            <p id='email_error' class='help'>Enter a valid email address</p>
                        </cms:if>
                    </div>
                </div>

                <div class="form-row">
                    <label class="form-label">Select the Store You Wish to Contact</label>
                    <div class="form-item">
                        <cms:input type="dropdown" name="store" required='1' opt_values="Choose One=- | Dublin Rd. Pharmacy | Monksland" class="span5" />
                        <cms:if k_error_store>
                            <p id='store_error' class='help'>Please Select a Store</p>
                        </cms:if>
                    </div>
                </div>

                <div class="form-row">
                    <label class="form-label">Message</label>
                    <div class="form-item">
                        <cms:input type='textarea' cols="" rows="5" id="message" name="message"  required='1' class="span5 large textarea textarea_middle required"></cms:input>
                        <cms:if k_error_message>
                            <p id='message_error' class='help'>Enter a message</p>
                        </cms:if>
                    </div>
                </div>
            </cms:capture>

            <cms:if k_success >   
                <p id='mail_success' class='success'>Thank you. We will get back to you as soon as possible.</p>

                <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:else />
                <cms:show my_buffer />
            </cms:if>
        </div>

        <div class="modal-footer">
            <div class="button-row">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <cms:if "<cms:not k_success />" ><input type="submit" id='send' class="btn btn-info"></cms:if>
            </div>
        </div>
    </cms:form>
</div>
<!-- End Modal -->

Hope this helps.

Addendum:
A slightly adapted (but more robust version) can be found here -
viewtopic.php?f=4&t=10924&p=28011#p28011
Hi cheeseypoof / KK,

Thanks for the script cheesypoof, thanks for editing the code KK.
It is now working perfectly and I have modified the form to send
to different email addresses depending on the option clicked on
the dropdown.
Code: Select all
<cms:if frm_send_to='Dublin Rd. Pharmacy'>
                <cms:set my_mail_address='email1@domain.com' />
              <cms:else/>
                <cms:set my_mail_address='email2@domain.com' />
              </cms:if>   

              <cms:send_mail from=frm_email to=my_mail_address subject='Feedback from your site' >
                The following is an email sent by a visitor to your site:
                <cms:show k_success />
              </cms:send_mail>

Thanks again guys!!
You are welcome :)
Hi there,

excellent work there! I am a fresh programmer (learner).. however i was trying to implement this into my website (bootstrap only, custom php. I guess "<cms:form" are native to the Couch CMS, how do i change them and have the same form to use in my website?

Regards,
adgfx
Hello and welcome adgfx.

You are right - cms:form is a Couch specific tag.
To get the form discussed in this thread working on your site, you'll have to add Couch to your setup.
The process is pretty easy as you can retrofit Couch into any existing design.

To learn more how Couch works, I suggest you please take a look at our detailed tutorial at http://www.couchcms.com/docs/tutorials/portfolio-site/ where we build a complete site from scratch. The tutorial also covers building forms.

Do let us know if you happen to require any help or further explanation.

Thanks.
7 posts Page 1 of 1