More Fields In Email Contact Form
Development and Programming
I need an email contact form with the following fields:
Name Company Address (Street 1, Street 2, City, State, Zip, Country) Phone Email Question Checkbox asking “Please send me a brochure in the mail”
I’m new to Expression Engine and I’ve hit a wall with this requirement. What is my best course of action?
Or do this with the built-in contact form - personally, I’d rather avoid third-party modules where I can, although FreeForm is very good. From the User Guide,
You may specify multiple fields by making the name= attribute an array by using “message[]”. For example:Home Phone: <input type="text" name="message[]" size="12" maxlength="15" /> Cell Phone: <input type="text" name="message[]" size="12" maxlength="15" />
This will just appear as a bunch of text in the email you receive, so you can put in hidden fields which will appear in the message to you, e.g.
<input type="hidden" name="message[]" value="--Home phone:" />
<label for="phone">Phone:</label>
<input type="text" name="message[]" id="phone" size="12" maxlength="15" />This will appear in the email you receive as:
–Home phone: 123-2465
For checkboxes, just change the type:
<input type="checkbox" name="message[]" value="brochure" />I like Freeform because it’s easy to setup the various contact forms, keep them organized within the control panel, etc.. However, Simon’s advice is excellent.
Thanks for the help, I appreciate it. I’m still trying to wrap my head around EE proper, I’ll try Simon’s suggestion and then give FreeForm a try when I’m a little more comfortable. Thanks again.
i’d second or third freeform. just much more flexible and easier to use in my opinion. plus it’s rather trivial to tie into the mailing list module.
You’ve convinced me, I think I’ll give FreeForm a try 😊 Will their documentation (http://www.solspace.com/docs/entry/freeform_26_form_tag/#form_fields) suffice or can you suggest a more novice tutorial?
solspace’s doc are more than adequate. really, there is not much more to it than building the form in html.
Hi,
I have added the extra field (phone) to my contact form as per the example but the email I receive doesn’t show the phone number. Below the code I use, it is exactly copied from the manual and given example so I am not sure where it goes wrong. Any help would be much appreciated.
{exp:email:contact_form user_recipients="false" recipients="[email protected]" charset="utf-8"}
<h2>Support Form</h2>
<label for="from">Your Email:</label>
<input type="text" id="from" name="from" size="40" maxlength="35" value="{member_email}" /></p>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" size="40" value="Contact Form" /></p>
<input type="hidden" name="message[]" value="--Home phone:" />
<label for="phone">Phone:</label>
<input type="text" name="message[]" id="phone" size="12" maxlength="15" />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="18" cols="40">Support Email from: {member_name}
Sent at: {current_time format="%Y %m %d"}</textarea></p>
<input name="submit" type='submit' value='Submit Form' /></p>
{/exp:email:contact_form}You need to change name=”message” to name=”message[]” in the <textarea> tag.
Hi Simon, it works! super…thanks! Tammo
Hi. Found this very useful. However, if I do not have anything in ‘phone’ or the main message, the form still sends.
{exp:email:contact_form user_recipients="false" recipients="" charset="utf-8" return=""}
<fieldset>
<div class="formitem">
<label for="name" class="labelfloat">Name: </label>
<input name="name" id="name" type="text" class="textinput" />
</div>
<div class="formitem">
<label for="from" class="labelfloat">Email: </label>
<input name="from" id="from" type="text" class="textinput" value="{member_email}" />
</div>
<div class="formitem">
<input type="hidden" name="message[]" value="Phone:" />
<label for="phone" class="labelfloat">Phone: </label>
<input name="message[]" id="phone" type="text" class="textinput" />
</div>
<div class="formitem">
<label for="message" class="labelfloat">Comments:</label>
<textarea name="message[]" id="message" cols="20" rows="10"></textarea>
</div>
<input id="send" type="submit" send="submit" value="Send message" />
</fieldset>
{/exp:email:contact_form}As long as I have a email address entered, the form sends. The contents of the email is:
“Phone:”
how do you add required fields to the form?
just add in the “required” parameter to the weblog tag. something like this:
{exp:email:contact_form user_recipients=“false” recipients=”” charset=“utf-8” return=”“ required="name|from|phone|message"}That doesn’t do anything.
<fieldset class="info">
<input type="hidden" name="required[]" value="Name:" />
<label for="name">Name:
<input type="text" id="name" name="required[]" value="" /></label>
<label for="from">Email:
<input type="text" id="from" name="from" value="{member_email}" /></label>
<label for="subject">Subject
<input type="text" id="subject" name="subject" value="" /></label>
<input type="hidden" name="required[]" value="Phone:" />
<label for="phone">Phone
<input type="text" id="phone" name="required[]" value="" /></label>
</fieldset>
<fieldset class="reply">
<input type="hidden" name="message[]" value="Message:" />
<label for="message" class="textarea">Message:
<textarea id="message" name="message[]" cols="32" rows="8"></textarea></label>
</fieldset>Gives me this: Name:
Phone: Message: Testing the form
So required doesn’t actually mean it is required, it just adds it to the message. Hope ExpressionEngine 2 is better than this.
Perhaps some jQuery will help with this?
post your freeform tag so that we can take a look at it. i’ve included my contact form off of my site and it works as advertised.
{exp:freeform:form form_name="contact" form_id ="contact" return="contact/thank_you" notify="" required="name|email|comments" template="contact_notification"}
Name
<input name="name" type="text" value="" size="37" maxlength="30" /></p>
Email
<input name="email" type="text" value="" size="37" maxlength="30" /></p>
Comments
<textarea name="comments" cols="34" rows="8"></textarea>
<input type="submit" name="submit" value="submit" /></p>
{/exp:freeform:form}