HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Form Processing

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#59267 (In Topic #12901)
Avatar

Fan in action

Unable to get a custom multipart form to process...

Hello, I added a custom quote form to my site. The general processing works, but the image upload features sends me an ocPortal header image instead of the one attached to the form by user.

Also, how would I integrate Captcha or similar system? Could I add comcode tags within the form?

Here is my final form Code:

Code

[semihtml]<h1>Get A Price Quote</h1><form action="/data/form_to_email.php" enctype="multipart/form-data" id="project_quote" method="post" name="project_quote"><input name="MAX_FILE_SIZE" type="hidden" value="10000000" /> Please provide your contact information.<br />
<br />
<input id="company" name="company" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Company: '}" onfocus="if(this.value=='Company: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width: 260px" type="text" value="Company: " /><br />
<br />
<input id="t_contact" name="contact" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Contact: '}" onfocus="if(this.value=='Contact: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:220px" type="text" value="Contact: " /><br />
<br />
<input id="t_email" name="email" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='e-Mail: '}" onfocus="if(this.value=='e-Mail: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:260px" type="text" value="e-Mail: " /><br />
<br />
<input id="address1" name="address1" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Address1: '}" onfocus="if(this.value=='Address1: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:220px" type="text" value="Address1: " /><br />
<br />
<input id="address2" name="address2" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Address2: '}" onfocus="if(this.value=='Address2: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:220px" type="text" value="Address2: " /><br />
<br />
<input id="country" name="country" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Country: '}" onfocus="if(this.value=='Country: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:220px" type="text" value="Country: " /><br />
<br />
<input id="city" name="city" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='City: '}" onfocus="if(this.value=='City: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:220px" type="text" value="City: " /><br />
<br />
<input id="state" name="state" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='State: '}" onfocus="if(this.value=='State: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:50px" type="text" value="State: " /> &nbsp; <input id="zip" name="zip" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Zip Code: '}" onfocus="if(this.value=='Zip Code: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:80px" type="text" value="Zip Code: " /><br />
<br />
<input id="phone" name="phone" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Phone: '}" onfocus="if(this.value=='Phone: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:160px" type="text" value="Phone: " /> &nbsp; <input id="fax" name="fax" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Fax: '}" onfocus="if(this.value=='Fax: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:160px" type="text" value="Fax: " /><br />
<br />
<textarea cols="" id="projdescription" name="projdescription" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Project Description: '}" onfocus="if(this.value=='Project Description: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" rows="" style="color:Gray; font-size: 110%; height:200px; width:380px">Project Description: </textarea><br />
<br />
<textarea cols="" id="treatments" name="treatments" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Special Treatments/Finishes: '}" onfocus="if(this.value=='Special Treatments/Finishes: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" rows="" style="color:Gray; font-size: 110%; height:100px; width:380px">Special Treatments/Finishes: </textarea><br />
<br />
<input id="quantity" name="quantity" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Quantity Required: '}" onfocus="if(this.value=='Quantity Required: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:160px" type="text" value="Quantity Required: " /> &nbsp; <input id="timeframe" name="timeframe" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Timeframe: '}" onfocus="if(this.value=='Timeframe: '){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" style="color:Gray; font-size: 110%; height:24px; width:160px" type="text" value="Timeframe: " /><br />
<br />
<script language="JavaScript">

</script>[b]Attach a File:[/b]<br />
<small>Please attach print(s) of part(s) to be quoted</small><br />
<input id="attachment" name="attachment" type="file" /><br />
<small> 6MB Maximum, DOC or PDF</small><br />
<br />
[b]Comments:[/b]<br />
<textarea cols="" id="comments" name="comments" onblur="if(this.value==''){this.style.color='Gray';this.style.border='yellow 2px solid';this.value='Please provide any additional information that would be useful in processing your request efficiently.'}" onfocus="if(this.value=='Please provide any additional information that would be useful in processing your request efficiently.'){this.style.color='Black';this.style.border='blue 2px solid';this.value=''}" rows="" style="color:Gray; font-size: 110%; height:200px; width:380px">Please provide any additional information that would be useful in processing your request efficiently.</textarea><br />
<br />
<input name="Submit" type="submit" value="Send Quote" /><br />
<br />
</form>[/semihtml]

Back to the top
 
Posted
Rating:
#59287
Avatar

1) Your code
Nice form. I didn't mention this previously but it's best to set the form action to {$FIND_SCRIPT,form_to_email}{$KEEP*,1,1}. This will make sure that the 'from' details are passed for those who don't have Javascript or cookies.

2) Uploads
This should make uploads also propagate:
Attachment
sources/mail.php
» Download: mail.php (29 Kb, 180 downloads so far)


3) Comcode
As you've used the 'semihtml' tag you can trivially include Comcode wherever you need it.

4) CAPTCHA
Working on this now.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#59289
Avatar

Fan in action

Thanks for looking into this for me, Chris.. and the code you provided. I'm on the road today but will be knee-deep into the site again over the coming days.
Back to the top
 
Posted
Rating:
#59290
Avatar

Right, I have CAPTCHA working on this, but I had to do some really ugly hacks to make it work. Attached is a newer mail.php which we'll include in future versions.

Attachment
sources/mail.php
» Download: mail.php (29 Kb, 157 downloads so far)


For it to work you need the following inside your form:

Code

{+START,IF,{$IS_GUEST}}
   {+START,IF,{$BLOCK,block=main_feedback}}{+END}
   <input name="_security" type="hidden" value="1" />
   [img param="{!CONTACT_STAFF_TO_JOIN_IF_IMPAIRED}"]{$FIND_SCRIPT,securityimage}{$KEEP,1,1}[/img]
   <input class="input_text_required" id="security_image" name="security_image" size="6"  type="text" value="" />
{+END}

You can rearrange that however needed, I just did the minimal to make it work.

As I mentioned, I had to do some nasty hacks here…

  1. {+START,IF,{$BLOCK,block=main_feedback}}{+END} is only there to force the CAPTCHA to be generated. It outputs nothing, but it causes the main_feedback block to be evaluated, which will generate a CAPTCHA.
  2. I showed the CAPTCHA by using [img param="{!CONTACT_STAFF_TO_JOIN_IF_IMPAIRED}"]{$FIND_SCRIPT,securityimage}{$KEEP,1,1}[/img]. This is based on what is in our FORM_SCREEN_INPUT_CAPTCHA template but I stripped it down a lot. We also have support for CSS CAPTCHAs and Audio CAPTCHAs but I didn't include that code here. It could be included.
  3. <input name="_security" type="hidden" value="1" /> will pass a little signal to the mail.php to make it check the CAPTCHA. This is totally insecure, as a bot could just remove that to bypass the CAPTCHA - but practically speaking, bots won't, because they are not written with knowledge of how any individual site works.

You also need to enable the captcha_on_feedback option. If you put that into the Admin Zone search it'll find it.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: