image16.gif

 


 

 

Contact Us Form

This plug-in is used to render a Contact Us form for user input. These instructions are specific to a Contact Us form but can be adapted for a more generic functionality, allowing you to create/update a user account with specific attributes and send emails to the customer and/or retailer.

 

 

Email Template Creation

 In the back office's Email & Document Templates section, either create or verify that a template exists that can be sent to the company when a form is submitted:

  1.  In this example: template is Contact Us.

  2.  View the template by clicking on it and make sure all fields are correct:

  1. Click Update to save the template.

 

 

Website Template Manager

 In the back office's website template editor Templates tab, click New in the General Content section.

  1. Create a template with a unique name. In this example: contact_us_form

  2. In the text area, copy the following HTML and then click Save:

 

CODE:

<table>

     <tr>

         <td class="form_label" valign="top" align="right">First Name:</td>

          <td class="form_input">{$first_name}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">Last Name:</td>

          <td class="form_input">{$last_name}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">Address Line 1:</td>

          <td class="form_input">{$address_line_1}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">Address Line 2:</td>

          <td class="form_input">{$address_line_2}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">City:</td>

          <td class="form_input">{$city}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">State:</td>

          <td class="form_input">{$state_id}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">Zip:</td>

          <td class="form_input">{$postal_code}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">Phone:</td>

          <td class="form_input">{$phone}</td>

     </tr>

     <tr>

          <td class="form_label" valign="top" align="right">Email Address:</td>

          <td class="form_input">{$email}</td>

     </tr>

     <tr>

          <td colspan="2" align="right"><input type="Submit" value="Submit"/>

     </tr>

</table>

 

General Content Section

 

  1. Create a template with a unique name. In this example: contact_us_redirect. This will be a static page that the form redirects to after the form submits.

  2. In the textarea copy the following HTML and click Save.

 

CODE:

{page-header}

          <div id="siteContent">

              <div id="fullWidthContent">

                   <h1 class="pageTitle">Contact Us</h1>

                   <div class="contact_us">

                        Thank you for your submission!

                   </div>

              </div><!--end fullWidthContent-->

          </div><!--end siteContent-->

{page-footer}

 

 

  1. If you do not have a page where the contact form will be placed, create another template by clicking New in the General Content section.
  2. Create a template with a unique name. In this example: contact_us
  3. In the textarea copy the following HTML and click Save.

 

CODE:

{page-header}

          <div id="siteContent">

              <div id="fullWidthContent">

                   <h1 class="pageTitle">Contact Us</h1>

                   <div class="contact_us">

                       

                   </div>

              </div><!--end fullWidthContent-->

          </div><!--end siteContent-->

{page-footer}

 

Plug-in Tab

1. In the back office's template editor Plug-ins tab, click 'New' in the General Content section and then 'Form Plugin' in the resulting pop up

    window.  Fill out the plug-in's fields.

 

 2. Click Save and fill out the fields for each input field. Each field from the Form Input Selection will include 4 fields.

 

3. After clicking Save, add the new plug-in tag to the template that the form should be rendered. In this example: The plug-in tag is {contact_us_plugin} and you must add it to the static page  {contact_us} inside the <div class=”contact_us”> element.

 

4. Save the template and preview your website and test out the form. In this example: Since we created a static page with the contact form, the direct url to the form is: /index/page/static/subpage/contact_us/

 

Additional Information

If the contact form needs any custom inputs use the following steps.

  1.  In the plugin editor update the number of custom form inputs to the number of custom inputs you would like to add and click save.

  2.  On the next screen, update the values for each Custom Form Input #.

  1.  Click save after all custom form inputs have been updated.

  2. In the template used as the holding template, add the new custom fields.

  1.  After adding all of the custom inputs, add them to the email template.

  1. Preview the site and test the new custom input fields and verify they are getting shown in the email.

 

 

 

 

 

 

 

© 2015 CORESense · 1-866-229-2804 · info@coresense.com · 125 High Rock Avenue, Saratoga Springs, NY 12866