logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

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.

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

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.

<!--{{emoticons}}-->

{{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}}.

<!--{{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.

<!--<br>-->

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Add Customizing+the+WebCards+Send+Form to Twitter Add Customizing+the+WebCards+Send+Form to Facebook Add Customizing+the+WebCards+Send+Form to MySpace Add Customizing+the+WebCards+Send+Form to Del.icio.us Digg Customizing+the+WebCards+Send+Form Add Customizing+the+WebCards+Send+Form to Yahoo My Web Add Customizing+the+WebCards+Send+Form to Google Bookmarks Add Customizing+the+WebCards+Send+Form to Stumbleupon Add Customizing+the+WebCards+Send+Form to Reddit



 



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


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Photorealistic Digital Art for Digital Stamp

Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor