What to do with the data from my contact form

1

My portfolio has a contact form that gets name, email and message, but how do I get it to send that to me? https://codepen.io/cullian/pen/MmboOR?editors=0010

2

Hi,
Check this one : https://stackoverflow.com/questions/5773174/html-button-to-send-email

1 Like
3

I am already using mailto: for the email address link. Here is something more like what I want. Bootstrap 3 form. This one uses javascript to post the information from a form. How do I get it to send an email to me with that information. The post does not work on codepen and my real portfolio is on github.io which is a static page. I would like to use javascript to email me the information in the form.

4

What you want is on the backend side of development, but you can use somebody else’s backend, and this is so easy, I’m using it right now: https://formspree.io/. You’ll be up and running in five minutes.

1 Like
5

Formspree is the way to go if you have github pages, works really well.

In a form tag you need to specify an action attribute, ie form action=“yourScript.php”

When the form is submitted it needs to be handled by the server and a server side language. That’s where a php script works, it will run it’s script and do something with the data, which in most cases is send the data to your email.

I have a script I use on my own site if you want one, pm me I’ll send it to you, it’s easy to understand but in order to use it you’d need a website of your own along with an email account with your hosting provider.

1 Like
6

This seems to be what I want, but I am having trouble setting up the ajax. I tried pasting in the ajax snippet, but it does not work, I don’t know jquery very well yet. Here is a link form with ajax added to javascript

7

You should send your data as key - value pairs, for JSON to be recognized by formspree (at least I think so). So, define variables, such as
var name = $("input#name").val();,

and then use these variables:

`data: {
                name: name,
                phone: phone,
                email: email,
                message: message
},`

Also, you don’t need to specify form action and method in html - that should be done in .js file.

This is how I did it (only the relevant part of the code):

        var name = $("input#name").val();
        var email = $("input#email").val();
        var phone = $("input#phone").val();
        var message = $("textarea#message").val();
        
        $.ajax({
            url: "https://formspree.io/mymail@gmail.com",
            method: "POST",
            data: {
                name: name,
                phone: phone,
                email: email,
                message: message
            },
            dataType: "json"

Oh, and after console.log(result); you have "json" word/string, although you have already defined data type above: dataType: "json".

1 Like
8

Thanks for all the help, got it working! https://cullian.github.io/

1 Like