Hide Fast and Secure Contact Form in a Link

How to make Fast and Secure Contact Form hidden in a link, then when you click it, it slides open. Click it again it slides closed.
Idea provided by Mikko Vahatalo

Fast and Secure Contact Form is a WordPress plugin. This article assumes you already have both installed.

Download ‘Scriptaculous’ javascript framework found here: http://script.aculo.us/downloads

Unzip the scriptaculous-js files on your computer.
Some .js files will need to be uploaded by FTP to your wordpress theme directory.
FTP to your wordpress theme directory.
/wp-content/themes/-themename-/
(note: there may be many theme folders here. Substitute -themename- with your active theme)
Make a new folder ‘javascripts’, like this: /wp-content/themes/-themename-/javascripts/

Copy all the .js files from the scriptaculous-js /src/ folder and the prototype.js from the /src/ folder to
/wp-content/themes/-themename-/javascripts/

Add this to the /wp-content/themes/-themename-/header.php:
(note: Substitute -themename- with your active theme)
<script src="wp-content/themes/-themename-/javascripts/prototype.js" type="text/javascript"></script>
<script src="wp-content/themes/-themename-/javascripts/scriptaculous.js" type="text/javascript"></script>

The javascript is called within the page like this:
(edit your page where you previously put the contact form shortcode, here I give examples for two forms, you may only have one)

(example for form 1)
<p class="formlink"><a onclick="Effect.toggle('contact','slide'); return false;" href="#">Contact</a>[si-contact-form form='1']</p>

(example for form 2)
<p class="formlink"><a onclick="Effect.toggle('contact2','slide'); return false;" href="#">Other form I may have</a>[si-contact-form form='2']</p>

Last step (add the CSS contact id):
The key to hiding the form is the ‘display: none;’ attribute, since without it obviously the forms would not be hidden when the user comes to the page. Also it needs to be in the div html for the scriptaculous to work, it doesn’t work if in an external css file.

Go to WP Admin – Plugins – SI Contact Form Options
Select the corresponding form you are working on.
Click on “Advanced options”.

Edit the “CSS style for form DIV on the contact form:”

(example for form 1)
Change:
width:375px;
To:
style="width:375px; display: none;" id="contact" class="contact"

(example for form 2)
Change:
width:375px;
To:
style="width:375px; display: none;" id="contact2" class="contact2"

Test the form.

Comments are closed.