We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 43099
    • 38 Posts
    I just set up SPForm for my contact page processing and thought I would write down the process so that others may benefit. It was amazingly easy and works great!

    The context for me is that I am porting over a modx install from Evo to Revo, so its not a new site. On a new Revo site, SPForm would be even easier.

    First off, installing SPForm is going to create several new resources, chunks and snippets. Before installing, make sure you do not have a resource with the alias of "contact", because SPForm will create a resource with this alias. Technically you can't have two resources with the same alias, so this could cause trouble. SPForm will also create/grab a thank you page. This part is a little weird because it didn't create a new file but instead *found* my existing contact page.

    SPForm also creates some chunks and snippets, I will mention the most important ones. For now, if you want to change the thank you page, the number of that resource is hard-wired into the SPForm snippet, just go to the snippet properties and look for the page number in the values section, then change it.

    So, the process is go to package management and search for SPForm, and download it. Then you still have to install it, and there is a button called install options, click that and you can insert the email you want the messages to go to. Only one email at this point, but you can add more emails in later.

    For the contact form itself, it must contain the call to the snippet, in Revo its [[!SPForm]]. I can't remember if the call is in there or not, just put it in if not. Also, be careful about using a text editor for that resource, it may put <p> tags around the call and that could screw things up. So turn off the text editor for that resource. You can use that call in other contact pages as well.

    After installing and making sure the code is in the contact page, you should see the form on that page, name, email, subject and message. If you leave the template empty, you will see an extra box above saying, don't put your name here, that's to catch spam. But if you apply a template (probably has to be a css call in the template) then this extra box won't show.

    The two important other parts of SPForm are the snippet and chunk. The snippet can let you change values such as thank you page and email to send to, and you can put two or more email addresses (in the form "[email protected],[email protected] without spaces) in there, but this will make a selector appear in the form for the user to choose who to send it to (I have to work around this limitation). As I go on and customize my form I will probably be looking at some of those values.

    And, there is the main chunk which is called spformTpl, the SPForm template chunk. This is where the pieces of the form are built up. For instance, I took out the piece for the subject box, because its not necessary.

    This chunk is also where I made the changes to use my own form. This was amazingly easy. In the past it was hard because for each input there was like a class, a name, and id, and so on, and these values can be critical to getting the form to work. I remember having trouble because the form processor needed to find an input with one name, while my site design needed to find a class or something like that, big pain in the rear.

    With SPForm, all I had to do was this:

    1. find <div id="spform"> in the top of the code in the spformTpl chunk,
    2. Remove it so the styling of the form is gone,
    3. Replace it with the <div> that your form is in, my is <div class="contactform">

    Done! All my styling is there now, and the form still works!

    My next steps are to change the words of the form, and figure out how to change languages. I also want to add a captcha, and if I have time, the comments box (textarea) is a little bigger than before in my design, so I might try to figure out how to change its default size.

    Ok, hope this is helpful!!
      • 43099
      • 38 Posts
      Ok now after a break I decided to get serious about this contact page, so I upgraded it by adding styling and re-sizing it, and I also customized the language. The final contact page is visible at http://www.rayxi.com/rayxi-contact-us-page

      I went through the installation process again after the migration, following my own guide haha smiley I was getting an error about the referer, so I just re-installed and solved the problem that way.

      This time it made a new thank you page, with the alias of thankyou. The installation automatically puts a snippet in the thank you page which inserts a short response, which I will pull out and put in a customized page with my normal styling rather than deal with the styling or contents within SPForm.

      So basically in order to style the form, I used the special css file of SPForm, which is at media/assets/components/spform/css. For some reason, even though I pulled out the id of the div in the spformTpl chunk last time (from <div id="spform"> to <div class="contactform">), the css still was not applied. As I remember the form did change somewhat when I changed the div class, but it didn't help me change the text color, which I wanted to be grey.

      So, what I did was copy an entry from the original code and applied to the div in the css file of SPForm:

      .contactForm{
      	background:url(xxx/contact_form_bg1.jpg) no-repeat 0 0;
      	width:360px;
      	min-height:200px;
      	margin-top:40px;
      	color:#999;
      font-family:"Lucida Grande", "Microsoft Sans Serif", Verdana, sans-serif;
      font-size:12px;
      text-color:#999;
      line-height:13px;
      	
      }
      


      And that made the text grey like I wanted, and I could adjust the text properly.

      However, the size of the form was still a little off, and I wanted to customize the text as well. I guess I should mention that my landing page is a slightly narrower design, and the default size of the spform for that design was definitely too wide. For these two aspects, I had to change data in the properties of the snippet and to the system lexicon.

      The snippet properties allow me to change a bunch of things, including the length of the three text boxes in the form (subject line is removed, also through properties). I also made a second design easily by copying the SPForm snippet and changing one line, spformTpl, to a different design template, spformTpl2, with slightly different styling, otherwise everything is unified.

      The lexicon was new for me coming from Evo, but it works great. All the text lines for SPForm are right there, and there are even multiple languages. As I wanted to use Chinese, which wasn't included, I now put a language set in through the call, and I modified the strings as I wished.

      The call for me is [[!SPForm? &language=`nl`]] and then I edited the most necessary strings from Dutch to Chinese. I still have to do the English side as well, and finish the Chinese strings.

      Ok, so now I have completely integrated SPForm with my template! I am ready to rock and roll!

      My next step might be to implement the captcha, but only if I have spam problems. I had gotten regular spam for about 6 months with the old install which didn't use SPForm, but so far we haven't gotten any since I implemented SPForm. Crossed fingers on that one.