Hello!
First of all, I would like to thank all of you for your interest in the Lamb and for clicking on this article ㅠ<
.
I wanted to make a homepage so that I can send inquiry mail on the web.
I only know html and css, but JavaScript is black-eyed (actually this is the problem...),
It is said that the function of receiving mail on static HTML can be implemented through Google Apps.
I just did my best.
By the way, other functions work normally (mailing, sorting the data received by mail into Google Spread),
After sending the inquiry email, I can't apply the style to the page shown in html.
I'm desperate for help ㅠ<
.
.
I will attach more scripts below, but the part that I want to change the contents to be printed is
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(e.parameters) }))
I think it's here.
This is the result window after sending the current mail.
{"result":"success","data":"{\"number\":[\"010-0000-0000\"],\"name\":[\"123\"],\"email\":[\"@abc\"]}"}
The number, name, and email are labels, followed by input.
I would like to print out the text with the style applied instead of the above.
'A call has been received. Thank you. I've applied the style of "Go Back" and so on.
.
First of all, below is the document that I copied.
https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how
.
.
the document some of the (that seems to have to one of the types supported by the Google Apps) that are designated as the action a document for the mail on html.
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); }}
If you want the results window to show you what you want, I'm guiding you to link it to the content below, but it doesn't seem to work at all. Which part is the problem?
(Even though it is currently applied, the result window is displayed as mentioned above.)
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);
}
}
Regarding the thank you_message, the HTML contains the contents, but I think it's a problem before that.
I'm a beginner, so the questions are messy, so I'd like to thank you again for reading them.
I leave a message with a little hope. Thank you :)
javascript google gs webapp
You need to see the HTML file that contains this form.
Overall, I'm guessing that the onSubmit event in the form is not being handled with handleFormSubmit(), so we'll have to see what the actual form looks like and when to load the script. If you upload the HTML source in the form, I will watch it again.
You are now relying on external script for events when the form is submited, and looking at the HTML form markup, it seems that you are not following the rules defined by this script's method.
For example, the script assumes that there will be a form block with a .form-elements class and a complete message block with a .thankyou-message class in the form that you call.
The problem is that external handler script since you said the email itself will be sent. I strongly recommend that you download it, modify it as you want, and use it. And try debugging by typing console.log(variable) in the middle of the script.
If you really abbreviate the features you want and implement them to a minimum, this is what happens. Would that be helpful?
<script>
// the event catching them. # Posture is assuming that the form of seobeumit gform
document.getElementById('gform').addEventListener('submit', function (e) {
// Once the basic act and stop.
e.preventDefault();
// and take the form.
var form = e.target;
// and inputs.
var name = form.getElementById('name').value;
To // post url to post the parameters to keep the encoding.
var params = encodeURIComponent('name=' + name);
// ... communications from here on a typical xhr
var url = form.action;
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
// Declares to pass variables in URL encoding format
xhr.setRequestHeader("Content-type", "application/x-form-urlencoded");
// Defines the callback to run when it is sent.
xhr.onreadystatechange = function() {
// Just show the #thankyou_message element somewhere in the document
document.getElementById('thankyou_message').style.display = "block";
};
// I'm sending it.
xhr.send(params);
}, }, false);
</script>
Thank you for your kind reply Mr. Yeopto! (__) Bow...
First of all, I will tell you my situation in the order you told me.
Below is the display of the elements window at that time.
.
.
.
<form action="*****" method="POST" id="gform">
<div class="row form-group">
<div class="col-md-12">
<div class="form-label col-xs-12 col-sm-3">
<label for="name">Name</label>
</div>
<div class="col-xs-12 col-sm-9" style="padding: 0;">
<input type="text" name="name" id="name" class="form-control" placeholder="Hong Gil-dong">
</div>
</div>
</div>
<div class="form-group text-center" style="margin-top: 20px; margin-bottom: 40px;">
<input type="submit" value="apply" class="btn btn-lg btn-primary">
<div class="submitting"></div>
</div>
<div style="display: none;" id="thankyou_message">
<h2> Inquiries have been received.</h2>
<a href="imdex.html">
<h4>Return</h4>
</a>
</div>
Name Your inquiry has been received. Go back
There are a few more form-groups, but they have only left their names for readability. Action in form is
Remove only // from line 8 in this document
The document you changed to varTO_ADDRESS = "My Mail Address"; is linked.
You tell me'3.' of the doubt that there is any point, but I don't know how to fix it.
Thank you again for your answer!
I am attaching the part about the gform class in question as an answer!
The html below is the content of the form.
.
.
<form action="*****" method="POST" class="gform">
<div class="row form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Hong Gil-dong">
</div>
<Input type="submit" value="Contact Us">
<div class="submitting"></div>
<div style="display: none;" id="thankyou_message">
<h2> Inquiries have been received.</h2>
<a href="imdex.html">
<h4>Return</h4>
</a>
</div>
</form>
.
Below is the corresponding part of the submission-handler.js that you've already seen.
These are the only HTML content and js content that gform appears in the entire code.
However, if the form in html and querySelectorAll() in js match, the submission displayed as 'Ask' does not proceed. The console also does not show that the form has been loaded successfully.
.
function loaded() {
console.log("Contact form submission handler loaded successfully.");
var forms = document.querySelectorAll("form.gform");
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener("submit", handleFormSubmit, false);
}
};
document.addEventListener("DOMContentLoaded", loaded, false);
function disableAllButtons(form) {
var buttons = form.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
.
.
.
The action of the form in which the asterisk is processed in html is: https://script.google.com/macros/d/MbwC9LmryKOcBxji4nJETO0ccOHUOpGC4/edit?uiv=2&mid=ACjPJvHBU3jaCFergJNlz98jEMi_6E9rmTA4iB31vZ9bgMFnkyM9KAh8cyUhA1YvrDnTn4fT3lRVYpA4aiZxAG2PbtNgJR4WH8OUVbwyCEq3gNPTdI2mVpmliPXRcwXOjLGftgdIUaMtQA Only the addresses that receive 8 lines of mail from the link have been modified.
Once again, thank you so much!
© 2024 OneMinuteCode. All rights reserved.