How to create a basic Contact form with SpiceForms?

Coding up a contact form can be a pain. You will need to figure out the HTML Markup, CSS Rules, Data Validations,  Data Storage and Email Notifications. While none of these things are technically difficult but they are definitely time consuming.

Even if you are comfortable with programming, building and publishing a working contact form can take up a couple of days. However if you decide to use a service like SpiceForms, you can have a working contact form in 10 minutes.

In this tutorial I will cover how you can build a working contact form using SpiceForms

1. Register with SpiceForms.

Registering is free and easy. You can register from here.

2. Create a New Form

Click on the Create Form Button, give the form a name. Refer to the screenshot

3. Build the form.

Simply drag the required fields from the left hand panel and click Save. Our contact form has 2 fields , One Email Field and One Text Area Field.  Dont forget to Save the form.  Refer to the attached screenshot.

Basic Contact Form

4. Setup Notifications

Go to Form Setting and setup the notification Email. You can receive the complete submission data directly in the email.  Simply use the code [form-content] in the email subject body. Refer to the screenshot.

Setup Email Notifications

5. Embed the Form

Simply copy the embed code and paste it on any web page. In case you are using wordpress you can also embed the form using the wordpress plugin.

Publish the Form

Thats it. You can now start receiving submissions in your Inbox.

Conclusion

So it took us 10 minutes to create a good looking and a working contact form.. that too without writing a single line of code. .. Yes its that easy 😉

 

About Ankit

Founder of Spice Forms.
Spice Form is a Drag n Drop tool to create powerful web forms in minutes.

Comments

  1. Hi, I use contact form template from your great site Spice Forms, but I have strange problem, the message field looks like email and title fields. I cant stretch it and its look bad: https://blog.waltharius.pl/contact-page/. Can you please tell me how to stretch this filed too look more like message filed and not like address or tittle field?

    Thanks

Trackbacks

  1. […] using SpiceForms and copy the form embed Code. In case you are new to SpiceForms then refer to this tutorial. Now insert the contact form embed code after the post content section. Refer to the following […]

Speak Your Mind

*