In this tutorial we’ll see how to add forms to your app. Here we’ll implement a contact form but any other custom form sending data from the app to the server can be implemented following the same steps.

There are many form plugins for WordPress out there but unfortunately we did not find one yet that is designed to send forms from somewhere else than the website itself. If some of you know a WordPress form plugin that would allow to submit its forms from an external Javascript based web application, don’t hesitate to share it in the comments!

So for now we have to implement the app form feature “by hand” in the app. To do so, here are the main steps that we will follow in this tutorial:

  • create a custom app screen where we will display the contact form
  • handle the form submission in Javascript
  • retrieve sent form data on server side and process it (send an email to site admin)

This tutorial is based on Q for Android WP-AppKit default theme. A working example including all the code used here can be found here on github. More specifically, the files used in this tutorial are: : contact.html, forms.css, forms.js, forms.php, funtions.js, menu.html.

Create a custom app screen for our contact form

Note: the contact form screen that we are going to create here is specific to the app. It is not related to a WordPress post or page. You don’t have to add any component to your app to make it work, everything happens directly in your app theme (wp-content/themes-wp-appkit/[your-app-theme]).

Form template

First let’s add a new “contact.html” template to the app theme, where we define the HTML for the contact form:

This contact form has firstname, lastname, email and message fields. Of course you can remove or add fields according to your needs. If you do so, simply don’t forget to reflect those changes in the forms Javascript variable that we will define in js/forms.js later in this tutorial.

Note the id (contact) and the class (app-form) attributes of the form element. They must be named this way to be recognized in the Javascript processing that’s coming later.

Some styles for the form

While we’re at it, add some CSS so that the form displays properly. Create a css/forms.css file with the following rules:

And reference this new stylesheet forms.css in the head.html template:

Add this new contact screen to the App

Create a js/forms.js file where we will handle the Javascript logic four our forms.

First, tell the App that we have a new “contact” screen:

Then plug this new Javascript file into the App engine by requiring it in js/functions.js (see highlighted line):

And finally add our new contact screen to the App’s menu so that we can access it easily: add the following highlighted line to the menu.html template:

Test it!

If everything went well, if you preview your app now you should see a “Contact” entry in your app menu and when clicking on it, your contact form should display.

Of course the form itself is not working yet, let’s bring it to life now!

Handle form submission

Now we’ll see how to submit our form data to the server.

App side (Javascript)

In the previously created js/forms.js file, add the definition of the app forms:

If you removed or added other fields in your HTML form (in contact.html template), don’t forget to adjust the fields part.

Here we only have a contact form (the contact entry in the forms Json Object) but any other forms could be added here. The form field names defined here (firstname, lastname, etc) must correspond to the ones defined in the contact.html template. Feel free to customize your contact form’s messages.

Then we add the form submission Javascript logic: get the form data and send it to the server. You should not have to modify those lines, this is an automated logic based on the forms variable defined above. Still in js/forms.js, add:

Server side (PHP)

Finally let’s retrieve on server side the data sent from the app, and send an email to the site admin, containing data from the form.

Create a php/forms.php file in your app theme and put the following code in it (of course if you added or removed form fields in your contact.html template, don’t forget to reflect the changes here too):

Here we simply send an email to the site admin including the data submitted from the form, but feel free to add any other PHP treatment that you would see fit when the form is submitted following (or in place of) the wp_mail() function.

And that’s it, you should now be able to submit your contact form in the app and see that you receive and email on the site admin’s mailbox when you do so 🙂

Again, all the code of this tutorial can be found directly here on github: contact.html, forms.css, forms.js, forms.php, funtions.js, menu.html.

You can now go create cool forms in your apps, and don’t hesitate to post any feedbacks in the comments!

Published by Mathieu on June 17, 2019

Freelance Senior Web Developer, WordPress since 2009, JS/Backbone since 2012, Custom Back-End devs, WebApps and Plugins for clients and the community.

4 Comments

  1. Merci Mathieu pour ce tuto, par contre le titre dans le app-header ne s’affiche pas. Quand je passe d’un Ă©cran a celui du formulaire sa met le titre du prĂ©cĂ©dant Ă©cran.

    Reply
  2. J’ai ajouter sa a la ligne 379 du fichier function.js

    Fichier d’origine

    Problème corriger

    Reply
    • Hi KastOneR, thanks for your feedback.

      I translate your question:

      When the contact form screen is displayed, the app header title does not change, it stays the same as the previous screen displayed.

      This is a known issue of the Q-for-Android theme indeed: custom screens titles are not handled properly.

      To solve that, here’s what you can do: in functions.js replace:

      if (current_screen.screen_type=="page") {

      by

      if (current_screen.screen_type=="page" || current_screen.screen_type=="custom-page") {

      We will embed this fix in the next version of the theme.

      Reply
  3. merci !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us