Customizing the WebCards Send Form

Customizing the WebCards Send Form
We can further customize the form used to send an ecard. Because this will be within a Facebook iframe, we need to keep the form as uncluttered as possible.

In this tutorial, we will finish streamlining the send form for the WebCards system. We have been making several changes in order to fit the form inside the Facebook iframe. Now we will remove some of the extras from the form including the background color, smilies and the notification options.

We will need to do this by changing the code in the main_form.html template.


If you take a look at the template, you will see that we have template variables for each of these options.


This variable will display the background color drop-down menu. If we remove {{bg_select}} from the code, the menu will not appear in the form. Also, we will want to remove the opening and closing paragraph and select tags and the ||bg_colour|| which displays the "Background Colour" text above the option. So let's comment out everything from within that paragraph tags along with those tags.

<!--<p>||bg_colour|| <select name="bg_color" id="bg_color" onchange="changeBg()">

The system will be expecting a background color choice from the form. But the user won't be able to set a background color because we have removed that code. So let's add a hidden input tag that will set white as the background color and pass that information along with the form.

At the top of the page you will find the opening form tags. Add the input tag here.

<form action="{{preview_link}}" method="post" name="main_form">
<input type="hidden" name="pic" value="{{chosen_pic}}" />
<input type="hidden" name="bg_color" value="white" />


This variable will display the smilies on the form. There are no surrounding tags or text, so we can simple just comment out the {{emoticons}} from the code.



This variable will display the text in the More Sending Options sections and the radio buttons. Again, we just need to comment out the {{more_options}}.


That looks good but we could remove some of the empty white space under the message box and before the preview and reset buttons. If you look at the code, you will notice that the {{poems}}, {{stamps}} and {{audio}} variables are followed by break tags. Although we haved turned off these features in the Admin area, these break tags are still creating the empty space. Let's remove them.

WebCards screenshots used by permission.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.