How to create a Custom Contact Form in Magento

In this tutorial, I’ll show you how to easily create a Custom Contact form in Magento.

As you know, Magento has a Default Contact form, that we can call out like so in our static pages:

However, this contact form is pretty limited (Name, Mail, Comment…). What if you need more fields?

Let’s see how we can get as many fields as we want.

1) Create a copy of the default form

First we go here (by FTP): /app/design/frontend/base/default/template/contacts/

Then we download the original default Magento form.phtml to our desktop, and rename it to custom_form.phtml. We are ready to edit it.

We add the fields we need.
In this example I’m adding the following fields:

– Lastname (Apellido in my example, because this project in particular was in spanish)
– Address (Dirección)
– Postal code (Código Postal)
– etc, etc

…we can add as many as we want, always making sure they have a particular name="" we can identify them with.

Very importantly, we’ll add a hidden field before the end of the form, to check (later on), this is the form the message comes from (so Magento knows it and don’t confuse it with the default form). It’s commented on the code (line 108 – 110).

Here’s my full custom_form.phtml file

Once edited, we go here /app/design/frontend/YOURTHEME/default/template/contacts/, and upload it.

2) Add the custom form to a static page

Now it’s time to create a new static page in CMS > Pages, and add a block call to retrieve this custom form we just created, like so:

{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/custom_form.phtml"}}

3) We create a new Transactional Mail template

The page will now show our custom form, but this is not enough. By default, Magento will send out a mail involving only some fields, the ones that the default mail is supposed to send out.

To correctly retrieve the new inputs, we will create a new Transactional Mail template.

We go to System > Transactional Mails, we add a new template, we load the default Contact Form in it (very important step), and we will then add some conditionals, so Magento knows what to do depending on which form is being used from the frontend (the default one, that we probably still want to use somewhere, and the new one).

There we go (adapt to your custom inputs):

See how we use the hidden field we specially added to our custom form as a way to tell which form is the sender using, with {{if data.custom}}

We save and close.

4- Switching Magento’s default email template to the new one

Time now to go to System > Configuration > Contacts and select this new template as the one mainly used.

When people use the custom form, the custom form template will be filled and served, and when people use the default, traditional form, the traditional template will be filled and used insetad.

Hope it helps!

11 people super-liked this.

10 thoughts on “How to create a Custom Contact Form in Magento

  1. I’d love to get this to work. I followed all directions and get the message :

    Unable to submit your request. Please, try again later

    I’m using magento 1.6.2

    Is it really working for you? What could be my problem?

  2. Hi Hendy, did the default Contact Form work for you before the changes?
    If so, try to check the differences between both, and look for some error in the new one to debug it.

    Also, I’d recommend to enable the logging system (System > Configuration > Developer > Log Settings), and try to send out the email again.
    You should find the error in /var/log/exception.log or /var/log/system.log. With the error log you should be able to better find the culprit.

    Here’s a cool StackOverflow thread that could throw some light on the issue.

    Finally, here’s a widely used extension to have an improved way of sending mails from Magento (better than the built-in system). It just requires some of your host’s email account details, or even your Gmail account.

    More info about that extension can be found here and here.

  3. Thanks for your feedback. To be clear, my regular contact form works without any problems, and still does. It’s only the custom one that doesn’t, and it will redirect to the regular form where it shows the error

    My log file shows the following errors:
    ERR (3): Notice: Undefined index: url  in /app/code/core/Mage/Core/Model/Email/Template/Filter.php on line 269
    ERR (3): Notice: Undefined index: comment  in /app/code/core/Mage/Contacts/controllers/IndexController.php on line 79

    I’ve copied the contact form exactly and just added some text fields. Could those be problematic?

  4. Hi Hendy, it seems like there are two variables, url and comment, that doesn’t get parsed properly.

    Is there some odd character on your Email Template before some {{url}} or {{comment}} variable?
    Something like %20 -indicating an HTML blank space-? For example something like {{skin%20url=''}}.
    If you find it, try to remove it, and use a keyboard blank space instead (normal blank space), then save.

    In your Magento version, what’s on Filter.php (line 269) and IndexController.php (line 79)?

    You can check this thread on SO as well, where they found the culprit on a CMS Block (CMS > Pages), where the format needed a small correction.

    I used this method to create forms on two different websites and it worked fine for them so far, we used the latest version of Magento, but I still may be missing something.

    Let me know if this helps,

  5. Hi Giuseppe, I think there’s no simple way to get it done, on StackOverflow they suggest several things here and here. Then there’s an old hack that may work with older versions, but I’m not sure if it works with the newer ones. Let me know if this helps! Cheers,

  6. its working fine. but i want to redirect the form after submission to a thank you page that i have created seperately. I have tried all possible ways but couldn’t get a solution for it. Can you help me out?

Leave a Reply

Your email address will not be published. Required fields are marked *