Using RS form Pro to create contact forms

To get started setting my site up with RS form Pro, Iʼll go to rsjoomla.com and purchase a copy of this extension.

Iʼll click on this link here, and go to a page where I have a couple different options.

This one on the left will allow me to use RS form pro on one site and will give me lifetime support.

The one on the right gives me a the ability to use RS Form Pro on an unlimited number of domains with support for six months or one year.

Iʼll buy the version for just one site.In

Once you go through the payment process youʼll be sent a link in your e-mail to come back to this site and download a copy of RS form pro.

When you come back to the site to login, go to My Account and youʼll see the login form on that page.

Once you login youʼll see a page like this.

Then click on “View my license codes” and youʼll see a page where you will enter in a domain name where you are going to use RS form Pro.

Once you enter in the domain name youʼll be able to get the license key, which you will need to enter later in the extension dashboard within joomla.

Iʼll show you how to do this in a bit.

After you have done that, you can click on View My Downloads and be taken to this page where you can download the various packages for RS form Pro.

For now Iʼm only going to be downloading three different packages.

First Iʼll download the component for Joomla 1.5, and then Iʼll download the module version of RS Form pro, which will allow me to put forms in module positions rather than having them appear in the main body of the page where the component will put the forms.

And lastly, Iʼll download this plug-in that will allow me to put in a re-captcha form within any of the forms I create with RS form Pro.

1

RS form Pro comes with its own built-in captcha component, but I find that the re-captcha form works better.

If youʼre not familiar with what a captcha form is, itʼs a small form where people have to enter in some odd looking numbers or letters that they see in order to prove that they are human and not a spambot.

If you have forms on your site without the protection of some kind of captcha form, you will definitely eventually see spam coming through your forms.

So Iʼll go ahead and download the component, module, and the plug-in for the re-captcha form.

Now Iʼll go into the backend of my site and install all three of these things.

Iʼll go to Extensions, then select Install/uninstall.

Then Iʼll click on Browse, navigate to the location of the component zip file that I just downloaded, and when I find it Iʼll double-click on it, and then click on Upload and install.

And then Iʼll repeat the process for the module and the plug-in.

Once Iʼm done installing all three of these, Iʼll go to Components and then select RS form pro.

Iʼll first show you how to configure the component and make a contact form using it.

Then Iʼll show you how to insert a re-captcha validation form into this contact page.

And finally Iʼll show you how to create a form that appears in a module position, using the RS form Pro module.

This page is where youʼll need to enter in your license key in this field right here.

If you donʼt enter your license key you wonʼt be able to get updates, or be able to insert the recaptcha validation form.

Iʼll go ahead and insert my license key and click on Update Code.

Once Iʼve done that Iʼll see this big green bar here that lets me know everything is good to go.

Now Iʼll go to Components and then Manage Forms.

2

Youʼll see an example form here and you can check it out if you like by clicking on the title of this form to open it.

For now Iʼm simply going to select it and delete it.

Then Iʼll click on New, and this brings me to the area where I can build a form.

The items in this left menu are called components, and each do a slightly different thing.

In the process of building a simple contact form, youʼll see what some of these do, and for the ones that I donʼt show you, you can experiment with them yourself.

To start building this contact form Iʼll put in a message at the top of the page by clicking on Free Text.

After I click on it ,in this left column some options are available to me to fill in the content for this particular component of the form.

Iʼll need to give this component a unique name, and Iʼve found that it works best to not use any capitals or underscores or spaces.

Youʼll see how the name of these components is used later, but they are pretty important.

So Iʼll name this first one, and then Iʼll put in the text that I want to have appear at the top of the contact page.

[Thank you for your interest in Zenscaping. Please use either the form below to send us a message, or simply click on this link to send us an email with your own email program.

Thank You!]

Now, before I save this Iʼm going to add in some code that will allow people to click on a link and use their e-mail program thatʼs on their computer to send an e-mail.

I find that itʼs nice to offer people two different ways to send an e-mail.

They can use either the form on this page, or they can click on a link and send an e-mail directly with their own e-mail software on their computer.

In the text that Iʼve entered in for this part of the contact form youʼll see that I mention that people can simply click on this link to send us an e-mail.

So Iʼm going to turn the words “this link” into a mail-to: link.

Hereʼs how I go about doing that.

3

To the left of the word “this” Iʼll put my cursor and Iʼm going to create an anchor tag with a mail-to link in it.

Iʼll start by typing a left angle bracket, then the letter a, then href and an equal sign, then an open quote, then mailto colon, and then Iʼll put in the e-mail address that I want the e-mail to be sent to followed by a question mark, then the word “subject”, then an equals sign, then after the equal sign I can type in whatever subject line for the e-mail I would like to be automatically entered in their e-mail software.

Iʼll just type in the word “hello”.

And then right after that word Iʼll type in the closing quotation mark, and then a right angle bracket.

If you would rather not have a subject automatically entered for them, you can simply not put in everything after the question mark up to the closing quotation mark.

Then on the right side of the word “link” Iʼll put my cursor, and then type a left angle bracket, then a forward slash, then the letter “a”, then a right angle bracket.

[<a href="mailto:bill@zenscaping.com?subject=Hello"></a>]

One of the reasons that I showed you how to put in this anchor tag right into this box here is so that you know that you can put HTML directly in here if you need to.

And now that thatʼs all set Iʼll click on save.

Now I can see the message at the top of the contact form.

Next Iʼll create a field where people can enter in their name by clicking on Textbox.

Iʼll give this component a name, and then the Caption is what will appear next to the field. Iʼll enter something for that now.

If you like, you can make this field required by selecting yes in this drop-down menu here.

You can also change the size of the field by entering in a different value in this field.

I find that itʼs helpful to increase the size of these fields a bit to give people a little more room. So Iʼll change the size of this field to 30.

Iʼll leave everything set as it is right now and simply click on Save.

4

Next, Iʼll create a field for people to enter in their email address by clicking on Textbox again.

Iʼll enter a name for this component of the form, then give it a caption, and Iʼll change the size to 30.

And then Iʼll click on Save.

You can see that as Iʼm adding components to this form Iʼm creating, Iʼm getting a preview of the form here in the middle.

If I want to move the different components of the form around, I can do so by using these arrows, or by changing the Ordering number and clicking on the tiny disk icon at the top to save the new order.

Now Iʼll add a field for people to enter in their message subject by clicking on Textbox again.

And Iʼll give it a name, a caption, change the size to 30, and then Save it.

Now Iʼll put in a field where people can enter in their message, or email, by clicking on Textarea. This will create a bigger field for people to type more into.

Iʼll name it, give it a caption and then down here in the Additional Attributes, Iʼm going add a little html that will cause the text to wrap in this box and will also cause a scroll bar to appear if people enter in more lines of text than can fit in this small box.

Then Iʼll click on Save.

Now, if you like, you can change the width of this message field to match the width of the fields above it.

I usually leave it like this to give people a bigger area to see what theyʼre typing.

If you want to change the width, simply click on this edit icon here and it will open up the component again for you to change anything.

Next Iʼll put in the reCaptcha component, which will be created by that reCaptcha plugin that I installed earlier.

Remember that you wonʼt be able to see this reCaptcha as an option until you put in a valid license code into the main dashboard page of RS Form Pro.

5

Before I can put in a recaptcha component into this form Iʼm building, Iʼll need to get a reCaptcha key from recaptcha.net and enter it into the proper place in the RS Form Pro admin panel.

Iʼll go to that site now and click on Use reCaptcha on your site, then Iʼll click on Sign Up Now.

Iʼll enter in the info on this page and click on Sign Up Now at the bottom.

On this page, Iʼll enter in the domain name of my site and click on Create Key.

Now, Iʼll need to copy and paste this public and private key into the appropriate place in RS Form Pro in order to enable reCaptcha to work with RS Form Pro.

Iʼll first highlight the Public key and copy it to my clipboard by pressing command and C on a mac, or Control and C on a PC.

Then Iʼll go back into Joomla and RS Form Pro and before I paste in this key, Iʼll click on Apply to save the changes to the form Iʼm building.

Then Iʼll click on Configuration, and then select the ReCaptcha tab.

Iʼll put my cursor in the Public Key field and paste it in by pressing Command and V on a mac, or Control and V on a PC.

Then Iʼll go back to the reCaptcha site and get the private key by highlighting it and copying it, then Iʼll come back into RS Form Pro and paste it into the Private Key field.

I can choose what theme I want to use for the reCaptcha component in this drop down here. Iʼll leave it set to red.

And then Iʼll click on Save.

Now Iʼll go back to the form I was building by clicking on Manage Forms, and then Iʼll click on the title of my form to open it up. I havenʼt given it a title yet, so it just says “no title” for now.

To add a reCaptcha component, Iʼll click on the reCaptcha link here.

Iʼll name this component and put in a caption, and then click on Save.

And now I can see the recaptcha component in my form.

Lastly, Iʼll click on Submit Button to create a button that will allow people to submit their message.

6

Iʼll name it, and put in a label that will appear on the button.

I wonʼt need to put in a caption for this button.

Then Iʼll click on save.

Now I can see that I have a submit button at the bottom of the form.

And my form is pretty much done at this point, so Iʼll click on Apply.

Now Iʼll go to the Form Layout tab.

At the top here I have several options to choose for the layout of the form.

These areas of the preview represent the captions, and the darker areas represent the fields.

You can experiment with the different layouts if you like.

For now Iʼll select 2 Lines, and then Iʼll click on okay to let it regenerate the HTML for the form with this new layout.

Next, Iʼll go to the Edit Form tab.

Iʼll give this form a title which is the title that will appear at the top of the page when I create a page on my site with RS Form Pro.

Then Iʼll give this form and name which I will see in the list of forms in RS form Pro, in the Manage Forms tab.

Itʼs important to keep in mind that if you donʼt have a form name entered in this field, you wonʼt be able to open up your form and edit it because the name of your form is the link that you need to click on to open it.

In the Return URL field you can enter any page you would like to redirect people to after they successfully submit a message by using this form.

Iʼll enter in the home page of my site.

Next, Iʼll click on this link here to enter in a thank you message that will appear on the contact form page after someone clicks on Submit.

This message will come up on the page with a button that says Continue on it. When itʼs clicked, the the person will be taken to whatever page you have entered in the URL field above.

7

Once I click on that link the smaller window will open up with my WYSIWYG editor, and I can enter in the text for the thank you message here.

Iʼm going to personalize this thank you message a bit by copying this simple syntax code that will enter in the name that people enter in the form when they fill it out.

Iʼll highlight it and copy it to my clipboard, and then go back to the edit window for the thank you message.

Iʼll type in Hi, and then Iʼll paste in the syntax code I just copied, and then Iʼll put a comma.YouWhen someone fills out this form on my site and clicks on Submit, when this message comes up their name will be inserted right after the word “Hi”.

[Hi {name:value},

Thank you for contacting us!Someone from our team will be in touch with you as soon as possible.

talk to you soon,~the Zenscaping Team]

When I’m done typing in my message I’ll click on Save and Close.

And now I can see the message I just typed in the preview here.

Next I’ll go to the Admin E-mails tab.

This is where I’m going to configure the e-mail that will be sent to me when someone uses the form to send me a message.

I’m going to enter in some of the syntax code from the right side of this page into the various fields of the e-mail that will be sent out from RS form Pro.

For the From: field, I’ll highlight the e-mail address syntax and then simply drag it to the From field.

I want to make sure to highlight and drag the syntax that ends with :value rather than : caption.

So I’ll highlight the e-mail address:value and then left click and hold while I drag it to the From: field.

For the From Name: field Iʼll highlight the syntax for the name that they entered and then dragg it back to the From Name: field.

8

For the To: field, Iʼll enter in the e-mail address of mine that I would like messages sent through this form to be sent to.

For the Subject: field Iʼll highlight the syntax for the subject that people enter in the form, and then left click and drag it to the Subject: field.

Then Iʼll click on this link that says Edit e-mail text.

Then Iʼll highlight the syntax for the message field on the form, copy it to my clipboard, go back to the Edit e-mail text window, and paste that syntax right into the body of the e-mail that will get sent to me.

Then Iʼll click on Save and Close.

Itʼs important to keep in mind that if you change the name of the components in the form, youʼll need to come into this page and edit the syntax code for whatever component you change the name of.

If you donʼt, the e-mail that gets sent to you by RS form Pro will not work properly.

For example, if I went in into the form and changed what is the name of the e-mail address field to be just the word “e-mail”, I would have to come back into this area and in the From: field I would have to change the name of that component from “emailaddress” to just “e-mail.”

If for some reason the e-mail that is being sent to you from RS form Pro is missing certain information, check to make sure that the names of the components in the syntax code are correctly entered.

This is why itʼs a good idea to copy and paste from this right column rather than trying to type them in yourself.

Iʼm done setting up this page so Iʼll click on Apply.

Now, if I click on the User E-mail tab, youʼll see a very similar page to the one that I was just on where I configured the e-mail that gets sent to the admin.

This is a nice option of RS form Pro that allows you to send an auto response e-mail to anyone who submits a message to you using the form on your site.

Iʼm not going to configure it now, but you set it up the same exact way as I did for the Admin e-mail.

There is, however, one extra option on this page that was not present on the Admin E-mail page that Iʼd like to tell you about. Itʼs this area here where you have the option to

9

attach a file to the e-mail that gets sent out to people that have sent you a message through your website.

You would simply select “yes” next to “Attach File:”, and then make sure that the file path to that file on your server is correct in this field here. Of course, you would need to upload the file to that particular location.

You can simply use the folder that is already created, indicated in this file path here, and put your file there.

Or, you can create a folder somewhere else on your server and put the file you would like to attach in that folder.

The User E-mail option is a great feature to use if you need to send people a standard auto response e-mail that has information that they will need, and you can even attach a file such as a PDF file to the e-mail.

This form I have created is now all set, so Iʼll click on Save.

Now I need to create a menu item for this contact form.

Before I leave this page though, Iʼll need to take note of the form ID, which in this case is 2.

Now Iʼll go to Menus, and then select Main Menu.

Then Iʼll click on New, and for the menu item type Iʼll select RS form Pro.

Iʼll give this menu item a title, and then in the parameters (basic) section, for the form ID Iʼll enter the number 2.

And then Iʼll click on Save.

Now Iʼll go to the front end of my site and refresh the page, and then Iʼll click on the Contact page that I just created.

And here is the form that I created with RS form Pro showing up on this page.

It looks good, but I donʼt like how the Submit button is so far down below the recaptcha component.

Iʼll show you how to adjust this now.

Back in the back end of my site Iʼll go to Components, and then RS form Pro, and then Iʼll select Manage Forms.

10

Now Iʼll click on the title of the form I just created to open it, and then Iʼll go to the Form Layout tab.

Iʼll uncheck the Auto Generate Layout option so that I can edit the HTML thatʼs generating the form.

Then, in the area of the form where I can see the syntax code for the re-captcha component, Iʼm going to take out a couple of these break tags, by highlighting them and simply deleting them.

Then Iʼll click on Apply, and then Iʼll go back to my contact form on the front end and refresh the page.

And that looks a lot better now that things are more evenly spaced.

Now Iʼm going to actually fill out this form and send a test message.

And now that Iʼve got some test information filled out in this form, and the text entered for the re-captcha validation, Iʼll click on Submit.

And here is the thank you message thatʼs supposed to appear after I submit a message with this form.

Notice that the name that I entered in the form is being inserted right into this message here.

When I click on continue I should be taken back to the homepage of the site Because thatʼs the URL I entered for the return URL.

Now Iʼll go back into RS form Pro and Iʼll show you how to view submitted forms.

Iʼll click on Manage Submissions, and right here you can see the information that I filled out in that test message that I sent.

So this message was successfully sent through RS form Pro and has been logged in the submissions area.

Now Iʼll need to check to make sure that I got the message sent through this form in the e-mail account that I entered in the Admin E-mails tab.

And if you have configured a user e-mail to be sent out by RS form Pro, you should also make sure that the user e-mail got sent out successfully to the e-mail address that was entered in the form when you tested it out.

Once youʼve completed your tests and have confirmed that everything is working properly, youʼre good to go.

11

The last thing Iʼll show you how to do is to create a form that shows up in a module position rather than in the main body or component area of your site.

To do this, I would simply go back into RS Form Pro, and then go to Manage Forms, and click on New to create a new form.

I wonʼt go through the process of creating another form though to show you this next part. Iʼll simply use the form I just created.

To get an RS form Pro form to appear in a module position, Iʼll go to Extensions and then select Module Manager.

Now Iʼll look for the RS form Pro module that I installed at the beginning of this lesson, and when I find it Iʼll click on its title to open it.

First, Iʼll enable it, and then Iʼll select the module position that I want to have this form appear in.

Iʼm going to select the user7 position which is a module position in the bottom right of this template.

And for the menu assignment, Iʼm going to leave it set to “all” so that this module appears on all pages.

In the module parameters area Iʼll enter in the form ID of the form I that it is will would like to have appear in this module.

Since Iʼm simply using the form I just created, Iʼll enter in its form ID.

Then Iʼll click on save.

Now, because I already had a module in the user7 position, Iʼm going to disable it so that I only have one module in this position rather than two.

A quick way to find this other module is to use this position filter and select user7 from the drop-down menu.

And hereʼs the other module I have published in this position. Iʼll simply click on this green checkmark to unpublish it.

Then Iʼll go to the front end of my site and refresh the page.

And now I can see in the user7 module position the form that I created earlier is now appearing.

12

Obviously this form is a bit long for this particular module position, and I would want to go back in and change the width of the text area for the actual message.

Iʼm simply showing you how to get an rs form pro form into a module position here.

Also the recaptcha component is a bit too wide for this location. Because itʼs a bit difficult to change the width of the re-captcha component, if youʼd like to have some form of anti-spam validation, you can always use the captcha component that comes with RS form Pro.

Iʼll show you how to set this up now in case you want to use it.

Back in RS form Pro, in the form that I created earlier, in the list of components youʼll see this captcha antispam link.

To create a component with it Iʼll click on this name, Iʼll give it a name and a caption.

I like to select to only have this captcha component show numbers because they tend to be a bit easier to read for people. So in the “type” menu Iʼll select numeric.

Then, itʼs helpful to show a refresh button in case people canʼt read the numbers, so under “Show Refresh” Iʼll select yes, and in the description Iʼll put in a message to let people know to click on the refresh button if they canʼt read the numbers.

Then Iʼll click on Save, and Iʼll move this captcha component up above the submit button by clicking once on this up arrow.

Now Iʼll disable the re-captcha component by clicking on this tiny icon in the Published column.

And now Iʼll click on apply to save the changes, and go to the front end of the site and refresh the page.

And where I should be seeing the RS form Pro captcha component, Iʼm seeing some syntax code for the re-captcha component.

This is because I unchecked the auto generate layout box in the Form Layout tab.

Iʼm showing this to you in the event that you ever see syntax showing in your form instead of the component that you expect to see there.

If you see something like this go to the Form Layout tab and check the Auto Generate Layout button, then click on Generate Layout and see if that fixes your problem.

Iʼll go do that now by going to the backend of my site, and then to the Form Layout tab.

13

Then Iʼll click on the checkbox next to Auto Generate Layout.

Then Iʼll click on Generate Layout, and then click on Apply.

And now when I go to the front end of my site and refresh the page I can see the RS form Pro captcha component appearing properly.

If youʼre wondering why Iʼm not changing the width of the text box for the message, itʼs simply because Iʼm showing you this as an example, and this form is actually being used on the contact form page, where I have more room to have a wide text box area for the message that people enter.

If I were putting a real form in this module position, I would create a different form that would be laid out more compactly so that it would fit properly in this module position.

And thatʼs how to use most of the features of RS Form Pro to create forms on your site.

Remember that you can create any kind of forms with RS Form Pro, not just contact forms.

For example, you could create a mini questionnaire and give people a place to enter their answers. Once they click on submit, the questions and answers would be emailed to you by RS Form Pro.

14