Creating a custom contact form in KickPages is super easy with our new custom form functions.

You can use our built in tools to simply save the form submissions in your project, use an autoresponder integration or get a little more advanced and set something up with zapier....but for this tutorial, we are aiming it towards developers and those who want to code something a little more custom for their own needs.

Let's start!

Firstly, you can either use your own imagination and the Form Input element to build your own form with your own layout, or use the available design blocks from the "Forms" section. The available design blocks are easy to edit and customize to, just click on any element to edit it's properties.

In this tutorial we will be using a ready made Design Block to create a simple contact form which will send the details of the submitted form to a defined email address.

Please note that for this you will need a SendGrid.com account which has a free plan, which is perfect for this project. Also, you will need to have your own web server where you can host a small PHP file, which receives the data submitted by the form, and passes it to SendGrid, which will send out the final email to the predefined email address.

To get started, make sure you have an active and verified SendGrid account, if not then you can sign up at https://sendgrid.com for free. (You can also use a paid account, but it is not required)

Step 1.

Download the code from THIS file to your computer and save it as a .php file. Open it with your favorite code editor, or the default text editor application. You will need to edit the first 4 lines of the file with your own details:

The first line is your SendGrid API Key, you u can get one easily following these simple steps:

- sign in into your SendGrid account and visit the "Settings" page then click on "API Keys"

- click on "Create API key" in the top right corner

- Enter a name for your APi Key

- select "Full Access" and click on "Create & View"

- Copy the appearing API Key and note it down since you will not be able to view it after

Add the copied API Key to the first line of the code you have downloaded

The next line is for the email address from which the email will be sent, and follows the one where the email will be delivered. The last line is the subject of the email that will be sent.

Upload the edited file to your own server. This can be on any random web host as long as it has CURL enabled, you can also use any domain since the URL will be used only internally and never displayed to the visitors of your website.Take note of the URL where the file can be found since you will use this later as the Target URL of your form

Step 2.

Please create or edit the existing .htaccess file where you have uploaded the file above with the following content:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "POST"

Step 3.

To get started add the design block below to your page (or any other design block, we just use this one in this demo, alternatively you can design your own form) which can be found in the "Forms" section.

For this demo, we will get rid of the "Choose Your Table" and "Choose Your Time" fields, because we don't need them, you can leave them in the form if they are required in your use case. You can do this easily by hovering the fields, then clicking on the small appearing recycle bin icon:

For the remaining fields, you will need to set the name attribute, which will be displayed later in the email to differentiate the different input values. Click on the fields one by one and set the "Name of input" values for each of them:

Please note, that these must be unique for each input per page. Use something descriptive so you can easily see which field had what value later on in the delivered email. In this demo, i have set the same input names as the placeholder texts of each field:

Now click the button of your form and set it as the "Form submit button" (1)

Set the "Method" to "POST" (2)

Enter the URL of the file you have uploaded to your web server (3)

Click the "Form Fields" field and select all the name tags you have set in the previous step (4)

If you would like you can set up the "Form Success Settings" to which can display a custom success message after sending the email.

You can test your form at this stage after publishing your page. If you did everything correctly, you should receive an email with the submitted data that looks as follows:

Before sending the form:

As it looks in the received email:

Please note, that sometimes the email can land in the spam/junk folder of your email client. You can whitelist the sender email address in your account, so you always receive the emails in your inbox.

Attention!

If the tutorial above is way to techy for you, you can use integromat.com with a free account to trigger an email send through SendGrid, Integromat also offers a lot more integrations so feel free to set up a trigger based on your needs. You will need to set up a WebHook first and set the receiver unique URL as your form target URL in the KickPages editor, then you can add a trigger easily:


If you need any help, get in touch at support@kickpages.com and we will be happy to assist.