website form in odoo

In this blog we will explain how to create website form in odoo website to create new record in internal odoo model , so let us say that we want to create website form to in order to create new products with the major fields {name, price,cost, type,image} from website , so ..

First :  create new template in which we will create the form with all inputs as bellow

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="new_products" name="New Products">
        <t t-call="website.layout">
            <form action='/create/product/form'>
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <table style="width:100%">
                            <tr style="width:100%">
                                <td style="width:20%">
                                    <b>
                                        Name
                                    </b>
                                </td>
                                <td style="width:80%">
                                    <input type="text" name="product_name" id="product_name" required="true" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <table style="width:100%">
                            <tr style="width:100%">
                                <td style="width:20%">
                                    <b>
                                        Price
                                    </b>
                                </td>
                                <td style="width:80%">
                                    <input type="number" name="product_price" id="product_price" required="true"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <table style="width:100%">
                            <tr style="width:100%">
                                <td style="width:20%">
                                    <b>
                                        Cost
                                    </b>
                                </td>
                                <td style="width:80%">
                                    <input type="number" name="product_cost" id="product_cost" required="true"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <table style="width:100%">
                            <tr style="width:100%">
                                <td style="width:20%">
                                    <b>
                                        Type
                                    </b>
                                </td>
                                <td style="width:80%">
                                    <select id="product_type" required="True" class="form-control" name="product_type">
                                        <option t-att-value="consu" class="type_option">
                                            Consumable
                                        </option>
                                        <option t-att-value="service" class="type_option">
                                            Service
                                        </option> 
                                        <option t-att-value="product" class="type_option">
                                            Storable Product
                                        </option>      
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <table style="width:100%">
                            <tr style="width:100%">
                                <td style="width:20%">
                                    <b>
                                        Image
                                    </b>
                                </td>
                                <td style="width:80%">
                                    <input type="file" class="form-control s_website_form_input" name="image_file" id="image_file" required="true" accept="image/*"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <br></br>
                <div class="control_buttons">
                    <button type='submit' class="submit_bnt" id="s_bnt">
                        Save
                    </button>
                </div>
            </form>
    </template>
</odoo>

Second : create python controller in which you must "import base64" & "from odoo.exceptions import AccessError, MissingError", then add function to create the product with the data posted from the form as bellow 

    @http.route(['/create/product/form/'], type='http', methods=['GET', 'POST'], auth="public", website=True)
    def create_new_product(self, **post):
        product_obj = request.env['product.template'].sudo()
        try:
            product_data = {
                'name':post['product_name'],
                'list_price':float(post['product_price']),
                'standard_price':float(post['product_cost']),
                'type':post['product_type'],
                'datas':base64.b64encode(post['image_file'].read()),
            }
            product_id = product_obj.create(product_data)
            return request.redirect(product_has_been_created_page)
        except (AccessError, MissingError):
            return request.redirect('/my')

#Note : You have to create product_has_been_created_page first