Contact form in my app not working

shiny
1

Hi

I have my html template page which displays my charts. Im trying to have a contact form which submits to some php code (which emails the form to an address).

I cant seem to get even the javascript validation, let alone submitting the form. I get no errors, it just refuses to do anything. Ive tried removing the validation code and stripping the form back to absolute basics, but it doesnt do anything.

How can I have an html form which submits to some php?

Thanks

2

It's a bit hard to tell what could be happening. Can you provide a bit more detail about this and a short example?

Depending on how your app and html template is structured, my first guess (or element to check) is that there may be some missing css classes in your form which shiny uses to link the client and server. For example, shiny-bound-input or action-button. But it's a bit hard to tell. Are you injecting shiny elements into the template as described here or are you using your own html markup? You may also want to check your message handlers to make sure all the element IDs and message names match.

If you have some sample code that you can share, I'd be happy to take a further look.

3

Thanks @dcruvolo

Here is my ui.R file:

<!DOCTYPE html>
<html>

<head>
   {{ headContent() }}
   {{ bootstrapLib() }}
</head>

<body>
  
  
  <div class="container">


<div class="row">
        <div class="col-lg-12">
          <form id="contactForm" name="sentMessage" novalidate="novalidate" action="contact_me.php">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name.">
                  <p class="help-block text-danger"></p>
                </div>
                <div class="form-group">
                  <input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address.">
                  <p class="help-block text-danger"></p>
                </div>
                <div class="form-group">
                  <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="clearfix"></div>
              <div class="col-lg-12 text-center">
                <div id="success"></div>
                <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
              </div>
            </div>
          </form>
        </div>

       </div> <!-- /container -->

<script>
$("#contactForm").submit(function(){
  alert("Submitted");
});

</script>

</body>
</html>

At the moment I cannot get it to fire anything on submit (youll see Im trying to fire a js alert on submit). The first step is to get this working. Then I can try targeting my php file.

4

This is a bit odd. Everything looks right according to the docs and it should work. Although, I'm not sure how jQuery implements client-side validation. Are you tied to using ("#contactForm").submit(...). My only suggestion is to move the event from the form and attach it to the submit button.

$("#sendMessageButton").click(function(event){
    // do something here...
})

Maybe this is a weird artifact when using htmlTemplates? But who knows. Perhaps someone else may have a better idea.

5

OK great. Good idea! My js is now:

<script>
$("#sendMessageButton").click(function(){
  $("#contactForm").submit()
});
</script>

So that solves that issue. But now it tries to saves contact_me.php to disk. My contact_me.php file resides in the www directory (which I believe is the correct place for it). So how can I execute the php code?

6

Submit is an event listener. You will need to define a function that sends collects and sends the data to your php file. POST might be a good option. Something like this might help get you started.

$("#sendMessageButton").click(function(){
    var email = $("#email").val();
    $.post("contact_me.php", email, function(response) {
          console.log(response)
    })
    .fail(function(error){
         console.error("error:", error)
    });
});

Is there are specific reason for using php? If it is not a requirement for your project, shiny's built in validation (https://shiny.rstudio.com/articles/validation.html) might be a good alternative. If the form has sensitive information, it might be a better option to process the data within the shiny server.

Hope that helps!

7

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.