How to add an AJAX contact form to your website

 

The contact form is a common feature on many websites.  The Gutensite standard contact form will work just fine, but you can make them nicer by using AJAX to submit the form data in the background.

 

AJAX stands for Asynchronous JavaScript + XML is a set of web development techniques using client-side technologies.  This means AJAX provides a method of exchanging data with a server, and updating parts of a web page, without having to reload the entire page.  

 

The following instructions will walk you through the creation of a basic website contact form.

 

From the Gutensite Control Panel, select ContentPromo ModulesAdd New.  For the Module Type, select AJAX Form, then click on the Create button.  

 

 

General Tab

If you want the form to be added to a specific page, then change the Location to PagesModule Space is used to indicate where on the page you'd like the form to appear, such as above or below the other content on the page. 

When Pages option is selected, the Limit Pages option will appear.  The upper section lists all available pages from your entire site.  The lower section is all of the pages where the form will appear.  To move a page from the upper to the lower section, first select the one you want, then click on the + button in between.

 

 

 

 

 

When filling out the rest of the options, be sure the Form Title is something that you can recognize if seen from other areas within the Control Panel.  And, if you want the results of the form emailed to more than one address, use a comma as a separator between addresses.

 

Advanced Tab

Unfortunately, the Advanced Tab for this module doesn't have a fancy click and drag interface.  The form fields will have to be coded in JSON.  There are samples of different types of fields listed on the page, but if you just want a simple form, you can use the code on the left so the form looks like something on the right:

[  

  {

    "type":"text",

    "name":"name",

    "settings":{  

    "prompt_input":"Name",

    "required":true,

    "required_message":"Please provide your first and last name."

    }

  },

  {

    "type":"text",

    "name":"email",

    "settings":{  

    "prompt_input":"Email",

    "required":true,

    "required_message":"Please provide your email address."

    }

  },

  {

    "type":"text",

    "name":"phone",

    "settings":{  

    "prompt_input":"Phone",

    "required":"phone",

    "required_message":"Please provide your phone number."

    }

  }

]

 

If you're not familiar with JSON, there are some third-party tools available online that are easy to use.  One we recommend is Wufoo

 

Create

Don't forget to click on the Create button for the changes to be saved.  Once done, the form will be available on the selected pages.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.