Basic Documentation
- Introduction
- Setup
- Example
- Troubleshooting
Introduction
Welcome to the basic setup. Firstly, all this text may look a bit much, but its really important that you read through this to understand how Form Sender workds. This guide is a tutorial that runs through the basics of how to setup a HTML form and include all the required attributes. If you are looking for a quick reference to all of the special name atributes which alter functionality have a look at the advanced documentation. There is also a troubleshooting guide at the bottom of this page, check it out if you are having any issues.
Setup
Follow this tutorial below to setup your form. If you are struggling try copy and pasting the code and then editing it from there. If you are still stuggling check out the troubleshooting.
1. Set up the HTML form
Let's start by making our opening form
tag. The form tag lets our page know that we have a form on the page. The form tag has a few attributes, the action
and method
parts are required to get it to work. We have to set the action to be equal to the server.php file which makes the contact form work and we also should set the method to be POST as it is more secure than GET.
<form action="https://formsender.000webhostapp.com/server.php" method="POST">
Now that we have our opening form tag we need to setup the two hidden inputs. These hidden inputs tell the server.php file information regarding who to send the email to and other important information. We should replace the [yourEmail] in the EMAILTO input with your email e.g example@gmail.com . You should not include the []. We also have to replace the [WhereyouwantyourpagetoGo] with a URL to the page you want to go. Both the EMAILTO
input and the GOTO
are required. You might want to set the GOTO URL to be a URL that says "Thanks for submitting the form" or something.
* Note, you must hide these inputs yourself, try adding a class like "hidden"
and then having in your css:
.hidden{
display: none
}
<form action="https://formsender.000webhostapp.com/server.php" method="POST" id="form">
<input class="hidden" type="text" name="EMAILTO" value="[yourEmail]">
<input class="hidden" type="text" name="GOTO" value="[WhereyouwantyourpagetoGo]">
</form>
Now we have successfully set up the most basic version of the form. You can now start adding inputs. Please ensure that you include the name
attribute otherwise it will not send that input. You can include Selects, Radio, Inputs, Textareas and any other form tag.
<form action="https://formsender.000webhostapp.com/server.php" method="POST" id="form">
<input class="hidden" type="text" name="EMAILTO" value="[yourEmail]">
<input class="hidden" type="text" name="GOTO" value="[WhereyouwantyourpagetoGo]">
<input type="text" name="name" required>
<input type="text" name="email" required>
<textarea name="comments" rows="5" cols="50"></textarea>
</form>
Now that we have got all the inputs the last thing to do is add a submit button.
<form action="https://formsender.000webhostapp.com/server.php" method="POST" id="form">
<input class="hidden" type="text" name="EMAILTO" value="[YourName@gmail.com]">
<input class="hidden" type="text" name="GOTO" value="[WhereyouwantyourpagetoGo]">
<input type="text" name="name" required>
<input type="text" name="email" required>
<textarea name="comments" rows="5" cols="50"></textarea>
<input type="submit" value="Submit" id="submitButton">
</form>
Congrats! We have set up our first contact form! Below is a working example of the contact form using the same code as above. Notice that the two hidden inputs are not hidden. This is so that you can play around with it and send the email to your own email. Just change the two inputs called EMAILTO and GOTO. If you are looking for more advanced documentation, for example how to CC, BBC, set a reply email and more check out the advanced documentation. The advanced documentation contains all of the modifications you can add to your email such as how to CC and BCC, set a From and Subject of the message and more.
Example
Below is a working example using the above code.
Troubleshooting
If you are having trouble setting this up, try some of the common issues listed below. If you have tried these and still have issues please contact me
The email wont send
If the page re-directs successfully to the GOTO link:
Please contact me.
The page is stuck on the server.php
This means that there is an issue with your form that is breaking the form sending. If there are errors, try to work out what they are. Some common issues are:
- You haven't signed up or you have miss-typed your email
- You have forgotten to put a
name
attribute on each of your inputs
- You haven't included the GOTO input tag.
- You are on the Do Not Send list.
Error: there is no body content
This means that you haven't added the name
attribute on each of your inputs and therefore no input is being sent
I'm not recieving a certain input?
This means that you havent added the name
attribute on the specific input and therefore the input isn't being sent.
Other
If you are experiencing any other error please contact me. I will update this with more troubleshooting fixes as more people contact me to let me know what issues they are having.