Custom Fields
Re-Envisioned
Support MB Frontend Submission How to create a form with just a few fields of a Fields Group, without posting

  • Creator
    Topic
  • #23639
    Resolved Beda Schmid
    Participant

    Hello,

    I am fresh to MetaBox and digging into the plugins features.

    Following this tutorial, to get familiar with everything, I was able to build everything described in the Tutorial, thanks for this, its great.

    However, now extending what I learnt in the tutorial, I stumbled on an issue.

    In my single room post, I plan to add a calendar input for the guest to select a date, and a button Book Now.

    Setting a date range in the calendar and pressing Book Now will/should lead to a booking page, where the user will have to fill out the entire form (similar to the form shown int your tutorial).

    I hoped, I could use the same Form shortcode but specify which fields of the Bookings Fields Group to display (only check in date), and submit the form without saving it's data to the database.

    However it seems not possible to display only one field of an entire Group with the same form (unless with CSS, etc, which is not what I want), so I create a new Group with just the date field I need for this Form.
    Also it seems the form always creates a post even if I remove any post from the assignment of the group.

    In my use case however, the form should lead to the booking page, perhaps passing the field value as URL param, or else to the next form, where the user then indeed will book for real.
    But it shouldn't save data yet, and it should display only one field of the Group.

    Hoping this makes sense, and perhaps someone has a hint for me where to proceed from here?
    I am also OK with code (which I can craft myself) but I wonder if there is some inbuilt or helping way to achieve this with MetaBox

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #23647
    Long Nguyen
    Moderator

    Hi Beda,

    The Frontend Submission form is an extension that lets developers create custom forms with custom fields so users can submit posts on the front end of a website. It only supports to show all custom fields in a meta box, not a field in a group so you can create a new meta box (Field Group) to show one field.

    And of course, it will create a post after clicking the button Submit. If you do not want to create a post, the hook rwmb_frontend_before_process will help you to prevent the form fires to save/update a post.

    Get more details in the documentation https://docs.metabox.io/extensions/mb-frontend-submission/#form-actions.

    #23666
    Beda Schmid
    Participant

    Thanks Long for confirming!

    I’ll use the hooks.

    Regards, Beda

    #23667
    Beda Schmid
    Participant

    Ah, forgot:
    Is it possible to pass the values from first form to second form?

    Or, in other words, how’d go for populating form fields dynamically according a previously submitted form?

    I read only the post ID can be set by url param.
    However it must be possible somehow to populate other fields dynamically also?

    Thanks!

    #23670
    Long Nguyen
    Moderator

    Hi,

    The form of MB Frontend Submission does not support to pass the value to other forms. And the first form with the date field and Book Now button does not save the data (post and custom field) so it very difficult to set the param to URL by field value.

    I think you can get the field value by JavaScript and set it to the redirect URL. This topic from StackOverFlow might help you to do https://stackoverflow.com/questions/42376287/how-to-add-or-replace-a-query-parameter-in-a-url-using-javascript-jquery/42376792.

    #23733
    Beda Schmid
    Participant

    In case anyone stumbles on the same issues, this is how I solved it:

    1. First form includes only a few fields visibly
    2. It has a Custom Redirect Hook applied that does two things: Redirect to a new URL and passes certain input values to the URL, as well it deletes the post just created, as we don't want it to be saved just yet
    3. On the redirect target the final full form will allow to complete the process, and is populated by the available url parameters.

    The code:
    For the redirect and delete post actions:

    
    add_filter( 'rwmb_frontend_redirect', 'my_redirect_custom_hook', 10,2);
    function my_redirect_custom_hook($url, $config){
        if( $config['id'] == 'my-metabox-slug' && startsWith( $_POST['_wp_http_referer'] , '/referrer-base/' ) ){
    
            $url = 'site.com/target/?url_param_one=' . $_POST['metabox-field-one'] . '&url_param_two=' . $_POST['metabox-field-two'];
    
            wp_delete_post( $config['post_id'], true );
    
        }
    
        return $url;
    }
    //Helper Function since only PHP8 and above will support natively str_starts_with()
    function startsWith( $haystack, $needle ) {
         $length = strlen( $needle );
         return substr( $haystack, 0, $length ) === $needle;
    }
    

    Then on the target page (final form), read the URL arguments with JS and put them in the determined fields:

    
    jQuery( document ).ready(function($){
        function querySt(ji) {
    
            hu = window.location.search.substring(1);
            gy = hu.split("&");
    
            for (i=0;i<gy.length;i++) {
                ft = gy[i].split("=");
                if (ft[0] == ji) {
                    return ft[1];
                }
            }
        }
        var url_param_one = querySt("url_param_one");
        var url_param_two = querySt("url_param_two");
        document.getElementById('metabox_field_form_id_one').value = url_param_one;
        document.getElementById('metabox_field_form_id_two').value = url_param_two;
    });
    

    It will need some more care in sanitising the url params, and of course, change the slugs and ids to the specific use cases.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.