email()->validate('user-email'); // check for errors if ($validator->hasErrors()) { $_SESSION['errors']['image-picker-form'] = $validator->getAllErrors(); } else { // replace images URLs with html img code $values = []; foreach ($_POST as $key => $value) { if (is_array($value)) { foreach ($value as $k => $v) { $value[$k] = preg_replace('`^https://(.*)`', '', $v); } $values[$key] = $value; } else { $values[$key] = preg_replace('`^https://(.*)`', '', $value); } } $email_config = array( 'sender_email' => 'contact@phpformbuilder.pro', 'sender_name' => 'Php Form Builder', 'recipient_email' => addslashes($_POST['user-email']), 'subject' => 'Selected Images from Php Form Builder', 'values' => $values, 'filter_values' => 'image-picker-form', 'sent_message' => '

Your message has been successfully sent !

' ); $sent_message = Form::sendMail($email_config); Form::clear('image-picker-form'); } } $form = new Form('image-picker-form', 'vertical', '', 'material'); // $form->setMode('development'); // Single image $form->startFieldset('Single image select'); for ($i=0; $i < 10; $i++) { $form->addOption('animal', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/animals-' . $i . '.jpg', '', '', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/animals-' . $i . '.jpg, data-img-alt=Animal ' . $i); } $form->addSelect('animal', 'Choose your preferred animal', 'class=no-autoinit, required'); $form->endFieldset(); // Multiple select $form->startFieldset('Multiple select'); $form->addHelper('Multiple choices', 'landscapes'); for ($i=0; $i < 10; $i++) { $form->addOption('landscapes[]', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/landscapes/landscape-' . $i . '.jpg', '', '', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/landscapes/landscape-' . $i . '.jpg, data-img-alt=Landscape ' . $i); } $form->addSelect('landscapes[]', 'Choose your preferred landscapes', 'class=no-autoinit, multiple, required'); $form->endFieldset(); // Multiple select with limit $form->startFieldset('Multiple select with limit'); $form->addHelper('Maximum 2', 'cities'); for ($i=0; $i < 10; $i++) { $form->addOption('cities[]', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/cities/city-' . $i . '.jpg', '', '', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/cities/city-' . $i . '.jpg, data-img-alt=City image ' . $i); } $form->addSelect('cities[]', 'Choose your preferred cities', 'class=no-autoinit, multiple, data-limit=2, required'); $form->endFieldset(); // Single image with labels $form->startFieldset('Single image with labels'); for ($i=0; $i < 10; $i++) { $form->addOption('single-image', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/sports/sport-' . $i . '.jpg', '', '', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/sports/sport-' . $i . '.jpg, data-img-label=Sport ' . $i . ', data-img-alt=Sport' . $i); } $form->addSelect('single-image', 'Choose your favourite sport', 'class=show_label no-autoinit, required'); $form->endFieldset(); // Single image with grouped options $form->startFieldset('Single image with grouped options'); for ($i=0; $i < 5; $i++) { $form->addOption('animal-2', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/cats/cat-' . $i . '.jpg', '', 'Cats', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/cats/cat-' . $i . '.jpg, data-img-alt=Cat ' . $i); } for ($i=0; $i < 5; $i++) { $form->addOption('animal-2', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/dogs/dog-' . $i . '.jpg', '', 'Dogs', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/dogs/dog-' . $i . '.jpg, data-img-alt=Dog ' . $i); } for ($i=0; $i < 5; $i++) { $form->addOption('animal-2', 'https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/animals-' . $i . '.jpg', '', 'Other animals', 'data-img-src=https://www.phpformbuilder.pro/templates/assets/img/random-images/animals/animals-' . $i . '.jpg, data-img-alt=Others ' . $i); } $form->addSelect('animal-2', 'Choose your preferred animal', 'class=no-autoinit, required'); $form->endFieldset(); $form->addInput('email', 'user-email', '', 'Your Email', 'required'); $form->addBtn('button', 'cancel', 0, 'Cancel', 'class=btn btn-warning', 'btn-group'); $form->addBtn('submit', 'submit-btn', 1, 'Submit', 'class=btn btn-success', 'btn-group'); $form->printBtnGroup('btn-group'); // image picker plugin $form->addPlugin('image-picker', 'select'); // jQuery validation $form->addPlugin('formvalidation', '#image-picker-form'); ?> Material Design Image picker Form - How to create PHP forms easily printIncludes('css'); ?>

Bootstrap 4 Image picker Form
with Image picker plugin

render(); ?>
printIncludes('js'); $form->printJsCode(); ?>