Basic Documentation

Find out how to use Form Sender!


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 actionand 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.



This isn't actually required, you can leave this blank.


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.


Last Updated: 5/5/2018, Created 5/5/2018

Version 0.0.1