How to add a contact form
This recipe shows you how to add a contact form to your Harp application.
There are a lot of services online that provide form solutions, but we’ve found that Wufoo is the easiest to integrate and it’s free as long as you have less than 100 entries per month.
Go to Wufoo’s website and signup for a free account. You can keep it free until you reach more than 100 entries per month.
Once your account is setup, let’s create a new form and get the embed code to paste in our Harp project!
To do that, go to your Wufoo’s dashboard and click on the “New Form!” button.
Add any fields that you want yor visitors to fill out, and then hit the “Save Form” button:
The “Contact Form” is now ready to be embedded. Go back to the “Form Manager” page, find your form and click on the ”Code” option, which will take you to the page with options to embed your form.
For this recipe, we’re going to have 2 files, one with the embed code from Wufoo and another one where we’re going to import the contact form. That way we keep our project client and it allow us to re-use the form anywhere we want in the project.
/_contact.html /index.jade // or index.ejs
_contact.html file and paste the embed code provided by Wufoo (see previous step). All the embed codes are different, make sure you use your own and not the one shown here:
Now create your index file (
index.ejs), lets add a title and use
_contact.html as a partial:
h1 Contact Us != partial("_contact.html")
<h1>Contact Us</h1> <%= partial("_contact.html") %>
And you’re done. When you go to the index page you should see the “Contact Us” title and your form embedded from Wufoo.
You don’t need to worry about spam, security, validation code or sending emails, that can all be configured from your Wufoo dashboard.
How does it work?
There’s not much that Harp is doing for you here, it’s all powered by Wufoo.
The code provided by Wufoo, generates an
iframe hosted on their site, which contains all the code necessary to get the form working, but to your visitors this seems like it’s on your site.
We encourage you to explore the other options for embedding your form, as they might work better for you. We chose the iframe option because it’s the easiest to implement.