• Share this article:

Hacking the RapidWeaver Contact Form

Successful websites need an easy way for people to get in contact. Standard email addresses are still great to use; they are fast, reliable and you know that the reply-to address is nearly always going to work. But sometimes website visitors do not always have immediate access to their email software for sending a message to you. Or other times you may wish to collect user information in a more formal manner. For this job, a contact form is almost essential.

There are many contact form stacks and page types available for RapidWeaver, from a wide range of different companies. However the free contact form page type that ships with RapidWeaver has proven to be very secure, simple and reliable to use. The RapidWeaver contact form is compatible with more web servers and also includes discrete yet highly effective spam filtering (to block automated messages).

This knowledgeable article will cover a few hacks you can safely perform to extend the functionality and usefulness of the contact form page type that ships with RapidWeaver.

Prevent the contact form submitting if an invalid email address is given

For this to work, you'll need to add the following jQuery Javascript code to the Custom Header box of the RapidWeaver Page Inspector (not the Javascript box):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('.rw-contact-form').submit(function(e) {
        var sEmail = $('.rw-contact-form input[name="form[element4]"]').val();
        if (validateEmail(sEmail)) {
            //alert('Email is valid');
        }
        else {
        e.preventDefault();
            alert('Invalid email address. Please carefully check the email address you have entered is correct.');
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}
</script>

It works by checking the email field in your contact form, against a regex. We look for an '@' character and to make sure the email address ends with a TLD (top level domain, like .com or similar). This method of validation will not detect minor typo's in an email address, but it will quickly flag obvious errors. Here is an example of what the alert will look like, if an incorrect email address is supplied:

Contact form invalid email alert

The only part of the code you may need to edit is form[element4]. RapidWeaver allocates each form input a number (starting at 0 for the first form input). So if your email field is the 7th form input in the form, you'll want to change the selector name to form[element6]. Otherwise you'll be validating the wrong form field. Likes you may also wish to customise the error message displayed to uses.

The above technique was found to work well in ThemeFlood themes, but failed in some themes from other companies. Your could adopt the same technique to validate other form fields, like postal codes, website addresses or telephone numbers.

Redirect users after the contact form is submitted

You can redirect your website users to another webpage, after the form is submitted. A prime example of this would be to display a "thank you" page or give website users the opportunity to signup for a free email newsletter. To accomplish this function, enter the following HTML code into the Email Sent Feedback box, in the RapidWeaver Page Inspector:

<meta http-equiv="refresh" content="0; URL='http://example.com/thank-you/'" />

Simply replace example.com/thank-you with the actual webpage address you want to redirect your users to. The address needs to be an absolute (full) address, not a relative path.

Hide the reset button

To prevent users accidentally clicking the reset button (and erasing their form content), you can very easily hide the reset button with a few lines of custom CSS code, entered into the RapidWeaver Page Inspector Custom CSS box:

#content input[type="reset"] {
    display: none;
}

The button will still be there in the page source code, but will not be visble (or click-able) for your website users. Only the submit button will be shown.

Make the 'required fields' message more prominent

Any message text like your form header, feedback message and success message go into a container called .message-text, which is written into the top of a page automatically by the contact form plugin. Because you are free to customise the messages displayed, instantly there is scope to slip-in extra code and adjust the presentation of these messages; to make them bigger and bolder. In the RapidWeaver Page Inspector, click onto the Customisable Text tab, inside the page settings. In the Header box, enter the following content:

<span>Please fill in the form below. *Indicates mandatory details required</span>

You can replace the text with your own content. Note that we have put this content inside a pair of <span> HTML tags, so it can be differentiated from the normal form feedback messages. Then in the Custom CSS box in the RapidWeaver Page Inspector, enter this custom CSS code:

/* Styling for error text */
.message-text {
font-size: 24px;
font-weight: bold;
color: #FF0000;
}

/* Styling for normal form header text */
.message-text span {
font-size: 13px;
font-weight: normal;
color: #333333;
}

From this point onwards, any error messages or success messages that your contact form generates will adopt the new .message-text rules. The normal text you wish to display in a form header will use the .message-text span rules instead. Now when the form is tested, this content will display normally at the top of the form. If a user makes a mistake and fails to provide content in a mandatory field, this error messages gets displayed at the top:

Contact form required fields

Straight away, it is much clearer to the end user that a mistake has been made, and they can check their details again. Of course using CSS code, you are free to apply all sorts of different styling to these error messages, such as colours, font faces and font sizes. You could even consider icons.

Making the form disappear on submission

Normally when a submitted web form gets hidden, it does so via Javascript or PHP. We don't have that option in the RapidWeaver contact form, but we can emulate a similar (if not better) effect using CSS code instead. Start by opening the RapidWeaver Page Inspector, click onto the page options and click the Customisable Text tab. In the Email Sent Feedback box, enter the following code:

<div id="sentShade"></div>
<div id="sentMessage">Thank you, your email has been sent.</div>

This HTML code adds a new container called #sentShade which we will use to overlay the contact form on submission. It also puts the "Thank you, your email has been sent" message text inside a new container, which we can use to apply styles to.

Next in the RapidWeaver Page Inspector, enter this CSS code into the Custom CSS box:

#sentShade {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: 20;
background: #e6e6e6;
opacity: 0.80;
}

#sentMessage {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
display: block;
color: green;
height: 24px;
font-size: 24px
margin-top: -24px;
z-index: 50;
}

The first ruleset displays the .sentShade container as a semi-transpantent box, floating over the entire contact form. It makes use of CSS opacity filters and the background colour (in this example #e6e6e6) can be set to match your theme content container background. The second ruleset makes the success message much larger, and floats it over the centre of the contact form. Now when someone sends the contact form, they will see something like this:

Contact form submitted overlay

Refreshing the page would hide the overlay and make the form active again.

Splitting the contact form into multiple responsive columns

To split your form into two columns, enter this into the RapidWeaver Page Inspector, in the Custom CSS box:

@media screen and (min-width: 768px) {
    form {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    }
}

This CSS code uses the column-count and column-gap properties and will only take effect on screens wider that 768px. On narrower screens, the code is ignored (the form renders as a single column). And this is what the end result looks like:

Contact form multiple columns

Basic functionality like the ability to tab between form inputs will continue to work, using this method. Additional breakpoints can be created if you want more columns on wider screens.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.