Creating a simple contact form with RSForm! Pro

Forms are an integral part of many websites. From the ubiquitous contact form, to login and registration forms, to … well, any other situation where you want to allow the visitor to submit data in any form. In this article we’ll explain how to create and publish a simple form in Joomla using the extension RSForm! Pro.

  • Should you upgrade your website to Joomla 4 or 5 … or maybe even migrate to a different CMS? We can help you decide. Contact us for a free chat!

    Choosing a method to build our form

    One of the many reasons we love to work with Joomla is it’s modularity and customizability.

    There are a vast number of extensions available with which you can greatly extend your website, and no matter the challenge you’re facing, typically there are a variety of equally valid approaches you can take.

    Forms are no exception: there are several common methods for building a form in Joomla. Today, we’ll be working with the extension called RSForm! Pro.

    Installing RSForm on your site

    After downloading RSForm! Pro, go ahead and install it on your Joomla site. This should only take a minute.

    Installing RSForm on your site

    After downloading RSForm! Pro, go ahead and install it on your Joomla site. This should only take a minute.

    If you have any troubles downloading and installing RSForm! Pro, check out our article on How to find & install a Joomla extension.

    Okay, so we’re ready! You’ve installed the extension and you’re almost unbearably excited about building your first ever form.

    Creating a form with RSForm! Pro

    Let’s fire up RSForm! Pro for the first time. You can access it by logging in to the administrator section of your site and navigating to Components -> RSForm! Pro.

    RSForm! Pro main dashboard.
    RSForm! Pro main dashboard

    Click on Manage Forms and you will be presented with a list of forms currently stored on the site. On first installation you should see two example forms listed here.

    List of forms inside RS Form component.
    List of forms

    To create a new form, click on the big green New button.

    Once you’ve done so, you’ll be confronted by a somewhat complicated screen. Don’t panic! … upon closer inspection, the screen is actually pretty straightforward.

    Form Fields and Form Properties

    List of RS Forms fields.
    Our first form

    You should now see two main tabs, Form Fields and Form Properties.

    Under Form Fields you can add and configure the fields that you need for your form. Common field types you might be familiar with are text boxes, dropdowns, checkboxes, radio buttons, submit buttons and date pickers.

    The tab Form Properties is used to fine-tune how the form works: here you can change the name of the form, configure messages to be shown after a successful submit, add custom CSS classes, and much more. There are a lot more options for you to tweak.

    It is all very versatile, and the possibilities are endless … but let’s focus on our simple form.

    Adding fields to our form

    Let’s add some fields to our form.

    Go back to the Form Fields tab and click on Free Text. In the field Name enter a name that you’ll find easy to remember. This value is used within RSForm! Pro only to make it easier to know what’s what. I’ve entered some simple intro text.

    Adding a Free Text field inside RS Forms component.
    Adding a Free Text field

    Now let’s add a couple of fancier fields:

    Adding a Radio Group inside RS Forms component.
    Adding a Radio Group

    Let’s keep the momentum with some good old checkboxes:

    Adding a Checkbox Group inside RS Forms component.
    Adding a Checkbox Group

    After adding a few more fields and playing a bit with them, we need that final touch. What would a form be without a ‘SUBMIT’ button? Just a collection of fields. Let’s add a submit button and finalise our form.

    Adding a Submit Button in RS Forms component.
    Adding a Submit Button

    After adding the button, save your work. Click Save and feel rightly proud that you have finished your first form!

    Finished form in backend.
    Finished form – Backend

    Previewing our form

    Now the form is finished, let’s take a look at what we’ve done. Click the Preview button and a new browser window will open with a previewed version of your form.

    Previewing the form is a quick and easy way to check out how your form will look to the user but you’ll still need to publish the form on the website for your users to see it.

    Finished form on the frontend.
    Finished form – Frontend

    Publishing the form on your website

    You’re very proud with your new form. And you should be!

    There are several ways of publishing a form on your site, the easiest of which is to create a new menu item and point it at the form.

    To do so, you’ll need to:

    1. Create a new menu item
      Publishing RS Form as menu item.
    2. Set it up
      Add the title of your form
      Add the alias (URL)
      Choose ‘Form’ as the Menu Item Type
      Choose your form under ‘Form’
    3. Save!

    Congratulations, your form is now visible on your website!

    Embedding the form within an existing page

    1. Download the RSForm!Pro Content Plugin (available on RSJoomla)
    2. Install it and enable the plugin (for detailed info on installing Joomla extensions, check out How to find & install a Joomla extension)
    3. Find the ID of your form
      Showing where RS Form ID can be found.
    4. Go in the article you want to embed the form in and add {rsform id}
      Embeding the form in the article as {rsform id}.
    5. Refresh your page and rejoice!
      RS Form on the frontend.

    This was a crash course on making forms in Joomla. We encourage you to play around and bring your form game to a new level.

    Forms can be tricky. Having problems with them is nothing to be ashamed about…
    We are a Joomla agency and we have made various forms. If you have problems with forms, Contact us and we will help.

    Further Insights