Flask Framework FormUI Design

A Flask-based web application for creating and distributing digital credentials and awards through an integrated form interface. This project demonstrates a complete Flask framework setup with a responsive form UI that integrates with the Certifyme API for credential management.

About

This project is a Quick Award System built with Flask that allows organizations to easily issue digital certificates and credentials to awardees. The application features a clean, modern form interface where users can input recipient information, which is then processed and sent to the Certifyme API to generate official digital credentials.

Key Purpose: Streamline the process of creating and distributing digital awards and certificates with a user-friendly web interface.

Technology Stack: Flask (Python), HTML5, CSS3, Requests library

Use Case: Ideal for educational institutions, corporate organizations, and event management platforms that need to issue digital badges, certificates, or credentials to participants and awardees.

---

📋 Features

• ✨ Clean & Responsive Form UI - Modern form interface for award recipient information
• 🔐 API Integration - Seamless integration with Certifyme API for credential issuance
• 🎨 Custom Styling - Professional CSS styling with hover effects and responsive design
• 🔒 Cache Control - Prevents response caching for data security
• 📧 Email-based Distribution - Credentials delivered directly to recipient email addresses
• 🚀 Quick Deployment - Ready-to-run Flask application on localhost

---

📁 Project Structure

flask-framework-FormUI-design/
├── README.md                                 # Project documentation
├── complete flask framework/
│   ├── app.py                               # Main Flask application
│   ├── readme.cd                            # Additional notes
│   ├── template/
│   │   └── home.html                        # Home page template with award form
│   └── static/
│       └── style.css                        # CSS styling for the application

---

🛠️ Requirements

• Python 3.7+
• Flask
• Requests library
• Modern web browser

Dependencies

Flask==2.x.x
requests==2.x.x

---

⚙️ Installation & Setup

Step 1: Clone the Repository

git clone https://github.com/Harshitgupta5290/flask-framework-FormUI-design.git
cd flask-framework-FormUI-design

Step 2: Install Dependencies

pip install flask requests

Or using requirements.txt (if available):

pip install -r requirements.txt

Step 3: Configure Credentials

Edit the complete flask framework/app.py file and update your Certifyme credentials:

username = 'Your email of Certifyme'
password = 'Your Certifyme Password'

Step 4: Run the Application

cd "complete flask framework"
python app.py

The application will start on http://localhost:8000

---

🚀 Usage

1. Navigate to the Application

   • Open your browser and go to http://localhost:8000

2. Fill the Quick Award Form

   • Enter the awardee's name
   • Enter the awardee's email address
   • Click the "Award" button

3. Credential Issuance

   • The form data is sent to the Certifyme API
   • A digital credential is generated with predefined template details
   • The credential is sent to the recipient's email

---

🔌 API Integration

The application integrates with the Certifyme API to issue digital credentials.

Request Details

• Endpoint: https://my.certifyme.online/api/v1/credential
• Method: POST
• Authentication: Basic Auth (Base64 encoded username:password)
• Content-Type: application/json

Request Payload

{
  "name": "Awardee Name",
  "template_ID": 5020,
  "email": "awardee@example.com",
  "text": "VP Quadralogics",
  "license_number": "TPR-1267Af23",
  "verify_mode": "Passport Number",
  "verify_code": "13678AJKJY678JHGP0"
}

Customization

You can customize the credential template by modifying:

• template_ID - The template ID for the credential design
• text - Organization or issuer name
• license_number - License or reference number
• verify_mode - Verification method
• verify_code - Verification code for the credential

---

🎨 UI/UX Features

The application includes:

• Responsive Form Container - Centered with shadow effect and rounded corners
• Professional Styling - Clean typography with proper spacing
• Interactive Elements - Hover effects on buttons (dark theme: #270705 → #000000)
• Form Validation - Basic input fields for name and email
• Cache Control Headers - Security headers to prevent response caching

---

🔐 Security Considerations

This project demonstrates several security practices:

• Cache-Control headers to prevent caching of sensitive data
• Basic authentication with encoded credentials
• Request structure following REST API standards

Note: For production use, implement additional security measures:

• Use environment variables for storing credentials
• Implement HTTPS/SSL
• Add input validation and sanitization
• Use session management and CSRF tokens
• Implement rate limiting

---

🏗️ Application Flow

1. User accesses https://localhost:8000/
2. home.html is rendered with the Quick Award form
3. User fills in name and email
4. Form submits to /Create_Credential endpoint (POST)
5. app.py encodes credentials and sends API request to Certifyme
6. Certifyme API generates and sends credential to recipient
7. Home page is rendered again

---

📝 Configuration Reference

Flask Configuration

app.config['JSON_SORT_KEYS'] = False    # Disable alphabetical JSON sorting
app.config['DEBUG'] = False              # Disable debug mode for security

Server Configuration

host='0.0.0.0'    # Listen on all available interfaces
port=8000         # Run on port 8000

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request for any improvements or bug fixes.

---

📄 License

This project is open source and available under the MIT License.

---

👨‍💻 Author

Harshit Gupta

• GitHub: @Harshitgupta5290

---

🆘 Support & Troubleshooting

Common Issues

1. ModuleNotFoundError: No module named 'flask'

   • Solution: Install Flask using pip install flask

2. Connection Error to Certifyme API

   • Verify your username and password are correct
   • Check your internet connection
   • Ensure the Certifyme API endpoint is accessible

3. Form not submitting

   • Check browser console for JavaScript errors
   • Verify the Flask server is running on port 8000

---

📚 Resources

• Flask Official Documentation
• Python Requests Library
• Certifyme API Documentation
• HTTP Basic Authentication

---

Last Updated: 2026 Status: ✅ Production Ready