Support

Account

Register Login

Home › Forums › Front-end Issues › acf_form_head and google map form inside a modal

Solving

acf_form_head and google map form inside a modal

  • Hello!

    So, I am in a bit of a dilemma here and wanted to ask in the community for suggestions that might help me solve my problem.

    Currently for my webapp, I am only using acf_form_head() when required – that is I load it in specific pages where forms are used.

    Now, I have to create an option that includes a google map to specify ‘current location’ and want it accessible through an option at the header – the common tactic for this sort of thing is to place it inside a modal. I don’t want the user to be redirected to a different page – which would be my last resort.

    The problem is, that in order to use it, I must use acf_form_head EVERYWHERE, which, tbh I am a bit afraid of it – although I am not certain if I should. I am afraid that this could trigger unwanted behavior in non-acf forms.

    So, I am thinking something like the following:
    – Ideally, I would be able to just load the google map with its input form, export the lat, long through js and save through a custom function – this is irrelevant to ACF I guess, but was wondering if I can somehow use what’s already built in.
    – Create a separate page and load the through an Iframe. However, I am not sure if loading acf_form_head() there would cause any issues to any forms outside of it, eg like trigger a different form, etc. I am wondering if there’s a way to ‘unload’ the acf_form_function.

    So, any pointers, on the best way to achieve what I am after?

    Any suggestions or pointers are welcome.

  • As far as using acf_form_head() everywhere, this should not create any interference with other forms on the site. ACF only does something if the $_POST[‘acf’] array is populated and this will only happen when submitting an acf form.

    As far as not refreshing goes, I would look into an AJAX solution for form submission. This might be a place to start.
    https://support.advancedcustomfields.com/forums/topic/frontend-form-post-via-ajax/

  • John, thank you for the fast reply.

    So, you suggest that it would be safe to use acf_form_head() inside header.php?

    What would happen in cases where the map could be on top of a page that already includes its own form?

    The AJAX solution seems interesting, but it comes after resolving the main issue.

  • Separate forms are submitted separately. Only the content inside of each <form></form> element is submitted.

  • John, thanks for the pointers!

  • John.. or anyone else…?

    Is there a way to strip acf_form_head() down to the basics required just for google map? Because it loads all kinds of things like datepickers, etc, etc..?

    I managed to make the functionality required, but I find it to be too heavy loading all this stuff. :/

  • I think that’s been asked before and I don’t think you can. I forgot that ACF does add a lot of scripts that are needed to make the fields work.

    My suggestion would be to add acf_form() to every page and then check to see if it’s going to be needed in some way, that that might be complicated.

    You’d have to figure out a way before the the header is loaded, or at the top of header.php to see if a form will be included.

  • Thanks again for your interest John!

    Actually, I found my way through this problem and sharing here, in case it helps anyone.

    Since I wanted this map to be set globally from the header, then it would require the acf_form_head() to be always loaded.

    It took some effort, but I ended up with this solution:

    – Created a separate page
    – Added the google map form and styled it to stretch and occupy the whole screen
    – Hid all other elements (header, footer, etc)
    – Loaded the above page with jquery as an iframe and styled the iframe itself to look like a modal
    – After the form submission I look for the $_GET[‘updated’] and if true, I load an inline script to remove the modal

    This way, I don’t need to leave my current page, nor do I have to lead the acf_form_head() where not needed.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.