Portfolio Project Submitting Form data

1

Hello,

I am struggling finding a way to submit my form data because PHP is not supported by codepen. I looked up every way possible and came up with I am supposed to send it to formspree. My issue with form spree is that you have to pay to submit forms with AJAX.

I tried using formsprees functional HTML forms code and…
it sort of works. The problem is that it just keeps telling me I have to confirm. I confirm then it says I should receive forwarded emails whenever someone submits a form however it just wants me to confirm again. I researched this problem and it said something about multiple urls, I don’t understand what it means.

I only have one form and one email I’m needing to send it to.

Can someone please help?

Here’s my pen address:

That and if someone can tell me how to stack the form elements ontop of each other that would be great. I tried putting them in a column with bootstrap and it didn’t work.

2

#2…

 <input  type="text" Placeholder="Name"><br>
    <input  type="text" Placeholder="Email"><br>
    <input  type="text" Placeholder="Phone"><br>
    <input  type="text" Placeholder="Message"><br>
3

I’ve used a google form, and linked it to a google spreadsheet…
works good … and its free … hope that helps

4

Hi, thanks for your response. I got the part about linking a form to a google spreadsheet. Now, the issue I’m having is linking my codepen to the spreadsheet so that the data populates on the spreadsheet. How did you do that part? Did you have to use ajax or something?

I ended up embedding the ugly google form in my portfolio but it can only be filled out once -__-. Still struggling, thanks for your help in advance.

5

You may have to tweak this, it’s untested, but shows how to send it.
The … "&entry.457815027= " … parts are gotten by right clicking the google form, and choosing
"view page source: . You need the entry ID stuff for each field in the google form you are filling.
your html form on your page could do an …onclick= ‘loadDoc()’ … mebbe?

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
   // this part is for debugging?
    }
  };
  
  // these would be gotten from your html form mebbe?
  var name = "Jasmine";
  var email = "jaz@yahoo.com";
  
  var sendit = "https://docs.google.com/forms/d/e/1FAIpQLSfmFFNdHlOpvkXBU_AyPKj4ATjTJdS8iA2N3K2ervPNxNwE_A/formResponse?entry.1012667783=" 
         + name + "&entry.457815027=" + email + "&submit=Submit"; 
         
  xhttp.open("POST", sendit, true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send();   
}
6

I wasn’t skilled enough with Javascript to figure out that method :confused: thanks though. I watched this youtube video https://www.youtube.com/watch?v=2Vx00MAmhbs and the guy uses google apps script to get it to send to email. I got it to work sort of. Everything turned out right except mine just loads forever and never submits. Might anyone be able to look at this and figure out why it’s not submitting? I asked the youtuber for help as well… here is the link to my project again https://codepen.io/jZ-91/pen/yvrGNL