편집 기록

프로필 편집요청빌런님의 편집

날짜2018.10.23

html 상에서 js로 메일을 보내는데 문제가 발생합니다. 도움 부탁드립니다.

javascript

google

gs

webapp

안녕하세요!

우선, 어린양에게 관심을 갖고 이 글을 클릭해 주신 여러분들께 감사의 말씀 드립니다 ㅠㅠ

웹상에서 문의 메일을 발송할 수 있도록 홈페이지를 만들고 싶었습니다.

html과 css만 알고 자바스크립트는 까막눈인데(사실 이게 문제죠..),

구글 앱스를 통해서 정적 html 상에서 메일을 받는 기능을 구현 할 수 있다고 해서

무작정 열심히 따라해 보았습니다.

그런데, 다른 기능은 정상적으로 작동하는데(메일 발송, 메일로 받은 데이터를 구글 스프레드로 정렬),

문의 메일을 보낸 후, html에서 보이는 페이지에 스타일 적용이 도저히 되지 않습니다.

도움이 간절합니다 ㅠㅠ

아래에 스크립트를 더 첨부하겠지만, 제가 출력될 내용을 바꾸고 싶은 부분은

       return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))

여기인 것 같습니다.

현재 메일을 보낸 후의 결과창은 이렇습니다.

{"result":"success","data":"{\"number\":[\"010-0000-0000\"],\"name\":[\"123\"],\"email\":[\"@abc\"]}"}

number, name, email은 각기 label이고, 그 뒤에는 input에 입력한 내용이 출력됩니다.

저는 위와 같은 내용 대신에 스타일이 적용된 텍스트를 출력하고 싶습니다.

'문의가 접수되었습니다. 감사합니다. "돌아가기"' 등의 내용을 스타일을 적용해서요..

우선 아래는 제가 따라한 문서입니다.

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how

아래는 html 상에서 메일 발송을 위한 form에 action으로 지정된 문서(구글 앱스에서 지원하는 형식에 따른 것으로 보이는) 중 일부입니다.

function doPost(e) {

  try {
    Logger.log(e); 

    record_data(e);

    // shorter name for form data
    var mailData = e.parameters;

    // names and order of form elements (if set)
    var orderParameter = e.parameters.formDataNameOrder;
    var dataOrder;
    if (orderParameter) {
      dataOrder = JSON.parse(orderParameter);
    }

    // determine recepient of the email
    // if you have your email uncommented above, it uses that `TO_ADDRESS`
    // otherwise, it defaults to the email provided by the form's data attribute
    var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;

    // send email if to address is set
    if (sendEmailTo) {
      MailApp.sendEmail({
        to: String(sendEmailTo),
        subject: "Fitneeds program application",
        replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
        htmlBody: formatMailBody(mailData, dataOrder)
      });
    }
       return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))

    window.location.href = url;  }

    catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": error}))
          .setMimeType(ContentService.MimeType.JSON);   }}

결과창에서 원하는 내용을 표시할 수 있게 하려면 아래의 내용과 연결하도록 안내하고 있는데, 전혀 작동하지 않는 것처럼 보입니다. 어느 부분이 문제인지..

(현재 적용이 되어있는데도, 결과창은 앞에서 말씀드린 내용으로 표시됩니다.)

      function handleFormSubmit(event) {  // handles form submit without any jquery
    event.preventDefault();           // we are submitting via xhr below
    var form = event.target;
    var data = getFormData(form);         // get the values submitted in the formif( data.email && !validEmail(data.email) ) {       // if email is not valid show error
      var invalidEmail = form.querySelector(".email-invalid");
      if (invalidEmail) {
        invalidEmail.style.display = "block";
        return false;
      }
    } else {
      disableAllButtons(form);
      var url = form.action;
      var xhr = new XMLHttpRequest();
      xhr.open('POST', url);
      // xhr.withCredentials = true;
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.onreadystatechange = function() {
          console.log(xhr.status, xhr.statusText);
          console.log(xhr.responseText);
          var formElements = form.querySelector(".form-elements")
          if (formElements) {
            formElements.style.display = "none"; // hide form
          }
          var thankYouMessage = form.querySelector(".thankyou_message");
          if (thankYouMessage) {
            thankYouMessage.style.display = "block";
          }
          return;
      };
      // url encode form data for sending as post data
      var encoded = Object.keys(data).map(function(k) {
          return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
      }).join('&');
      xhr.send(encoded);
    }
  }

thankyou_message에 대해서는 html에 내용이 들어가 있지, 그 전의 문제인 것 같습니다.

워낙에 초보라서 질문글도 난잡한데, 읽어주신 분들께 다시 한 번 감사 말씀 드립니다.

작은 희망을 안고 글 남깁니다. 감사합니다 :)

프로필 알 수 없는 사용자님의 편집

날짜2018.09.19