Question

Is it possible to use pages in Magento to have a customizable contact form?

If it’s possible:

1. What action should I call to support this?
2. Is it possible to use my customize form elements or do i need to use Magento Standards?

Form I’m using to my Page:

<form action="" method="post">
  <input type="hidden" name="formID" value="20642064378453">
  <div class="form-all">
    <ul class="form-section">
      <li class="form-line" id="id_8">
        <label class="form-label-left" id="label_8" for="input_8"> Full Name </label>
        <div id="cid_8" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="text" size="10" name="q8_fullName8[first]" id="first_8">
            <label class="form-sub-label" for="first_8" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="15" name="q8_fullName8[last]" id="last_8">
            <label class="form-sub-label" for="last_8" id="sublabel_last"> Last Name </label></span>
        </div>
      </li>
      <li class="form-line" id="id_1">
        <label class="form-label-left" id="label_1" for="input_1">
          Name<span class="form-required">*</span>
        </label>
        <div id="cid_1" class="form-input">
          <input type="text" class="form-textbox validate[required]" id="input_1" name="q1_name" size="20">
        </div>
      </li>
      <li class="form-line" id="id_3">
        <label class="form-label-left" id="label_3" for="input_3">
          Email<span class="form-required">*</span>
        </label>
        <div id="cid_3" class="form-input">
          <input type="text" class="form-textbox validate[required]" id="input_3" name="q3_email" size="20">
        </div>
      </li>
      <li class="form-line" id="id_4">
        <label class="form-label-left" id="label_4" for="input_4"> Topics </label>
        <div id="cid_4" class="form-input">
          <select class="form-dropdown" style="width:150px" id="input_4" name="q4_topics">
            <option>  </option>
            <option value="Option 1"> Option 1 </option>
            <option value="Option 2"> Option 2 </option>
            <option value="Option 3"> Option 3 </option>
          </select>
        </div>
      </li>
      <li class="form-line" id="id_5">
        <label class="form-label-left" id="label_5" for="input_5"> Other Options </label>
        <div id="cid_5" class="form-input">
          <div class="form-single-column"><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio" id="input_5_0" name="q5_otherOptions" value="Option 1">
              <label for="input_5_0"> Option 1 </label></span><span class="clearfix"></span><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio" id="input_5_1" name="q5_otherOptions" value="Option 2">
              <label for="input_5_1"> Option 2 </label></span><span class="clearfix"></span><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio" id="input_5_2" name="q5_otherOptions" value="Option 3">
              <label for="input_5_2"> Option 3 </label></span><span class="clearfix"></span>
          </div>
        </div>
      </li>
      <li class="form-line" id="id_7">
        <label class="form-label-left" id="label_7" for="input_7"> Message </label>
        <div id="cid_7" class="form-input">
          <textarea id="input_7" class="form-textarea" name="q7_message" cols="40" rows="6"></textarea>
        </div>
      </li>
      <li class="form-line" id="id_2">
        <div id="cid_2" class="form-input-wide">
          <div style="margin-left:156px" class="form-buttons-wrapper">
            <button id="input_2" type="submit" class="form-submit-button">
              Submit Form
            </button>
          </div>
        </div>
      </li>
      <li style="display:none">
        Should be Empty:
        <input type="text" name="website" value="">
      </li>
    </ul>
  </div>
  <input type="hidden" id="simple_spc" name="simple_spc" value="20642064378453-20642064378453">
  <script type="text/javascript">
  document.getElementById("si" + "mple" + "_spc").value = "20642064378453-20642064378453";
  </script>
</form>

Thank You!

Answer 1

The Mage_Contacts_IndexController::postAction() method can process custom contact forms.
The posted data needs to fulfill some basic requirements:

// Excerpt from Mage_Contacts_IndexController::postAction()

$postObject = new Varien_Object();
$postObject->setData($post);
$error = false;

if (!Zend_Validate::is(trim($post['name']) , 'NotEmpty')) {
    $error = true;
}
if (!Zend_Validate::is(trim($post['comment']) , 'NotEmpty')) {
    $error = true;
}
if (!Zend_Validate::is(trim($post['email']), 'EmailAddress')) {
    $error = true;
}
if (Zend_Validate::is(trim($post['hideit']), 'NotEmpty')) {
    $error = true;
}
if ($error) {
    throw new Exception();
}

This code shows you which criteria your form needs to fulfill you the controller action works with your data out of the box.

First of all, the data has to be posted (not sent via GET).
Then a non-empty name field, an email field (with a syntacticly correct email), a non-empty hideit field and a comment field need to be present.

The form needs to be posted to the URL /contacts/index/post.
The best way to generate the URL in Magento would be echo Mage::getUrl('contacts/index/post').

The posted data is made available in the contacts email through the {{ var data}} variable.
The email template can be adjusted through the admin interface under System > Transactional Emails.
By default the template is very basic but can be easily extended. For example, to add the value of a field called q5_otherOptions to the email use `{{var data.q5_otherOptions}} as a placeholder.