Contact Form Problem and solution

[drubio1989]

I saw that there were a lot of comments on the contact.php form and not being able to submit. I also had this problem and after a handful of hours trying to find a solution, I went ahead and just went with formspree.io instead of the contact.php.

For future developers using this theme who encounter this problem. Just comment out the existing form and then add this. Once you've taken the 5 minutes to verify with formspree, this should work.

      <form action="https://formspree.io/YOUR_EMAIL" method="POST" />
        <div class="control-group">
          <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Name</label>
            <input class="form-control" id="name" type="text" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Email Address</label>
            <input class="form-control" id="email" type="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Message</label>
            <textarea class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <br>
        <div id="success"></div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Send</button>
        </div>
      </form>

[lcwyo]

formspree needs to have the name element in each input to be included in the message that is forwarded.

so for example

<textarea class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>

needs to be

<textarea name="message" class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message." ></textarea>

after that thought it works great, thanks for the tip.

[davidtmiller]

Keeping this open since it's an important way around using the PHP mailer that is included with this theme.

If you're trying to use the PHP mailer and it's not working after you upload it to your web server, it could be a problem that is outlined here on this post on StackOverflow https://stackoverflow.com/questions/24644436/php-mail-function-doesnt-complete-sending-of-e-mail

If your server doesn't support sending mail, for example, if you're hosting your site on GitHub Pages, then Formspree is an excellent solution.

[mcanelson]

Hello! I came up with this issue today and fixed it by changing the code on line #23 of contact_me.js from:url: “contact_me.php”, to: url: "././assets/mail/contact_me.php”,

And now the form works in my server.

[digitalspan]

Hello! I came up with this issue today and fixed it by changing the code on line #23 of contact_me.js from:url: “contact_me.php”, to: url: "././assets/mail/contact_me.php”,

And now the form works in my server.

It indeed works. I tested it too. Thanks a lot. So many people missed this simple error.

[dostrelith678]

formspree needs to have the name element in each input to be included in the message that is forwarded.

so for example

<textarea class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>

needs to be

<textarea name="message" class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message." ></textarea>

after that thought it works great, thanks for the tip.

Would be useful to change the code in the original issue, are these editable?

[davidtmiller]

At this point in time, the free tier for Formspree is a lot more limited than it once was. There are a lot of ways to add forms to static sites at this point in time, and I am considering dropping the 'working form functionality' from the theme all together in the upcoming Bootstrap 5 compatible version.

The PHP scripts with jQuery validation is becoming more and more antiquated, and it's a difficult thing to provide troubleshooting and support for. Instead we may set up an article or guide on the various techniques one could use to add functionality to a form.

[jovialcore]

At this point in time, the free tier for Formspree is a lot more limited than it once was. There are a lot of ways to add forms to static sites at this point in time, and I am considering dropping the 'working form functionality' from the theme all together in the upcoming Bootstrap 5 compatible version.

The PHP scripts with jQuery validation is becoming more and more antiquated, and it's a difficult thing to provide troubleshooting and support for. Instead we may set up an article or guide on the various techniques one could use to add functionality to a form.

Have you thought of mailChimp ?

[tschwerman]

I was having a lot of issues getting the formspree form to work. I needed to make a formspree account (free). Then cope the end point HTML code and implant in the action section however, I was only updating the index file. There were about 3 separate files including some or all portions of the contact form that needed to be updated and committed with intended code for it work. Hopefully this helps some other novice that is banging their head against a wall currently.

[awongCM]

I was having a lot of issues getting the formspree form to work. I needed to make a formspree account (free). Then cope the end point HTML code and implant in the action section however, I was only updating the index file. There were about 3 separate files including some or all portions of the contact form that needed to be updated and committed with intended code for it work. Hopefully this helps some other novice that is banging their head against a wall currently.

Either using formspree. Or you can create your own smtp service powered by Nodemailer/NodeJS or similar in the backend to run on a free cloud hosting server like Heroku/Render to proxy off your nominated free SMTP server of your choice ie Hotmail, Gmail, Yahoo etc. And all you can do with your contact form is to point the form submit endpoint to your NodeJS smtp service to run it. You're good to go.

You'll learn more to setup this way.

That's how I accomplish mine after migrating from legacy freelancer page to the new one recently.