I have been learning HTML, CSS and Javascript so far and have built an enquiries form on a website that I am building.
In order for my client to be able to easily gather the data that form users submit, I would like to get the form to send an email to her email address, with the information that the user has inputted, when they click the submit button.
I understand that I may need to use PHP to do this but I haven’t learnt any PHP yet, as I’ve not yet started back-end languages – I have been learning front-end so far.
I have included my HTML code below. I can provide the CSS code if needed. I would like some guidance as to: –
- Whether it’s worth trying to work out how to do this through PHP yet, or whether it’s worth shelving the form functionality until further down the line when I have started learning back-end languages.
- Whether there is an alternative simple way of enabling my client to gather the user data, bearing in mind that she does not have coding skills, that does not involve use of back-end languages (does not have to involve emailing her the form data, as long as it is simple for her to use).
- Some guidance on how I would go about sorting this through PHP. I have seen snippets of PHP code that are relevant to this issue, but I am struggling to understand them.
<form id="enquiriesForm" class="flex-item">
<label for="firstName" class="flex-item"><h5><b>First Name</b></h5></label>
<input type="text" id="firstName" name="firstName" class="flex-item" required>
<br />
<label for="secondName" class="flex-item"><h5><b>Second Name</b></h5></label>
<input type="text" id="secondName" name="secondName" class="flex-item" required>
<br />
<label for="emailAddress" class="flex-item"><h5><b>Email Address</b></h5></label>
<input type="email" id="emailAddress" name="emailAddress" class="flex-item" required>
<br />
<label for="phoneNumber" class="flex-item"><h5><b>Phone Number <h6><b>(optional field)</b></h6></b></h5></label>
<input type="number" id="phoneNumber" name="phoneNumber" class="flex-item">
<br />
<h5 class="flex-item"><b>Please choose the services that you are interested in</b></h5> <h6><b>(you can select more than one option)</b></h6>
<input type="checkbox" id="option1" name="option" value="blockOfFourClasses" class="flex-item">
<label for="option1" class="flex-item"><b>Block of Four Classes at Venue</b></label>
<input type="checkbox" id="option2" name="option" value="privateTuitionOwnHome" class="flex-item">
<label for="option2" class="flex-item"><b>Private Tuition in my Own Home</b></label>
<input type="checkbox" id="option3" name="option" value="privateTuitionStudio" class="flex-item">
<label for="option3" class="flex-item"><b>Private Tuition in Mirrored Studio</b></label>
<input type="checkbox" id="option4" name="option" value="antenatalConsultation" class="flex-item">
<label for="option4" class="flex-item"><b>Antenatal Consultation</b></label>
<br />
<h5 class="flex-item"><b>Do you want to be added to our mailing list?</b></h5>
<input type="radio" id="radio1" name="yesNo" value="yes" class="flex-item">
<label for="radio1" class="flex-item"><b>Yes</b></label>
<input type="radio" id="radio2" name="yesNo" value="no" class="flex-item">
<label for="radio2" class="flex-item"><b>No</b></label>
<br />
<label for="freeTextComments" class="flex-item"><h5><b>Please Type Your Enquiry Here</b></h5></label>
<textarea id="comment" name="comment" rows="4" cols="30" class="flex-item"></textarea>
<br />
<br />
<button type="button" id="submitButton" class="flex-item"><span><h4><strong>Submit</strong></h4></span></button>
</form>
I was ideally trying to avoid using a Javascript function to process the user input, unless I can get the Javascript function to email the users’ input to my client (which I understand that I can’t). This is because I presumed that a Javascript function would be too complicated for someone who does not how to code to access the user data.
If I am wrong on this and there is a relatively simple way of sorting this, and her accessing the user data, through Javascript, I would appreciate some guidance on this.