---title: Sending SMS from the Browserslug: /guides/send-sms-from-the-browser-with-python-flask-and-htmlsidebar_position: 5x-custom: ported_from_readme: true---Overview--------This guide will use flask to create a simple web application that can send sms through the browser.What do I need?---------------Find the full code on Github [here](https://github.com/signalwire/signalwire-guides/tree/master/code/Sms-From-Browser) You will need the [SignalWire Python SDK](pathname:///compatibility-api/rest/overview/client-libraries-and-sdks#python) as well as [Flask](https://flask.palletsprojects.com/en/2.0.x/installation/#install-flask) to handle the web framework.Additionally you will need a signalwire account which you can create [here](https://m.signalwire.com/signups/new?s=1). You will also need your SignalWire API credentials which you can find in the API tab of your SignalWire dashboard. For more information on navigating your SignalWire space check [here](/guides/navigating-your-space).How to run----------### Run NativelyRun app.py in your python environment of choice. This app will be using Flask, which will use port 5000 on your localhost by default. :::info This example should not be used in a live environmentExposing this web app to a live endpoint means anybody with the url could send sms requests through your SignalWire space.:::Code Walkthrough----------------This application has two components app.py which is our server component, and a templates folder which holds our sendsms.html, this is our client component. Additionally there is an example.env file you can use to fill in with your SignalWire credentials and save as .env### Server-side code#### Set-upThe server-side code for this is very simple, first we will import the required packages, load then set our environment variables, and create a client that will handle our sms requests.pythonfrom flask import Flask, request, render_template, redirectimport osfrom dotenv import load_dotenvfrom signalwire.rest import Client as signalwire_clientimport reload_dotenv()SIGNALWIRE_PROJECT_KEY = os.environ[SIGNALWIRE_PROJECT_ID]SIGNALWIRE_TOKEN = os.environ[SIGNALWIRE_API_TOKEN]SIGNALWIRE_SPACE = os.environ[SIGNALWIRE_SPACE_URL]SIGNALWIRE_NUMBER = os.environ[SIGNALWIRE_FROMNUMBER]client = signalwire_client(SIGNALWIRE_PROJECT_KEY, SIGNALWIRE_TOKEN, signalwire_space_url=SIGNALWIRE_SPACE)#### Index RouteNext we will create a route that returns our sendSMS.html form. When integrating this project, this may not be needed as you can simply embed the code from sendSMS.html into any html page your project is already using.python@app.route(/, methods=[GET, POST])def smsmenu(): return render_template(sendSMS.html)#### Create Sms/Handler RouteFinally for our server-side we will create a route that actually handles the creation of our sms requests to the client. First we will get the pnum and smsbody values from the client and call our phonevalidation() function, passing our pnum. If phonevalidation() returns False we will let the client know that phone number wasnt valid. Otherwise we will create a request using pnumvalid as the to number and the body we retrieved from the client as our message body, and return Message Sent. In this case there is no validation for if a message was delivered successfully, only that the request was created.Alternatively if our conditions arent met, we just assume something went wrong and return a message stating so to the client.python@app.route(/createsmshandler, methods=[GET, POST])def createsms(): pnum = request.args.get(pnum) body = request.args.get(smsbody) pnumvalid = phonevalidation(pnum) if pnumvalid == False: return Invalid Phone Number else: success = client.messages.create(to=pnumvalid, from_=SIGNALWIRE_NUMBER, body= body) return Message sent.#### Phone Number ValidationValidating phone numbers helps reduce improperly formatted requests to SignalWire, which in turn means your messages are delivered to the right target more appropriately! We can do this with some basic regex using pythons default regex package re.First we will define a new function and accept one pnum parameter. When we call this function in createsms() we will pass the phone number from our client as pnum. Next we define our compiled regex as pattern. Our regex is simply looking for a string of 10 or 11 digits. Then we will create a filterednum variable which will strip all non-digit characters from our phone number. The goal is to eliminate any white-space or special characters, for instance 1(123)-123-1234 would be stripped down to 11231231234.Once we have our number filtered we can use the regex findall method to return a list of strings that match our criteria. We should only get 0 or 1 matches. If we get 0 matches, we return False which will return to our function.If we do get a match, we will check the length of the match. If the length is 11 digits, and the leading digit is a 1 we can assume this user included the country-code and append a + to the string and return our e.164 formatted phone number to our function which will then use it as the to number in our text. Similarly, if the length of our match is 10 digits we will assume the user did not include an area code and append +1 before returning our number to the function.pythondef phonevalidation(pnum): pattern = re.compile(r\d{10,11}$) filterednum = re.sub([^0-9], , pnum) matches = pattern.findall(filterednum) for match in matches: if len(match) == 11 and match[0] ==1: match = ++match return match if len(match) == 10: match = +1+match return match else: return False:::info This Function is designed to Validate US country codesIf you would like to validate numbers from other countries you may have to adjust the code to match your desired country-code and phone number lengths.:::### Client-side CodeOur client-side code is just a simple html file SendSMS.html. Most of this code is just the default/boilerplate HTML. The heart of our client really boils down to the .First we will create a new tag.html Send A Message Wrap Up-------This is a simple and flexible way to allow data to be passed from the client to your server which can then be validated before we create requests to the SignalWire API! While this guide focuses on SMS this same principle can be used to implement a wide variety of features into your web app!### Required Resources:[Github Repo](https://github.com/signalwire/signalwire-guides/tree/master/code/Sms-From-Browser) [Python SignalWire SDK](pathname:///compatibility-api/rest/overview/client-libraries-and-sdks#python)Sign Up Here------------If you would like to test this example out, you can create a SignalWire account and space [here](https://m.signalwire.com/signups/new?s=1).Please feel free to reach out to us on our [Community Slack](https://signalwire.community/) or create a Support ticket if you need guidance!