Customizing the WebCards Send Form - Digital Art and Design

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.

webcards/templates/webcards/main_form.html

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

{{bg_select}}

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.



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.

<h1>||form_create_webcard||</h1>
<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" />

{{emoticons}}

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.



{{more_options}}

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.



http://www.mywebcards.net
WebCards screenshots used by permission.