Modifying 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=""></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)) {
} else {
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;

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. Likewise 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=''" />

Simply replace 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.

Changing the spacing between form fields

The RapidWeaver contact form page type uses <br> tags to insert spacing between form fields. This is less-than-ideal, because it can make adjustment of form styling far harder. Sometimes form fields may appear too close together or too sparsely spaced apart.

This custom CSS code works to hide these line break tags, introduce viewport proportionate spacing between the form fields and amend checkbox spacing:

.rw-contact-form br {
display: none;

.rw-contact-form input,
.rw-contact-form textarea {
margin-bottom: 2vw;

.form-checkbox-field {
display: block;
width: 100%;

The only downside of this method is that labels for checkboxes will be displayed as block elements above the checkboxes, instead of being floated alongside the checkbox labels. Enter this code in the RapidWeaver Page Inspector, in the Custom CSS box. Change the 2vw to whatever you want.

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.
Web design by Will Woodgate