Create simple forms using API

[kyle]

@ryan What if it is a photo upload?  I have seen some discussion on the site about uploading photos from the front end, but I haven't been able to find any that uses the API.

Right now I create the image field:

//images
$field_furn = $modules->get("InputfieldImage");
$field_furn->label = " ";
$field_furn->name = "ad_images";
$field_furn->id = "ad_images";
$field_furn->maxFilesize = 2*1024*1024;
$form_furn->append($field_furn);

Create a field upon submission:

$ad_images = $form_furn->get("ad_images");

And upon a successful submission, I create a new page.  Images are uploaded, but how would I attach the images to a newly created page?

[kongondo]

@kyle...

An example right of the docs to give you an idea..See line 9; it shows an example of adding 1 image. For several, you will want to foreach...there are several posts about this in the forums. Can't find them atm; you might want to search if you are still stuck

$skyscraper = new Page();
$skyscraper->template = $templates->get("skyscraper"); 
$skyscraper->parent = $pages->get("/cities/atlanta/"); 
$skyscraper->title = "W-Hotel Tower"; 
$skyscraper->height = 400;
$skyscraper->year = 2009;
$skyscraper->body = "This is a nice hotel and it has a helicopter landing pad on top of it.";
$skyscraper->save(); 
$skyscraper->images->add("http://starwoodhotels.com/w-atlanta.jpg"); 
$skyscraper->save();

[kyle]

@konondo thanks for the direction; however I had gotten that far.  This issue is when you try to foreach through $ad_images the output doesn't list a file name.

foreach:

foreach($ad_images as $image):
    var_dump($image);
endforeach;

output:

string(1) " " string(0) "" string(0) "" string(0) "" int(0) string(0) "" string(0) "" bool(false) string(16) "JPG JPEG GIF PNG" int(0) int(2097152) int(0) int(0) int(0) int(1) string(69) ".../site/assets/files/1024/" string(40) "InputfieldFile InputfieldImage ui-widget" string(11) "Description" string(4) "Tags" bool(false) string(0) "" string(0) "" int(100)  

I looked around more, and I have seen threads of people being able to upload files using WireUpload and by coding their own forms, but I haven't been able to find any examples of people accomplishing this with the API form method.

[kongondo]

Kyle,

I pointed you to Soma's Gist that has multiple examples. Am I missing something here? Have a look at these...

https://gist.github.com/somatonic/5236008#file-form-php-L88

https://gist.github.com/somatonic/5233338 (scroll all the way down to the next file as well - https://gist.github.com/somatonic/5233338#file-form-upload-php-L30)

Edit:

More links:

http://processwire.com/talk/topic/2597-multiple-image-bug-when-using-api-resolved/

http://processwire.com/talk/topic/1530-setting-image-description-with-multiple-image-upload/

http://processwire.com/talk/topic/3105-create-pages-with-file-upload-field-via-api/page-2

http://processwire.com/talk/topic/3134-basic-image-file-upload/

http://processwire.com/talk/topic/2217-user-generated-content-with-images/

Google search works better than the Forum search

[MatthewSchenker]

Greetings,

Those Gists by Soma are nice and clear. Between those and some other discussions here, you have two methods illustrated for doing front-end forms: (1) using PocessWire's Inputfield modules; (2) using regular HTML form fields. Both work well.

Thanks,

Matthew

[kyle]

@kongondo My mistake those were very clear.  I was attempting to use an InputfieldImage rather than InputfieldFile.  I really appreciate everyone's help.

[kongondo]

Glad you sorted it ...for completeness, I added a few more examples to my post above

[ryan]

I was attempting to use an InputfieldImage rather than InputfieldFile. 

InputfieldImage is a type of InputfieldFile, so the two should work the same for the most part. 

[videokid]

Hi

to keep this thread alive lol... 

I noticed the following

// create a text input check for bots
$field = $modules->get("InputfieldText");
$field->label = "Veld niet invullen"; // make it multilangual for the future
$field->attr('id+name','hmntxt');
$form->append($field); // append the field to the form

and then error check

	var_dump(trim($hmntxt));
	
    if($hmntxt !== ''){
        // attach an error to the field
        // and it will get displayed along the field
	$hmntxt->error("Opgelet, lees goed, het veld onder 'Veld niet invullen' dan ook niet invullen!");
}

results in an error
the dump actually works...

changing the line to:

               $email->error("Opgelet, lees goed, het veld onder 'Veld niet invullen' dan ook niet invullen!");

also works [error line shows up under the E-Mail label

Did I miss something somewhere...

Oh, it's the good old 'honeypot' idea btw

Grtz

[arjen]

To use a honeypot I use the following code. Works like a charm and never ever get spam send through the forms on several websites.

1. First I add the checkbox

$field = $modules->get('InputfieldCheckbox');
$field->label = "Stuur een e-mail";
$field->attr('id+name','sendemail');
$form->append($field);

2. When processing the field find the spam field and set the error

// Get the form field
$spamField = $form->get("sendemail");

// Get the spam action
$spamAction = $sanitizer->text($input->post->sendemail);

// If the spamAction is true tell the bot to try again
if ($spamAction == 1) {
    $spamField->error("Please try again!");
}

3. Hide the field with CSS

.Inputfield_sendemail  {
    display: none !important;
}

[videokid]

Hi Arjen,

thanks for the pointer, I was going that direction... but I couldn't figure out what I missed... now I did

Well, I think at least....

	$spamField		= $form->get("sendanemail");	
	$spamAction		= '';
	$spamAction		= $spamField->value;

Actually I mostly use two hidden fields

Greetings from the Southern Neighbours

[arjen]

I made a small mistake - probably wile copy-pasting code. I've updated the previous post with:

$spamAction = $sanitizer->text($input->post->sendemail);

In the previous example I just declared $spamAction and that won't work since we want it to check against the checkbox. Greetings from the North!

[NooseLadder]

Hi, This is a great thread, very helpful thanks.

So far all of the forms I have used in PW are emailed. I am not using FormBuilder (yet).

I would like to email the form submission and enter the fields data into the database. I would like to use the database data to create reports (pages) for the client.

What is the best way to accomplish this?

[renobird]

FormBuilder is a good fit for those requirements. Lots of great options for handling submissions, notifications, etc...

[NooseLadder]

FormBuilder is a good fit for those requirements. Lots of great options for handling submissions, notifications, etc...

Yes I understand that thanks, but I would like to attempt raw coding in my own templates at this stage if possible.

[kongondo]

Hi, This is a great thread, very helpful thanks.

So far all of the forms I have used in PW are emailed. I am not using FormBuilder (yet).

I would like to email the form submission and enter the fields data into the database. I would like to use the database data to create reports (pages) for the client.

What is the best way to accomplish this?

Hi NooseLadder,

I think it would be better if you created a new thread with your specific questions. This is because your questions are very specific and have little to do with this thread. Secondly, doing that will/may help others find your thread more easily rather than having it buried under this somewhat unrelated thread. So, if you could please start a new thread (Maybe in the "General Support" Forum) and reference this current thread,  I (and others) will start providing some pointers on how you can accomplish what you ask. I summarise these as follows:

1. Email form submission
2. Enter form data into database
3. Use db data to create reports

I have a number of things I need clarified but the above three are not difficult to achieve using the PW API, but let's head over to another thread please, shall we?

[MatthewSchenker]

Greetings,

NooseLadder: a number of us have worked a lot on doing "front-end forms" with ProcessWire.  I've been doing it on pretty much all my new PW sites and it works great.

I would suggest you open a new thread on this and get into the particular requirements of your project.

Thanks,

Matthew

[NooseLadder]

Ok. Thanks. Started new thread here.

[woop]

Thanks for a great tutorial. learned a lot!

[thetuningspoon]

                $field = $modules->get("InputfieldImage");
		$field->label = "Profile Image";
		$field->attr('id+name','profile_image');
		$field->required = 0;
		$field->maxFiles = 1;
		$field->descriptionRows = 0;
		$field->maxWidth = 800;
		$field->maxHeight = 800;
		$field->extensions = 'gif jpg jpeg png';
		$form->append($field);

I'm able to upload an image and see it appear in the correct directory using the above code to generate an image field. But once it's there, I can't output the image on the site. It's like it's only being associated with the page but not the field. Am I missing something?

[Soma]

I'm not sure I can follow. It's there but can't output?

You're using Inputfield here not a Field, you'll need to provide some method to store image after submit to a page. Depending what this code is for.

You' also have to give a upload path to the inputfield.

See some example of usage in my gist is helpful. https://gist.github.com/somatonic/5236008

[thetuningspoon]

Ok, I figured it out by studying the difference between the html output of my form and the output in the admin backend. I had to separate out the id+name part and give it a special id:

$field->attr('name','profile_image');
$field->attr('id','Inputfield_profile_image');

There was more to getting this to work than just that. I had to copy & make a change to InputFieldFile.js, remove that from the $config->scripts array and re-add my own version so that it would appear in the right order, and add the <p> tag and hidden field with the target page number mentioned here:  

http://processwire.com/talk/topic/2867-small-change-to-inputfieldfilejs-to-facilitate-front-end-html5-uploads/

All in all, if there's any way you can achieve what you're trying to do either with the existing admin (loading it into a FancyBox like Soma has described) or by just building your own form from scratch, it's probably the better way to go. Getting the file/image fields to work on the front end is a royal pain.

Edit: Soma, this was for updating an existing page (user page, actually) with an image field already on it. The image was uploading to the page's directory under assets just fine, but would not appear when called on the front end for final output to the end user (the field was showing empty in the database).

[thetuningspoon]

Hmm, how do I pre-populate the inputfield with the current image? What would be the equivalent of "value" for a file/image inputfield?

[pine3ree]

Inputfield{Type} VALIDATION / sanitizer BEHAVIOUR

I used a few form builder components in various frameworks and cmfs. My preference is undoubtedly for ZF2 zend-form zend(-filter|-input-filter|-validator) and i use it in PW fronted site also.

Since PW has its own form components used in the admin area i use it in my recent projects.

There are a couple of things i think should be modified, i'll explain with an eample.

i have a contact form which provides an email field InputfieldEmail and a message field InputfieldTextarea with maxlentgh=1024

when i process the form the internal validator/sanitizer empty the email field if nt valid and trim the textareafield if longer than 1024 chars.

in my form i'd like to always use $field->value as the value attribute, but of course if i want to show the submitted data even if not valid to the user i would end up with an empty email field and a shorter message.

i think that most common errors in email are single characters so the user would benefit to have the email field showing the wromg submitted data.

The same goes for the message field. Maybe the user decides that the trimmed part was the most important part and the one to be sent.

Of course, simply using $input i show the original data on form error, but i would like to have the data derived from $field->value as some other cleeanup is done in the field (as stripTags for instance).

For instance in InputfieldEmail I think it could be better using the sanitizer to check for valid email and add the error for invalide email, but also returning the original value on error.

what's your opinion?

kind regards

[Juergen]

// create a text input

$field = $modules->get("InputfieldText");

$field->label = "Name";

$field->attr('id+name','name');

$field->required = 1;

$field->attr("class" , $field->attr("class") . " myclass");

$form->append($field); // append the field to the form

Appending a custom class works fine without the exception of a password field where the password must be entered twice. The class manipulation only works for the first input field in this case. Is there a workaround?

I try to create bootstrap forms so it will be necessary to manipulate also the second input field of this field type.

Best regards Jürgen