Search the Community

FieldtypeFormSelect lets you create fields to select from forms created using the pro FormBuilder module. Features: Create select fields that allow for choosing forms when editing pages Fully compatible with FormBuilder, render forms using native methods Choose which forms will be available to choose from, each field is configured individually Choose how form names will be presented in select elements Compatible with FormBuilderHtmx FieldtypeFormSelect lets you create fields like this, configured as desired. Choose which forms will be present. Including forms where names start/end or contain a value allows you to create a form select field once then use form names to help group them together, or add/remove them from form selects without editing the field. This is also a pretty simple way to allow end users to create forms that will be selectable without having to edit a field configuration. For example, this field will only allow you to choose forms having names ending with "request", so "customer-support-request" and "consultation-request" will be included, but where forms with names like "newsletter-signup" and "call-to-action" won't. Choose how you would like the form names to be presented in the select element. They can be shown as they are originally named, as spaced words, or as capitalized/spaced words. Rendering in your templates is straightforward <?php $page->select_a_form; // => A form ID, or null if no form has been selected // Render using the native FormBuilder method echo $forms->render($page->select_a_form); // Alternate method. Selected form will be rendered, if no form is selected output is null. echo $page->render('select_a_form'); Form select fields store the ID of the selected form and FieldtypeFormSelect makes use of ProcessWire's built-in field rendering to keep things simple. The fields you create will always be up-to-date with the forms as they currently exist. If a form is deleted that has been selected in one or more fields, those values will be set to null so you won't experience any issues with references to form IDs that no longer exist. Your templates and pages stay free from errors. My primary use is to have a form select field available for blocks created in the RockPageBuilder module by @bernhard. I want each section on the page to contain an option to choose any form that will open in a modal to put the power of choosing forms in the hands of the user. RockPageBuilder is not required, but makes for a powerful example. Contributions and issues are welcome on Github, or stop by here for some help! Install as a ProcessWire module Install via Composer Download from the Github repository Cheers!

Hey all! This is a module to enhance forms built using the Pro FormBuilder module by providing the ability to submit them in place using AJAX and HTMX. FormBuilderHtmx works in harmony with FormBuilder by handling front-end rendering and AJAX and lets FormBuilder manage form configuration and processing. FormBuilderHtmx provides a drop-in replacement for the $forms->render() method and provides all native features and behavior (and adds a few extra superpowers to boot). Noteworthy features: Zero configuration, install and render AJAX powered FormBuilder forms immediately Render multiple forms on the same page. Supports both multiple instances of the same form or different forms. Each form is processed independently. Non-intrusive, can be used alongside FormBuilder's native rendering methods and does not modify core module behavior Perfect for forms embedded in popups and modals Does not conflict with styling and other JavaScript already in-place, only handles the form submission/response loop Automatically disables the `Submit` button on submission to prevent duplicate requests Provides the ability to add a custom 'spinner' shown when a form is being processed Gives you the ability to add additional HTML attributes to your FormBuilder <form> element. Add additional custom functionality using HTMX attributes, hook into form actions with your JavaScript, or even add AlpineJS directly to your forms. Compatible with FieldtypeFormSelect, let users choose which forms to embed, your code determines how they are rendered Uses HTMX, a stable, powerful, and tiny (14kb gzipped) library, installation documentation available here This module is BYOH (Bring Your Own HTMX) in that the HTMX library is not included or available within this module. This ensures long-term stability by not locking FormBuilderHtmx to external asset versioning. FormBuilderHtmx uses stable core HTMX features so use the library version that works for you and confidently add this module to both new, existing, and future ProcessWire applications. In some instances CSRF protection may need to be disabled to submit forms with this module. Just test your forms and you're good to go. Using this module is truly easy. <!-- Replace the native $forms->render() method with $htmxForms->render() --> <?php $htmxForm = $htmxForms->render('your_form_name') ?> <!-- Use native ProcessWire properties and methods as usual --> <?php echo $htmxForm->styles; echo $htmxForm->scripts; echo $htmxForm; ?> Presto. You can optionally include a helpful 'spinner' or activity animation that will be showed to users while their form request is being processed. Check out these ready-to-go examples you can use in your projects. <style> /* Add these styles to your CSS, the `.htmx-request` must be present as shown here. Be sure to include any CSS your 'spinner' may need, and style everything as desired */ .activity-indicator { display: none; } .htmx-request .activity-indicator, .htmx-request.activity-indicator { display: block; } </style> <!-- Optional second argument matches that of the $forms->render() method for pre-populated values The third argument is the CSS selector matching your 'spinner' element --> <?= $htmxForms->render('your_form_name', [], '#indicator-for-the-form') ?> <div id="indicator-for-the-form" class="activity-indicator"> <span class="spinner"></span> </div> Presto (again) Check out the documentation for detailed usage and other available features. Pull requests and issues filed on Github are welcome, or drop by here to get some help! Install as a ProcessWire module Install using Composer Download from the FormBuilderHtmx Github repository . Cheers!

Hi all, Running into an odd error that I can't seem to get my head around. We have 2 separately created Formbuilder forms sitting on a single page. But we keep experiencing weird results with them, originally we couldn't get one of the forms to ever submit so we ended up disabling CSRF for them which let us get around this issue. However it then causes a problem in that with CSRF disabled, one of forms always records 2 entries on submission. Just a straight duplicate within the entries for that form. So trying to stop this happening we tried enabling CSRF again and although that does stop the duplicated entry, it ends up giving really weird feedback such as the attached screengrab. Hazarding a guess I assume whatever is trigger on submission is firing twice because of the presence of the second form, but I have no idea why this would be the case as they are 2 seperately named forms? Any ideas?

I have a a form in my site footer that can be accessed anywhere on site, I've added the form in the _inc.php file and added the render in the pages footer.php. However, this works well on the homepage e.g. you can submit said form and get a thank you on reload, doesnt work at all on other pages... Just lots like a fresh reload. Any thing im doing wrong here or ways to diagnose as there isn't an error log for formbuilder etc...?

I have a few web forms which require testing on a weekly basis and I don't want the recipients (administrators) to receive these test emails. What would be a good way to test approx 15 forms from the front end and have the test delivered a list of secondary administrator recipients? I'm thinking that I could have some kind of config file which watches for a trigger word or email and then understands that it's a test and to bypass the normal admins? All of the forms ask for an email address so I could setup an email such as 'testform@email.not' etc which my config file (hook?) would watch for. Or is there a better way to do this? Additionally, I have a few extra requirements... Forms should goto an alternative success page. This is because I don't want my test to skew my Google Analytics conversion tracking Forms would need to be tested from the front-end and not the PW admin area Any advice appreciated. BTW I realise this should be posted in the proper FormBuilder support forum. I am in the process of renewing my license for access to that support forum.

What is the best practice for having a form (only accessible to a logged in user) save the user's progress between sections of the form? Fieldsets? Multiple forms? Use case: I have a very long application form that would take 30 minutes for the applicant to fill out and I would hate for all progress to be lost due to user error. The progress needs to be logged into the user's page. Thanks!

is there a simple way to render a form from the backend in frontend ( with other styles ) ? Or do i have to build everything on my own like in this post ? Thanks for any help.

I'm trying to implement a front-end image upload form for user profile pictures, to a field called 'profile_picture'. The code is based on the various examples found around these forums but isn't yet 100% right. The form successfully submits the image to the server and updates the field in the dashboard. When you submit the firm, the page reloads and uploads the image but the template still loads the old image path (now broken path as the old image has been removed). I can only get the new image to show if I hit enter in the address bar forcing the page to reload. Any ideas? Is it a caching issue, or something to do with the order of the script? It makes no difference if I call the image after the upload form. <?php //Display current user image $userImg = $user->profile_picture->first(); echo '<img src="'.$userImg->url.'">'; $upload_path = $config->paths->assets . "files/avatar_uploads/"; $f = new WireUpload('userimage'); $f->setMaxFiles(1); $f->setMaxFileSize(1*1024*1024); $f->setOverwrite(true); $f->setDestinationPath($upload_path); $f->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); if($input->post->form_submit) { if(!is_dir($upload_path)) { if(!wireMkdir($upload_path)) throw new WireException("No upload path!"); } $files = $f->execute(); if ($f->getErrors()) { foreach($files as $filename) @unlink($upload_path . $filename); foreach($f->getErrors() as $e) echo $e; } else { $user->of(false); $user->profile_picture->removeAll(); // wirearray (line added by @horst: explanation is three posts beneath) $user->profile_picture = $upload_path . $files[0]; $user->save(); $user->of(true); @unlink($upload_path . $files[0]); } } ?> <form class="forum-form" accept-charset="utf-8" action="./" method="post" enctype="multipart/form-data" > <input type="file" id="attach" name="userimage" accept="image/jpg,image/jpeg,image/gif,image/png" /> <input type="submit" name="form_submit" value="Submit"/> </form>

Forms are an essential part of most websites, and it's no surprise that there's an excellent premium module Form Builder but what if you're on a zero budget for whatever reason? It is possible to build forms quickly and easily by making use of a couple of free modules and the admin UI to give you a great deal of flexibility and speed of development, particularly if you need multiple forms on a website with different fields. 1. First you're going to need to install a couple of modules: Form Template Processor Fieldtype Select External Option 2. For each form that you want to display, create a template without a template file and add fields to it as you normally would. (eg I have formContact, formRegister etc) Tip: under the Advanced tab in the setup for each template, I add a tag Forms so that all my forms templates are nicely grouped together in admin. 3. Create a new field of type Select External Option and call it formTemplate In the section Create options from any database table select templates as the source table id as the Option Value name as the Option Label 4. Create a new template file and call it renderForm.php (or whatever else you like) Add an email field to this form - This will be the email address that forms get submitted to. Add the formTemplate field you previously created to this form. This will allow you to select which of the templates you previously created such as formContact, formRegister etc you want to render. Add any other fields as usual that you want to render on the page. Add the following PHP code to the template file. $recipient = $page->email; $form = $modules->get('FormTemplateProcessor'); $form->template = $templates->get($page->formTemplate->label); // required $form->requiredFields = array('contactName', 'contactEmail', 'contactMesssage'); //Optional: This can be improved by having a field in the page template with a CSV list of required fields eg $form->requiredFields = explode(',', $page->requiredFields) $form->email = $recipient; // optional, sends form as email. FormTemplateProcessor can also save forms to the database. $content .= $form->render(); //generate the form to display. Note: this doesn't actually render the form at this point, but you have it in the $content variable ready to output wherever you want in your template. Add any template HTML or other PHP code and echo $content; wherever you want to render the form. 5. Create a page using the renderForm template, and provide an email address, and select a form that you want to display. 6. Use CSS to style the form as required. 7. View your new page, and check that the form renders correctly. 8. You can modify the templates you created at step 2 or create new ones as required if your requirements for what fields forms display changes. Note: The Form Template Processor module can also save form input as pages, and the FieldType Select External Option can be set up with filtering, so this solution can probably be refined further.

Hey all, Mods; please feel free to move this if it is in the incorrect place although I thought this was the best place for it. Kinda new to processwire but getting the hang of it....I am trying to build a payment form with the Stripe platform but failing miserably....I really hope someone can help! So I am building my form with the PW API and also following through this documentation here: https://stripe.com/docs/elements and here: https://stripe.com/docs/charges My form is pretty basic just for testing purposes right now: <form id="payment-form" class="pusher" name="payment-form" method="post" action="./#booking-form"> <?php $tokenName = $this->session->CSRF->getTokenName(); $tokenValue = $this->session->CSRF->getTokenValue(); echo '<input type="hidden" id="_post_token" name="' . $tokenName . '" value="' . $tokenValue . '"/>'; $out = ""; $out .= '<div id="card-number"></div> <div id="card-errors"></div>'; // create a new form field (also field wrapper) $form = $modules->get("InputfieldForm"); $form->action = "./"; $form->method = "post"; $form->attr("id+name",'payment-form'); // First Name $field = $modules->get("InputfieldText"); $field->skipLabel = true; $field->attr('id+name','name'); $field->attr('placeholder','Full Name'); $field->required = 1; $form->append($field); // append the field to the form // create email field $field = $modules->get("InputfieldEmail"); $field->attr('id+name','email'); $field->attr('placeholder','Email'); $field->required = 1; $form->append($field); // append the field // oh a submit button! $submit = $modules->get("InputfieldSubmit"); $submit->attr("value","SUBMIT"); $submit->attr("id+name","submit"); $submit->attr("class","cta white"); $form->append($submit); if($input->post->submit) { // user submitted the form, process it and check for errors $form->processInput($input->post); if($form->getErrors()) { // the form is processed and populated // but contains errors $out .= $form->render(); } else { foreach($input->post as $key => $value) echo htmlentities("$key = $value") . "<br />"; } } else { foreach($form->children as $input){ $out .= "<div class='col-sm-6'>{$input->render()}</div>"; } } echo $out; ?> </form> That alone works fine and returns all of the fields values after I click submit which is great...now we add the javascript: //Stripe var stripe = Stripe('pk_test_*****************'); var elements = stripe.elements(); // Custom styling can be passed to options when creating an Element. var style = { base: { // Add your base input styles here. For example: fontSize: '16px', lineHeight: '24px' } }; // Create an instance of the card Element var card = elements.create('card', {style: style}); // Add an instance of the card Element into the `card-element` <div> card.mount('#card-number'); card.addEventListener('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); // Create a token or display an error when the form is submitted. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.createToken(card).then(function(result) { if (result.error) { // Inform the user if there was an error var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { // Send the token to your server stripeTokenHandler(result.token); } }); }); function stripeTokenHandler(token) { // Insert the token ID into the form so it gets submitted to the server var form = document.getElementById('payment-form'); var hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); } This gives an error in the console: Uncaught (in promise) TypeError: form.submit is not a function. This is because our submit input has the name "submit". Ok thats cool...I can change that but once I do the page essentially refreshes and the form just shows again and it doesnt give me the values it did before....I guess it isnt posting? either way after I submit the form after changing the name of the submit button the form just loads again and anything inside: if($input->post->submit) doesnt seem to execute...so what gives? If anybody here has done this before with PW 3+ I would really love an example of how to use this to the point of sending information to Stripe. I have installed Stripe with composer and it would appear that I can refer to it in Processwire just fine...my problem is just getting to the point where I need to refer to it which is after the submit. I have seen the PaymentStripe module but tbh the documentation on that is somewhat lacking and im not even sure it works with the latest version of stripe? Im also not sure how to integrate that into a form either unless you use something along the lines of the example code provided after the form has been submitted but I cant even seem to submit the form to even try that and im not really sure why. Here is the PaymentStripe module page for those wondering: https://modules.processwire.com/modules/payment-stripe/ Any help would be greatly appreciated! Cleanboy

I am implementing the ability to handle form submission using AJAX. The problem I have is that even though, as far as I can tell, I convert the AJAX-submitted JSON input into the equivalent of $input->post. When I call $form->processInput() it always throws that it appears to be forged. if ($config->ajax && $_SERVER['REQUEST_METHOD'] === 'POST') { // get the file body and decode the JSON. try { $body = file_get_contents('php://input'); $json = wireDecodeJSON($body); //wire('log')->save('info', 'ajax-json:' . print_r($json, true)); wire('log')->save('info', 'json-data:' . print_r($json['data'], true) . ' sid: ' . session_id()); $fakeinput = new WireInputData($json['data']); $form = deleteRequest('xyzzy'); $form->processInput($fakeinput); } catch (Exception $e) { http_response_code(404); echo json_encode(array('reason' => $e->getMessage())); } return; The log shows that the TOKEN and the TOKEN value are the same as when a normal form is submitted (I have both on the page for testing and can submit via normal POST as well as via AJAX). The session_id() value is the same. What am I missing? Log entries ("dumb" is the normal submit button name, "fake-text" is an empty text field, "submit" is the AJAX submit button name.) (using form-post): post Array ( [dumb] => dumb-button [TOKEN1649939534X1479234443] => f4VLZ17RlXfp9KVCQr/GIhoZ3krbuWK5 ) (using ajax-post): json-data: Array ( [fake-text] => [submit] => DELETE ENDUSERS [TOKEN1649939534X1479234443] => f4VLZ17RlXfp9KVCQr/GIhoZ3krbuWK5 )

I had situations come up that just seemed like AJAX was the right way to handle interactions with the ProcessWire server - pages with an element like a button or link that should cause an action to occur but shouldn't require a form or actually following a link - it should just take the action and only update the toggle (a checkbox in this case) when the interaction is completed. Another use case is with a large page on which there are multiple possible interactions. When the page is heavy enough that redrawing results in a less than optimal user experience then it's nice to be able to submit a form without having to redraw the page in order to update the relevant parts. So with that preamble, here's what I put together. I was going to try to clean it up a bit but that has prevented me from posting this so I figured it's better to post it and clean it up if there is any interest. You'll see references to the namespace whale - the name of our project - that would ultimately be removed. There are two major components - the PHP side and the client-side. On the PHP side there are two functional areas: 1. "wrapping" an entity to be inserted into the HTML on a page Wrapping (the function 'makeContainer()' puts a predefined wrapper around one of three types of objects: FormBuilderForm, InputfieldForm, or Template). The wrapper provides context and attaches classes that allows the client JavaScript code to find the wrapper and figure out what to do with it. // // define a function that makes a "form" of a single button. // function makeButton ($label) { // get the form $form = wire('modules')->get("InputfieldForm"); $form->attr('action', './'); $form->attr('method', 'post'); $submit = wire('modules')->get("InputfieldSubmit"); $submit->attr('id+name', 'submit'); $submit->attr('value', $label); $form->add($submit); return $form; } // wrapper function to set label on submit button function requestUserDeleteList() { return makeButton('Do it!'); } // // makeContainer wraps the rendered InputfieldForm in HTML so the client JavaScript can recognize it and handle // AJAX interactions with the server. // It returns the InputfieldForm object and the HTML to be inserted into the page. Note that makeContainer // is in a different namespace so it requires the function name must be qualified with the \ProcessWire prefix. // list ($form, $deleteUsersHTML) = ajax\Request::makeContainer('do-something', '\ProcessWire\requestUserDeleteList'); 2. helping with the processing of an AJAX request that is submitted to the page. Helping with the AJAX request - the code is invoked on page load and determines where there is a valid AJAX request from something it wrapped. It also allows messages to be returned, classes to be added or removed from specific elements, redirects to be executed, or even wholesale replacement of DOM elements (with plenty of caveats). It will even update a submit key so it is possible for the client to execute a single transaction multiple times. // get a new request object for the AJAX transaction $request = new ajax\Request(); // if it isn't formatted correctly handle the error if (!$request->isValidCall()) { return $request->echoError(); } // get the data and function-specific contents (Whale Ajax Context) $data = $request->data(); $wac = wireDecodeJSON($data['wac']); // if ($request->id('wants-newsletter')) { if (!ajax\Request::hasCorrectProperties($data, ['wac', 'value'])) { return $request->echoError(__('invalid call')); } // implement function here } else if ($request->id('another-function')) { // implement function here } // it didn't match any of the AJAX IDs implemented return $request->echoError('not implemented'); The client code requires jQuery and is packaged as three separate functions because both the form and template processing share a common core set of functions. My original intent was to only load the form or non-form code as needed but they're small enough that it really doesn't matter. See attachments for the Request class and the client code. There are many helper functions. Here is a kind of an unfocused extract that illustrates using the code with more context (from an internal sandbox page): <?php namespace ProcessWire; using whale\ajax; // include server-side code for making forms and processing them require_once './utility/ajaxform.inc'; // custom version of ProcessWire/wire/core/WireFileTools.php render() that returns the // template object, not the rendered HTML require_once './utility/get-file-template.inc'; // START AJAX submitted form processing - decodes the request and stores results in $aaform. $aaform = new ajax\Request(); // // this page handles multiple ajax calls so I check to see if it is valid once and then check IDs. // It's also possible to use $aaform->isValidCall('get-user-delete-list') to check specifically // for a specific AJAX ID. The ID is the name provided to Request::makeContainer() when the object // is wrapped. It's also possible to make calls to $aaform->id('get-user-delete-list') to check // for a specific ID. // // to create the forms/input elements that are submitted via AJAX start with: // Request::makeContainer('unique-name-on-page', object) // unique-name-on-page will become the ID of the element that wraps your object. // object - one of ProcessWire\InputfieldForm, \FormBuilderForm, ProcessWire\Template. // if ($aaform->isValidCall()) { if ($aaform->id() === 'get-user-delete-list') { $form = requestUserDeleteList(); // process using the form. the Request object will check to make sure it's the right type. if (!$aaform->process($form)) { return $aaform->echoError(); } // build new form with usernames for selections to delete. the function getUsersToDelete() // returns a user count and a function that will make the form that includes the users in // a list of checkboxes. list($usercount, $formmaker) = getUsersToDelete(); // this returns a replacement to part of the existing DOM. There are limitations but it // handles adding a form or replacing an existing form. if ($usercount === 0) { $replacement = '<div id="ajax-place">No users to delete</div>'; } else { // we pass the $formmaker function to makeContainer(). It returns the form and the // rendered wrapper and form. list($xform, $xhtml) = ajax\Request::makeContainer('do-delete', $formmaker); $replacement = '<div id="ajax-place">' . $xhtml . '</div>'; } // this makes sure the return is formatted so the client can handle it correctly. in // this case a replacement in the DOM is being returned. The first argument is the // selector, the second is the HTML to replace the selected element with. return $aaform->echoReplacement('#ajax-place', $replacement); } else if ($aaform->id() === 'do-delete') { list($usercount, $formmaker) = getUsersToDelete(); // process using the form returned by $formmaker. this will check to make sure it's // the right type of form. This abstracts FormBuilder forms and InputfieldForms. if (!$aaform->process($formmaker())) { return $aaform->echoError(); } // a bunch of logic where the checked users are deleted $deleted = []; $failed = []; $data = $aaform->data(); foreach($data as $name => $value) { if ($name === $value) { $user = wire('users')->get("name=$name"); $email = $user->email; // delete the user and try to get it again to see if the delete worked wire('users')->delete($user); $u = wire('users')->get("name=$name"); if (!count($u)) { $deleted[] = $email . " ($name)"; } else { $failed[] = $email . " ($name)"; } } } $deleted_users = $failed_deletions = ''; if ($deleted) { $deleted_users = 'deleted:<br/>' . join($deleted, '<br/>') . '<br/>'; } if ($failed) { $failed_deletions = 'failed to delete:<br/>' . join($failed, '<br/>') . '<br/>'; } $replacement = '<div id="ajax-place">' . $deleted_users . $failed_deletions . '</div>'; return $aaform->echoReplacement('#ajax-place', $replacement); } else if ($aaform->id() === 'contact') { // here a FormBuilderForm is being loaded if (!$aaform->process($forms->load('contact'))) { return $aaform->echoError(); } // this sends a notice back. the client will place it in a predefined notice area. // Request::makeContainer() will create an area for notices (or you can supply one). // It is also possible to return errors; notices and errors get different classes. $msg = ajax\Request::makeNotice('bruce says hi'); return $aaform->echoSuccess($msg); } else { // it was a valid form but it doesn't match any ID that this page knows about. return $aaform->echoError('what is this?'); } } // normal processing to render the initial page follows as it was not a valid AJAX post // that is handled by Request(). That's a lot of code, so I won't post anymore. If people have interest I'm happy to explain or provide other bits of code, like the extracted get-file-template.inc function. Wrapping a template is similar to wrapping a form except that only certain HTML elements are tracked and each are sent to the server when they are clicked on (technically it varies). It handles radio buttons, checkboxes, links, and buttons (radios and checkboxes on "change" and links and buttons on "click"). So when a checkbox is checked an AJAX call will be made so it can be acted upon by the server. @microcipcip, @ryan, @valan (sorry to any if this isn't interesting to you - I did a quick scan of what looked like semi-related AJAX posts). ajaxform.inc ajaxclient.js

hello! I have a site on processwire version 2.3. Can I install Form builder, and will it work?

Why does the forms API use lists - ul, li - to style forms? It makes them much harder to control with CSS. Why not something like this? <style> .field { float: left; width: 100%; } .inputfieldheader { float: left; width: 100%; } .input { float: left; } </style> <form> <div class=field> <label class=inputfieldheader>Field one</label> <input class=input> </div> <div class=field> <label class=inputfieldheader>Field two</label> <input class=input> </div> <div class=field> <label class=inputfieldheader>Field three</label> <input class=input> </div> </form>

I am trying to apply onkeyup or jquery keyup to a PW form - to autogenerate a username from a real name. This javascript/jquery works fine on test html input fields: But I can't get it to work on the fields generated by the PW forms API, even though the input id names are exactly the same. What am I missing?

I have a single-page website with a contact form: <div id="wrap_form"> <form id="inquire" action="" class="uk-form"> <div class="uk-grid uk-grid-collapse"> <input type="text" id="i_name" name="name" class="uk-width" placeholder="Your Name" maxlength="250" required /> <input type="text" id="i_phone" name="phone" class="uk-width" placeholder="###-###-####" pattern="^[2-9]\d{2}-\d{3}-\d{4}$" required /> <input type="text" id="i_email" name="email" class="uk-width" placeholder="Email" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" maxlength="250" /> <input type="text" id="i_zipcode" name="zipcode" class="uk-width" placeholder="Zip Code" pattern="\d{5}-?(\d{4})?" /> <select name="scope" id="i_scope" class="uk-width" multiple required> <option value="" disabled>Representing...</option> <option value="residential">Residence</option> <option value="commercial">Business</option> </select> <textarea name="message" id="i_message" class="uk-width" placeholder="Message" rows="4" required></textarea> <input type="submit" name="submit" id="submit" class="uk-button uk-width" value="Send" /> <!--button type="submit" name="submit" id="submit" class="uk-button uk-width">Send <i class="fa fa-send"></i></button--> </div> </form> </div> Above is from contact.php template partial included in my _main.php output, which includes this script in the body closing: $(function() { $('.error').hide(); $("#inquire").submit(function(e) { e.preventDefault(); // validate and process form here $('.error').hide(); //var name = $("input[name='name']").val(); var name = $("input#i_name").val(); if (name == "") { $("label#name_error").show(); $("input[name='name']").focus(); return false; } //var phone = $("input[name='phone']").val(); var phone = $("input#i_phone").val(); if (phone == "") { $("label#phone_error").show(); $("input[name='phone']").focus(); //return false; } //var email = $("input[name='email']").val(); var email = $("input#i_email").val(); //var zipcode = $("input[name='zipcode']").val(); var zipcode = $("input#i_zipcode").val(); //var scope = $("select[name='scope']").val(); var scope = $("select#i_scope").val(); if (scope == "") { $("label#scope_error").show(); $("select[name='scope']").focus(); //return false; } //var message = $("textarea[name='message']").val(); var message = $("textarea#i_message").val(); if (phone == "") { $("label#message_error").show(); $("textarea[name='message']").focus(); //return false; } var dataString = 'name=' + name + '&phone=' + phone + '&email=' + email + 'zipcode=' + zipcode + 'scope=' + scope + 'message=' + message; //alert (dataString); return false; $.ajax({ type: "POST", url: "./inquiries/", data: dataString, success: function() { $('#wrap_form').html("<div id='inquired'></div>"); $('#inquired').html("<h3>Inquiry submitted!</h3>") .append("<p>Thanks, " + name + "! We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#inquired p').append(" <i class='fa fa-check' style='color:green'></i>"); }); } }); //return false; }); }); I tried submitting directly to a php file in templates which is forbidden so I saw that this worked for someone and no longer get an error; the form seems to submit from the frontend, however nothing results from it in the admin. Here's my inquiries.php template file: <?php $mailTo = $pages->get('/contact/')->contact_email; // sanitize form values or create empty $data = array( 'name' => $sanitizer->text($input->post->name), 'phone' => $sanitizer->text($input->post->phone), 'email' => $sanitizer->email($input->post->email), 'zipcode' => $sanitizer->text($input->post->zipcode), 'scope' => $sanitizer->text($input->post->scope), 'message' => $sanitizer->textarea($input->post->message), ); $error = ''; if($input->post->submit) { $up = $pages->get('/inquiries/'); $up->title .= "+"; $up->save(); $msg = "Name: $data[name]\n" . "Phone: $data[phone]\n" . "Email: $data[email]\n" . "Zip Code: $data[zipcode]\n" . "Job Type: $data[scope]\n" . "Message: $data[message]"; $p = new Page(); $p->title = date('Y/m/d H:i:s'); $p->parent = $pages->get('/inquiries/'); $p->template = 'inquiry'; $p->message = $msg; $p->save(); } I added the inquiries title appendage bit just for testing, but it just doesn't happen. How can I make this work/better test?

I'm looking for the module(s) that contain the code used to define and process forms. I don't see anything in the dist/wire/* directories that has 'form' in the name. Does anyone know where this code is?

Hi Folks, I've got a site with some contact and quote forms which get sent to my client and get saved as pages so the client has a record of the submitted forms. He'd like to analyse some of the form data. So for instance, there's a field that asks 'where did you hear about us?' with select options like 'Advertisement', 'Google', 'Recommendation', 'Magazine', etc. I'd like provide a page so the client could see how many respondents chose 'Google' vs 'Advertisement', etc. A simple tally would be fine, but then I could calculate percentages, maybe chart the results, etc. My first thought was to use $pages->count('selector') to count the pages with a certain answer. I'd know what percentage that was by comparing it to the total of saved pages for that form. But would I need to do this for each question? Is there a better way to tally/count all the answers for a given field?

Greetings Everyone, ************************************************* ************************************************* EDIT NOTE: This post started as a work-in-progress discussion as I was working out the elements of a successful form. After contributions from participants in this discussion, the code below has been tested and works well. You can use the code as shown below in your ProcessWire templates! Feel free to follow up with additional quesations/comments! ************************************************* ************************************************* I have successfully built front-end forms with ProcessWire to add pages via the API. It works great -- until I had to include image uploads along with the "regular" form fields. Then it temporarily got a bit complicated. In this discussion, I show how to handle front-end submissions in ProcessWire with the goal of allowing us to create pages from custom forms. I then go a step further and show how to use the same form to upload files (images and other files). I'm hoping this discussion can illustrate the whole process. I know a lot of people are interested in using ProcessWire to do front-end submissions, and my goal for this discussion is to benefit others as well as myself! First, here's my original contact form (no file uploads): <form action="/customer-service/contact/contact-success/" method="post"> <p><label for="contactname">Name:</label></p> <p><input type="text" name="contactname"></p> <p><label for="email">E-Mail:</label></p> <p><input type="email" name="email"></p> <p><label for="comments">Comments:</label></p> <p><textarea name="comments" cols="25" rows="6"></textarea></p> <button type="submit">Submit</button></form> And here's the "contact-success" page that picks up the form entry to create ProcessWire pages: <?php // First, confirm that a submission has been made if ($input->post->contactname) { // Save in the ProcessWire page tree; map submission to the template fields $np = new Page(); // create new page object $np->template = $templates->get("contact_submission"); $np->parent = $pages->get("/customer-service/contact-us/contact-submission-listing/"); // Send all form submissions through ProcessWire sanitization $title = $sanitizer->text($input->post->contactname); $name = $sanitizer->text($input->post->contactname); $contactname = $sanitizer->text($input->post->contactname); $email = $sanitizer->email($input->post->email); $comments = $sanitizer->textarea($input->post->comments); // Match up the sanitized inputs we just got with the template fields $np->of(false); $np->title = $contactname; $np->name = $contactname; $np->contactname = $contactname; $np->email = $email; $np->comments = $comments; // Save/create the page $np->save(); } ?> This works great! After submitting the form, we go to the "Success" page, and new submissions show up in the ProcessWire page tree right away. Excellent! Now I need to add a photo field. I altered the above form so it looks like this: <form action="/customer-service/contact/contact-success/" method="post" enctype="multipart/form-data"> <p><label for="contactname">Name:</label></p> <p><input type="text" name="contactname"></p> <p><label for="email">E-Mail:</label></p> <p><input type="email" name="email"></p> <p><label for="comments">Comments:</label></p> <p><textarea name="comments" cols="25" rows="6"></textarea></p> <p>Click the "Select Files" button below to upload your photo.</p> <input type="file" name="contact_photo" /> <button type="submit">Submit</button> </form> And here's the updated "contact-success" page: <?php // First, confirm that a submission has been made if($input->post->contactname) { // Set a temporary upload location where the submitted files are stored during form processing $upload_path = $config->paths->assets . "files/contact_files/"; // New wire upload $contact_photo = new WireUpload('contact_photo'); // References the name of the field in the HTML form that uploads the photo $contact_photo->setMaxFiles(5); $contact_photo->setOverwrite(false); $contact_photo->setDestinationPath($upload_path); $contact_photo->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); // execute upload and check for errors $files = $contact_photo->execute(); // Run a count($files) test to make sure there are actually files; if so, proceed; if not, generate getErrors() if(!count($files)) { $contact_photo->error("Sorry, but you need to add a photo!"); return false; } // Do an initial save in the ProcessWire page tree; set the necessary information (template, parent, title, and name) $np = new Page(); // create new page object $np->template = $templates->get("contact_submission"); // set the template that applies to pages created from form submissions $np->parent = $pages->get("/customer-service/contact-us/contact-submission-listing/"); // set the parent for the page being created here // Send all the form's $_POST submissions through ProcessWire's sanitization and/or map to a variable with the same name as the template fields we'll be populating $np->title = $sanitizer->text($input->post->contactname); $np->name = $np->title; $np->contactname = $sanitizer->text($input->post->contactname); $np->email = $sanitizer->email($input->post->email); $np->comments = $sanitizer->textarea($input->post->comments); $np->save(); // Run photo upload foreach($files as $filename) { $pathname = $upload_path . $filename; $np->contact_photo->add($pathname); $np->message("Added file: $filename"); unlink($pathname); } // Save page again $np->save(); ?> <p>Thank you for your contact information.</p> <?php return true; } else { ?> <p> Sorry, your photo upload was not successful...</P> <?php } ?> Replace the field references with your own field names, make sure to change the various paths to match yours, and change the various messages to be what you need for your project. Read the entire discussion to see how we worked through getting to the solution shown above. Thanks, Matthew

Hi folks, I'm scoping out a job and as part of the site they would like an 'Events' section. I have done quite a few of these which vary in complexities, but they are a client that has come from Wordpress and mentioned a 'Events Manager' plugin (http://wp-events-plugin.com/) which they used mainly for the following: Allow online booking Create reports about attendees Send group reminders/confirmation I'm wondering if there's anything that ProcessWire can do that is similar? I guess, per event, the user would select a number of tickets, include their name and perhaps some other information, then it would store this in the admin area somewhere – perhaps a form connected to a specific event? Then they could export this data to see everyone who is attending etc? Group reminders/confirmation I'm unsure about but any help with this would be appreciated. Thanks! R

Hi everyone! I'm building some Liferay portlets for a call center and I'm looking for form engines like Alpaca Forms which is the one I'm currently using (and fits my needs), but I would only like to ask around if someone knows of a similar alternative when it comes to generating forms on the front.

We have a client with a site running ProcessWire. We have encountered some issues with a form a previous developer on our team made. Since we are extremely busy and need a helping hand, I am reaching out to the community. Essentially the form we had is an order form running on Form Builder. We chose form builder because of the ability to rapidly develop forms and store data. However we can move away from it for the order form. Basically here is what we need: An order form running on PHP or FormBuilder Form must output an order number and send an email to various emails with the order details. Also need an auto responder email with the order details and business information from the client. The order number must increment. Once the form is submitted, the results need to display on the same page with a print button. This form must work on all browsers! Need this built today or tomorrow. Will pay immediately and we will keep work coming your way if all works well. PM for the site details.

Hello. I need to create a page select type of field in a frontend Form The form is created using API: $formJob = $modules->get("InputfieldForm"); $formJob->method = "post"; ... And each field is created and added to the main form Object using corresponding Inputfield(X) module $field = $modules->get("InputfieldText"); $field->placeholder='NAME'; $field->attr('id+name','name'); $field->required = 1; $field->maxlength = 150; $formJob->append($field); The question is: How can I use the PageAutocomplete module in my form? I have tried adding a field as in the previous example: $field = $this->modules->get("InputfieldPageAutocomplete"); And setting the corresponding variables. Even included some JS files from Core: wire/modules/JqueryCore/jqueryCore.js ,wire/modules/JqueryUI/JqueryUI.js and the module JS file itself. But nothing happens, no ajax call, no jquery UI initialization, nothing. It is possible to use this inputfield outside the admin area/backend? Any help is appreciated.

Hello, I am building a dynamic frontend form from fields of a page, following Soma's great gist example. The form is working fine, except for multi language values. After this part of the code $form->processInput($this->input->post) when I loop over the form fields, I don't know how to access the multi language values of a field foreach($form as $field) { // how to get multi lang values here } What I tried is not working foreach($form as $field) { if($field->type instanceof FieldtypeLanguageInterface) { foreach ($languages as $lang) { $langval = $editpage->$field->getLanguageValue($lang); $editpage->$field->setLanguageValue($lang, $langval); } } else { $editpage->set($field->name, $field->value); } } Actually the $field->type returns just "text" for a PageTitleLanguage field. var_dumping the $field reveals that the language values are stored deep inside the object like 'value1023' => string 'Testworkshop2' (length=13) 'value1032' => string 'Testworkshop2 Englisch' (length=22) So how would I access those other than pulling them directly from $this->input->post?

Hey guys, I'm really really desperate for help at this stage, for my own sanity mostly. I've been trying to set up a form that requires several fields one of which is a file upload, the user can upload max 10 files with extension jpg/png/jpeg and these are sent to the admin email as attachments. Currently this i am using the InputfieldFile module, I have moved it over to /site/modules because hooking the return html wasn't enough for my needs. So basically I have this. $images = $modules->get("InputfieldFileCustom"); $images->attr('label', "Upload your images"); $images->required = 0; $images->maxFiles = 10; $images->attr('id+images','image'); $images->attr('placeholder','no file selected'); $images->attr('extensions','jpg'); $form->append($images); I expected output that would allow me to upload and delete files. Except right now my biggest issue is the fact that the remove button isn't being displayed because the ___renderItem method isn't being run and I have no idea how to make this work. I'm going to have to do a lot of fun stuff with the markup for the majority of the render methods but I can't do anything until I get the remove button to display. I also made a inputfieldfilecustom.js which is imported on the page. I've renamed all instances of InputFieldFile to InputFIeldFileCustom (in both js and module) Begging for help around now. it would be incredibly appreciated if someone can give me any direction.