#contactname | Explore Tumblr Posts and Blogs

netmetic · 4 years

Text

Achieving Event-Driven Architecture with Solace PubSub+ Event Broker and MuleSoft

One of the benefits of my current job is that I get to work with companies from different industries. As someone who had only worked in financial services before, it has been a very rewarding experience to understand the kinds of challenges companies face in other industries and how they compare to challenges commonly found in financial services. Additionally, I also get to learn about their technology stack.

Recently, I had the opportunity to work with a popular iPaaS (integration platform as a service) solution called MuleSoft which was acquired by Salesforce. MuleSoft, like other integration solutions, makes it as easy as dragging and dropping connectors to connect your applications. Such tools are heavily used to integrate applications from different domains together. For example, you can link your CRM app to your marketing app, invoice app, and analytics app with a simple drag-and-drop.

As you can probably guess, iPaaS tools are built on synchronous RESTful APIs. For your marketing app to be integrated with your CRM app, you need to have appropriate RESTful endpoints. While this works fine, we know that synchronous REST calls have their limitations when compared with the asynchronous calls of event-driven architecture. Instead of polling for data, you would rather have your apps sharing messages via the publish/subscribe messaging that enables event-driven architecture as part of your Mulesoft environment.

What are the advantages of event-driven architecture and publish/subscribe messaging?

You have undoubtedly heard of these terms before because, in the last few years, both have gotten extremely popular. Our world is full of events so your applications need to be event-driven. When a credit card is swiped, an event is fired which triggers a bunch of other downstream events. For example, your phone gets a real-time notification informing you that your card was just swiped, your credit card balance is updated, and so forth.

I have previously written a post about the nature and advantages of event-driven architecture, but here are the main ones:

Perform analytics and actions on real-time data as opposed to stale data obtained from batch processing

Identify issues in real-time instead of waiting till the batch is executed

Push vs pull – events are pushed to your applications as opposed to constantly polling for updates

Loosely coupled applications

Easier to scale

Typical pub/sub benefits such as the efficient distribution of data, persistence, replay, and migration to the cloud

Implementing Event-Driven Architecture with MuleSoft and Solace PubSub+

Now that we have a better idea of why you should consider using pub/sub messaging with your iPaaS, let’s look at how to achieve Mulesoft event-driven architecture. We will use MuleSoft’s Anypoint Studio which you can download for free (there may be a 30-day limit).

For our broker, we will be using PubSub+ Event Broker deployed via Docker container on my laptop, but you can also use PubSub+ Event Broker: Cloud which has a free tier. PubSub+ supports open APIs and protocols, so it’s really easy to use it with other products. For example, to integrate it with Mulesoft, we will be using Mulesoft’s JMS module.

Use Case

We have a CRM system such as Salesforce which pushes updates to a REST endpoint whenever there is an account update such as an account being created. The update contains high-level information about the account itself (name, website etc.), contact information, contract information, and location information (address). We have downstream applications such as marketing app, invoice app, and analytics app which are interested in one or more of these types of information contained in the entire account update.

Here is what our downstream applications are interested in:

Analytics app – interested in high-level account and contract information

Invoice app – interested in contract information only

Marketing app – interested in contact and location information

Our goal is to digest the original payload (XML schema), parse it, and split it into 4 different smaller payloads:

High-level account information

Contact information

Location information

Contract information

Then, we need to publish this data on different topics and have different consumers subscribe to this data depending on their interest.

Notice that despite having multiple apps subscribing to the same data (both analytics and invoice apps are interested in contract data), we only need to publish it once. This is one of the key benefits of using pub/sub messaging pattern. While it may not seem like a major benefit in our use case, it definitely makes a difference when you are dealing with high data volumes.

Additionally, we are able to dynamically filter the dataset using PubSub+’s rich hierarchical topics instead of having all our applications consume the same data and then having to filter themselves.

Schemas and Topics

One of the benefits of using an iPaaS such as MuleSoft is that it allows you to transform your data, which can come in very handy in event-driven architecture. In our case, we will be ingesting XML payload but the output will be in JSON.

Here is the schema of the original payload (topic: company/sales/salesforce/customerAccount/all/created/v1/{accountId}):

<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="AccountId" type="xs:string"/> <xs:element name="AccountName" type="xs:string"/> <xs:element name="AccountSource" type="xs:string"/> <xs:element name="AnnualRevenue" type="xs:int"/> <xs:element name="BillingCountryCode" type="xs:string"/> <xs:element name="BillingState" type="xs:string"/> <xs:element name="CreatedDate" type="xs:dateTime"/> <xs:element name="CurrencyIsoCode" type="xs:string"/> <xs:element name="IsActive" type="xs:string"/> <xs:element name="IsArchived" type="xs:string"/> <xs:element name="IsDeleted" type="xs:string"/> <xs:element name="LastModifiedById" type="xs:string"/> <xs:element name="LastModifiedDate" type="xs:dateTime"/> <xs:element name="LastReferencedDate" type="xs:dateTime"/> <xs:element name="LastViewedDate" type="xs:dateTime"/> <xs:element name="ContactName" type="xs:string"/> <xs:element name="ContactId" type="xs:int"/> <xs:element name="ContactEmail" type="xs:string"/> <xs:element name="Description" type="xs:string"/> <xs:element name="Industry" type="xs:string"/> <xs:element name="NumberOfEmployees" type="xs:short"/> <xs:element name="Type" type="xs:string"/> <xs:element name="BillingAddress" type="xs:string"/> <xs:element name="Website" type="xs:anyURI"/> <xs:element name="ProductCode" type="xs:int"/> <xs:element name="ContractNumber" type="xs:int"/> <xs:element name="ContractAddress" type="xs:string"/> <xs:element name="Sum_Units_Sold__c" type="xs:float"/> <xs:element name="SystemModstamp" type="xs:dateTime"/> </xs:schema>

Here are the schemas for the 4 payloads after they have been parsed:

High-level account (topic: company/sales/salesforce/customerAccount/account/created/v1/{accountId}):

{ "$schema": "http://json-schema.org/draft-04/schema#", "type": "object", "properties": { "Body": { "type": "object", "properties": { "AccountId": { "type": "string" }, "AccountName": { "type": "string" }, "Website": { "type": "string" } }, "required": [ "AccountId", "AccountName", "Website" ] } }, "required": [ "Body" ] }

Contact (topic: company/sales/salesforce/customerAccount/contact/created/v1/{accountId}):

{ "$schema": "http://json-schema.org/draft-04/schema#", "type": "object", "properties": { "Body": { "type": "object", "properties": { "ContactName": { "type": "string" }, "ContactId": { "type": "string" }, "ContactEmail": { "type": "string" } }, "required": [ "ContactName" "ContactId", "ContactEmail" ] } }, "required": [ "Body" ] }

Location (topic: company/sales/salesforce/customerAccount/location/created/v1/{accountId}):

{ "$schema": "http://json-schema.org/draft-04/schema#", "type": "object", "properties": { "Body": { "type": "object", "properties": { "BillingCountryCode": { "type": "string" }, "BillingState": { "type": "string" }, "BillingAddress": { "type": "string" } }, "required": [ "BillingCountryCode", "BillingState", "BillingAddress", ] } }, "required": [ "Body" ] }

Contract (topic: company/sales/salesforce/customerAccount/contract/created/v1/{accountId}):

{ "$schema": "http://json-schema.org/draft-04/schema#", "type": "object", "properties": { "Body": { "type": "object", "properties": { "ContractNumber": { "type": "string" }, "ContractAddress": { "type": "string" } }, "required": [ "ContractNumber", "ContractAddress" ] } }, "required": [ "Body" ] }

Phew, that’s a lot of information to keep track of. We need to know our downstream applications, which events they are interested in, and what the schemas will be for those events. If only there was a design tool which allowed us to do that!

How PubSub+ Event Portal Helps You Manage Event-Driven Architecture

The “event gods” have heard your pleas and granted your wish! Solace recently launched new product called PubSub+ Event Portal that is, as we like to say, “the market’s first event management toolset to design, create, discover, catalog, share, visualize, secure and manage all the events in your enterprise”.

I used it to design the flow of our steps in our Mulesoft event-driven architecture, and here is what it looks like:

As you can see, the Salesforce app at the top publishes the original event containing raw payload, which is then parsed by MuleSoft, and published to PubSub+ for downstream applications to consume — event-driven architecture in action!

We can also create specific events and associate schemas in the Event Portal. For example, as you can see from the image above, our MuleSoft app is publishing accountContractUpdates event which is being subscribed to by InvoicingSystem application. Expanding that event shows us who created it, which topic it is published to, what the associated schema is, and which applications are subscribing and publishing this event.

Again, while they may not seem very impressive right now, imagine how useful Event Portal would be to an organization with hundreds of applications and thousands of events!

Implementing MuleSoft Event-Driven Architecture

Now that we have our events documented, we can start implementing them.

Here is what my Mule workspace looks like:

It consists of two flows: Publisher and Consumer.

The Publisher flow has an http listener which is listening to my endpoint localhost:5001/solace. When I issue a POST request against this endpoint, the listener will capture the payload and pass it to 4 different JMS Publish modules for publishing 4 different events to 4 different topics.

Here is the connection setting for JMS Publish module:

<jms:config name="Solace" doc:name="JMS Config" doc:id="635cb4d0-a727-4723-8d5f-6da38b806745" > <jms:generic-connection username="mule" password="mule"> <jms:connection-factory > <jms:jndi-connection-factory connectionFactoryJndiName="/jms/cf/default"> <jms:custom-jndi-name-resolver > <jms:simple-jndi-name-resolver jndiInitialFactory="com.solacesystems.jndi.SolJNDIInitialContextFactory" jndiProviderUrl="tcp://mule:mule@localhost:55555"> <jms:jndi-provider-properties > <jms:jndi-provider-property key="Solace_JMS_VPN" value="default" /> </jms:jndi-provider-properties> </jms:simple-jndi-name-resolver> </jms:custom-jndi-name-resolver> </jms:jndi-connection-factory> </jms:connection-factory> </jms:generic-connection> </jms:config>

And here is the config xml for one of the JMS Publish modules:

<jms:publish doc:name="Publish Account to Solace" doc:id="1a24df7f-c33d-4ca1-a551-0d097d85bb65" config-ref="Solace" destination='#[output text ns ns0 http://schemas.xmlsoap.org/soap/envelope/ --- "company/sales/salesforce/customerAccount/account/created/v1/" ++ payload.ns0#Envelope.ns0#Body.AccountId]' destinationType="TOPIC"> <jms:message > <jms:body ><![CDATA[#[output application/xml ns ns0 http://schemas.xmlsoap.org/soap/envelope/ --- { ns0#Envelope: { ns0#Body: { AccountName: payload.ns0#Envelope.ns0#Body.AccountName, Website: payload.ns0#Envelope.ns0#Body.Website } } }]]]></jms:body> </jms:message> </jms:publish>

I have a second flow called Consumer which has a simple JMS Consume module listening to a queue followed by a JMS ack module for acknowledging messages. Here is its configuration:

<flow name="Consumer" doc:id="e705a269-7978-40c5-a0d2-7279567278ad" > <jms:listener doc:name="Listener" doc:id="2c76ddb5-07ff-41aa-9496-31897f19d378" config-ref="Solace" destination="mule" ackMode="MANUAL"> <jms:consumer-type > <jms:queue-consumer /> </jms:consumer-type> </jms:listener> <logger level="INFO" doc:name="Logger" doc:id="cb53890f-9bc7-4bad-8512-55586aa61e8d" /> <jms:ack doc:name="Ack" doc:id="c2b197a8-2fcb-4954-b748-071ffde36da5" ackId="#[%dw 2.0 output application/java --- attributes.ackId]"/> </flow> You will need to create a queue for the consumer to bind to. In my case, I have created a queue called <code>mule</code> using Solace’s UI and mapped a topic to it: <code>company/sales/salesforce/customerAccount/></code> <img src="https://solace.com/wp-content/uploads/2020/07/pubsubplus-mulesoft_pic-04.png" alt="" width="1024" height="316" class="alignnone size-full wp-image-41324" /> Notice that instead of specifying an exact topic, I have used Solace’s wildcard > to select any topic that falls under that hierarchy. In our case, subscribing to this topic will allow us to consume all of the four events. Now we are ready to test our setup. Using Postman, I have sent a POST request: <img src="https://solace.com/wp-content/uploads/2020/07/pubsubplus-mulesoft_pic-05.png" alt="" width="1024" height="499" class="alignnone size-full wp-image-41323" /> And here is the output of my Mule flow: INFO 2020-05-21 13:02:55,528 [[MuleRuntime].uber.03: [solace].Consumer.CPU_LITE @85a5ceb] [processor: Consumer/processors/0; event: ea2e4270-9b84-11ea-9fe8-a483e79ba806] org.mule.runtime.core.internal.processor.LoggerMessageProcessor: org.mule.runtime.core.internal.message.DefaultMessageBuilder$MessageImplementation { payload=<?xml version='1.0' encoding='UTF-8'?> <ns0:Envelope xmlns:ns0="http://schemas.xmlsoap.org/soap/envelope/"> <ns0:Body> <AccountName>Solace</AccountName> <Website>www.solace.com</Website> </ns0:Body> </ns0:Envelope> mediaType=application/xml; charset=UTF-8 attributes=org.mule.extensions.jms.api.message.JmsAttributes@460bec31 attributesMediaType=application/java } INFO 2020-05-21 13:02:55,536 [[MuleRuntime].uber.03: [solace].Consumer.CPU_LITE @85a5ceb] [processor: Consumer/processors/0; event: ea2e4270-9b84-11ea-9fe8-a483e79ba806] org.mule.runtime.core.internal.processor.LoggerMessageProcessor: org.mule.runtime.core.internal.message.DefaultMessageBuilder$MessageImplementation { payload={ "Envelope": { "Body": { "ContactName": "Himanshu", "ContactId": "2309402", "ContactEmail": "[email protected]" } } } mediaType=application/json; charset=UTF-8 attributes=org.mule.extensions.jms.api.message.JmsAttributes@395abcae attributesMediaType=application/java } INFO 2020-05-21 13:02:55,566 [[MuleRuntime].uber.03: [solace].Consumer.CPU_LITE @85a5ceb] [processor: Consumer/processors/0; event: ea2e4270-9b84-11ea-9fe8-a483e79ba806] org.mule.runtime.core.internal.processor.LoggerMessageProcessor: org.mule.runtime.core.internal.message.DefaultMessageBuilder$MessageImplementation { payload={ "Envelope": { "Body": { "ContractNumber": "123456", "ContractAddress": "535 Legget Drive, 3rd Floor, Ottawa, Canada" } } } mediaType=application/json; charset=UTF-8 attributes=org.mule.extensions.jms.api.message.JmsAttributes@6a4910db attributesMediaType=application/java } INFO 2020-05-21 13:02:55,574 [[MuleRuntime].uber.03: [solace].Consumer.CPU_LITE @85a5ceb] [processor: Consumer/processors/0; event: ea2e4270-9b84-11ea-9fe8-a483e79ba806] org.mule.runtime.core.internal.processor.LoggerMessageProcessor: org.mule.runtime.core.internal.message.DefaultMessageBuilder$MessageImplementation { payload={ "Envelope": { "Body": { "BillingCountryCode": "US", "BillingState": "NY", "BillingAddress": "535 Legget Drive, 3rd Floor, Ottawa, Canada" } } } mediaType=application/json; charset=UTF-8 attributes=org.mule.extensions.jms.api.message.JmsAttributes@130e6e64 attributesMediaType=application/java }

As you can see, our single consumer in our Consumer Mule flow was able to consume all the messages from our queue (mule) which was subscribing to just one topic.

Of course, to fully leverage the power of pub/sub messaging, event-driven architecture and Mulesoft, you can show having multiple consumers using Solace’s rich hierarchal topics to consume select events.

Get on the road to event-driven architecture!

That’s it for this post! I wanted to show you how you can make iPaaS tools such as MuleSoft even more powerful by adding pub/sub messaging to enable event-driven architecture. With Solace PubSub+, you can easily use JMS standard to connect to it and publish/consume messages.

If you work with an iPaaS, I highly recommend considering PubSub+ to make your applications event-driven. PubSub+ Standard Edition is free to use, even in production!

The post Achieving Event-Driven Architecture with Solace PubSub+ Event Broker and MuleSoft appeared first on Solace.

Achieving Event-Driven Architecture with Solace PubSub+ Event Broker and MuleSoft published first on https://jiohow.tumblr.com/

0 notes

holytheoristtastemaker · 4 years

Quote

If you're building a mobile application and you need access to the user's contacts you wouldn't give it a second thought, but on the web this feature was missing. The Chrome team saw this gap and got to work on an API that makes users' contacts available to developers with the security and privacy expected on the web. That API is now available in Chrome 80 on Android M or later. In this post we will investigate the new Contact Picker API and put it to use it in a Twilio Client application to add contact selection for making browser phone calls. The Contact Picker API The Contact Picker API consists of the ContactsManager object, available as the contacts property on the navigator object. As it is only supported on Chrome on Android for now, the first thing we should concern ourselves with is checking for support. We can do so with this line: const supportsContacts = ('contacts' in navigator && 'ContactsManager' in window); We should be sure to wrap any code that uses the Contact Picker API in a conditional test for support so that we don't cause JavaScript errors in browsers that don't support it. Once we have checked we can use it, we turn our attention to the navigator.contacts.select function. It takes two arguments, an array of properties you want to retrieve about the contacts and an object of options. The properties available are "name", "email", and "tel". (though there is an origin trial available for two extra properties; "address" and "icon"). There is one available option for the second argument—"multiple"—which can be true or false depending on whether you want to be able to return one or multiple contacts. select will show the user a modal with an interface that allows them to select contacts and then returns a promise. The promise resolves with an array of contacts (even if you only asked for one). Each contact will have an array property for each of the properties you requested (as contacts applications allow for more than one phone number or email address). For example: navigator.contacts.select(["name", "tel"]) .then(contacts => { console.log(contacts); }) .catch(console.error); //=> [{ "name": ["Phil Nash"], "tel": ["+61412345678", "+447123456789"]}] Since we are returning a promise you can also use async/await: try { const contacts = await navigator.select(["name", "tel"]); console.log(contacts); } catch(error) { console.error(error); } //=> [{ "name": ["Phil Nash"], "tel": ["+61412345678", "+447123456789"]}] It's up to your application to then display the contact and allow the user to select the properties of the contact to use within the application. The Contact Picker API requires a user gesture to be activated and will only run on a secure domain, like other new web APIs that give access to potentially sensitive data. It should also be noted that every time you call the API it will show the contact selector modal, so there is no permanent access to the user's contacts and the user always has control over the data they share. That's the theory done with, let's add this to an application to see it in action. Using the Contact Picker API in an application I've built, as a starter for this post, a simple Twilio Client based application that can make calls from the browser. We're going to add the ability to choose who we call from the device's contacts using the Contact Picker API. Preparing the application You will need a few things to run this application: Node.js A Twilio account (if you don't have one, sign up for a new Twilio account here and receive $10 credit when you upgrade) A phone number you can make Twilio calls from ngrok so we can expose our local server and receive incoming webhooks An Android device with some contacts for testing Once you have those, start by cloning or downloading the getting-started branch of the application from GitHub: git clone https://github.com/philnash/contact-picker-twilio-client.git -b getting-started cd contact-picker-twilio-client Install the dependencies: npm install Copy the .env.example file to .env: cp .env.example .env You now need to fill in the .env file with your account credentials. You can find your Twilio Account SID in your Twilio console. You also need to generate an API key and collect both the SID and the secret (check out this video if you want to know more about API keys and secrets). For the caller ID, you can either buy a new phone number or verify your own phone number. The final thing you need is a TwiML App. A TwiML App is a collection of webhook URLs that Twilio can use to connect calls to your application. For Twilio Client, when you initiate a call from the browser Twilio needs to know what to do with the call next, so consults a TwiML App to find a voice URL to make a request to. To set this up we need to make a tunnel to our local server using ngrok. The application starts on port 3000, so run: ngrok http 3000 Then grab the ngrok URL and create a TwiML App giving it the Voice URL https://YOUR_NGROK_SUBDOMAIN.ngrok.io/voice. That's all the config sorted, now run the application with: npm start It will look like this: Enter your phone number into the input field, click dial and you will receive a call. Adding the Contact Picker API Open up the project in your editor or IDE and load up client/app.js. This is all the code, aside from the Twilio Client JS library, that it takes to run this application. To add the Contact Picker API to this we need to do a few things: Check whether we have support for the API Add a button to the interface to trigger the API Listen to the click event and call the Contact Picker API Handle the response from the API and fill in the input with the contact's number To get this started, at the bottom of the init function let's do our check to see if the API is supported. If it is we have more code to write, but if it's not let's show an explanatory message. }); }); if ("contacts" in navigator && "ContactsManager" in window) { } else { const notSupported = document.createElement("p"); notSupported.classList.add("error"); notSupported.innerText = "Sorry, the contact picker API is not supported in your browser."; dialBtn.insertAdjacentElement("afterend", notSupported); } }; window.addEventListener("DOMContentLoaded", init); Next up, we'll get a reference to the element on the page, create a button and append it to the element. if ("contacts" in navigator && "ContactsManager" in window) { const mainElt = document.getElementsByTagName("main")[0]; const contactsButton = document.createElement("button"); contactsButton.innerText = "Choose contact"; mainElt.appendChild(contactsButton); } We need to trigger the Contact Picker API when a user clicks on this button (note: the API requires an interaction like a click, so you can't trigger it on a page load). When we call the Contact Picker API we pass it an array of properties, in this case we just want the contact name and telephone number. We can also pass whether we want multiple contacts or not as an object. We'll also use async/await to handle the asynchronous response from the API. For this our handler function will need to be declared as an async function. Add the event handler before the code to append the button to the page. contactsButton.innerText = "Choose contact"; contactsButton.addEventListener("click", async () => { const contactProperties = ["name", "tel"]; const options = { multiple: false }; const contacts = await navigator.contacts.select(contactProperties, options); }); mainElt.appendChild(contactsButton); } Once the call to the API resolves the contacts variable will be an array. If the user selected one contact it will have one item, if you passed the options { multiple: true } then it may have more than one item, but if the user didn't select a contact at all then it will be an empty array. Before we move on we should check that there is a contact in the array. Once we are sure we have a contact, we can extract their name and telephone number too. A contact object will have a property for each of the properties we asked for, in this case "name" and "tel". Those properties will be arrays that could contain zero, one or more entries. During testing, I found that contacts may have blank entries in the array, so we'll want to filter those out too. For this application if there is no phone number available we are going to ignore it, otherwise we'll add the phone number as the value of the input and add the name to the "Dial" button. const contacts = await navigator.contacts.select(contactProperties, options); if (contacts.length > 0) { const contact = contacts[0]; const contactNumber = contact.tel.filter(tel => tel.length > 0)[0]; const contactName = contact.name.filter(name => name.length > 0)[0]; if (contactNumber) { phoneNumInput.value = contactNumber.replace(/\s/g, ""); dialBtn.innerText = `Dial ${contactName}`; } } }); } That is all the code you need to test this out. Open up your application on an Android device in Chrome (you can use your ngrok URL for this too). It should work like this: The Contact Picker API is here In this post we've seen an introduction to the Contact Picker API and an example of it in a web application that uses it to make calling contacts easier. You can see the complete version of this phone and contacts web application on GitHub. We also saw that we should test for the existence of this API as it is currently only available on Chrome 80 on Android M and up. It remains to be seen whether other browsers will implement this, but you can progressively enhance the experience of some of your users with this API. This API is useful not only for communications applications like we have built, but for sharing content with a user's contacts or even bootstrapping a social graph for a user. Do you have any ideas for what to build with this API? Share them with me in the comments below

http://damianfallon.blogspot.com/2020/04/an-introduction-to-web-contact-picker.html

#SEO #Local SEO training

0 notes

kadobeclothing · 5 years

Text

How to Create an HTML Form That Sends You an Email

Sometimes, improving UX can cost a lot of money. And oftentimes, some of the problems website visitors have are easy, simple fixes. That begs the question: How can you find out if customers are enjoying their website experience? The answer may be simpler than you think. Having forms on your website is an effective way to get customer feedback about their experience during their visit. These forms give you insight about how to improve your website’s UX for higher conversions in the long run.

Whether you want to convert more visitors to leads, collect information for your sales team, or create more loyal brand advocates, forms are imperative to an inbound strategy. Ultimately, forms are critical for solving dissatisfaction in a customer’s experience, which ensures stronger customer relationships. If you don’t have a form on your website, you could be missing out on more leads, higher conversions, and happier long-term customers. Here, we’re going to walk you through how to create a certain type of form — one that sends an email to you, as well as the customer, to ensure the form was received. How to Create a Form in HTML and Send it to Email It is possible to create an HTML form that sends emails, but it depends on how you work and on what platform you’re working. This is to say that things are a little different if the plan is to use a mix of HTML and different scripts. Using the Basics Using just HTML? We’ve got you covered. From starting fresh, here is a sample code for use: <form action=”mailto:[email protected]” method=”POST” enctype=”multipart/form-data” name=”EmailForm”> Name:<br> <input type=”text” size=”19″ name=”ContactName”><br><br> Message:<br> <textarea name=”ContactCommentt” rows=”6″ cols=”20″> </textarea><br><br> <input type=”submit” value=”Submit”> </form> This code will create a form that asks for the contact’s name, message, and includes a submit button. Note that this code is basic — it won’t look super snazzy. For a more beautiful one, you’ll have to add some more lines of code specific to your needs. Another thing to note with this code is that it doesn’t directly send to email addresses, but it can open in an email client or tool window to submit the form. To make it so the form can work with your email server and send it to a mailbox, PHP is the answer — let’s explore that option now. Making a Complete Form To create a form subscribers can contact you with, the PHP script is going to be your best friend. I know, another acronym. This one stands for Hypertext Preprocessor, and this language collaborates with HTML to process the form. If you need to make a complete form, follow the steps below.

How to Make an HTML Form that Sends Email

Use PHP to create a page. Make the form using code. Make forms send email.

When you’re creating a webpage, instead of using the “.html” extension, type “.php” instead. This is similar to what happens when you save an image as “jpg” versus “png”. By doing this, the server will know to host the PHP you write. Instead of saving the empty HTML page as such, save it as something like this: “subscriberform.php”. After your page is created and saved, you’ll then be able to create the form. In this step, you’ll write the code to create the form. The following code is what’s needed for a basic form: <form method=”post” action=”subscriberform.php”> <textarea name=”message”></textarea> <input type=”submit”> </form> Because this is similar to the HTML-only write-up, these lines will also create a name for the form and an area for subscribers to type a custom message and send it to you. An important difference is the “action=contact.php” part. This portion of code is what will make the page send the form when submitted. Recall that in the first example, that wasn’t an option. After you create the form and add all the proper fixings depending on your design preferences, it’s time to create the email portion. For this, you’re going to scroll to the beginning of the page (the very beginning). To enable sending data in the email, we have to add code that will process the data. Copy this code or create something similar: <?php if($_POST[“message”]) { mail(“[email protected]”, “Here is the subject line”, $_POST[“insert your message here”]. “From: [email protected]”); } ?> Recall that everything inside the first and last lines will tell the webpage to make these functions perform as PHP. This code also checks to see if a subscriber uses the form. From there, it checks to see if the form was sent. Further breaking it down, “mail” sends the completed form as an email to “[email protected],” and the subject line is what follows. In the next line, you can write copy of the email message inside the quotes, to be sent from whichever email address you choose. With that, you have the basic code you need to create the form. Note that this is just one way to do this — alternatively, you can also create a form using a CRM like HubSpot. If you’re a HubSpot customer, keep reading to learn how to use HubSpot’s tool to create an HTML form that sends you an email. Using HubSpot HubSpot Forms is part of the Marketing Hub, and doesn’t require any previous technical knowledge. If you want to learn how to receive an email after a form submission, take a look at our Knowledge Base article. When you’re using HubSpot Forms, you can build custom forms that connect to your contacts list. You can also customize those forms and trigger automatic emails based on the completion of your forms. Note that the latter requires a premium upgrade. Click here for more information about HubSpot’s forms. HTML forms are a fairly simple process and an excellent way to connect with subscribers. Having these on your site gives customers an easy way to contact your company or sign-up for emails. Forms that send an email back to you keeps information in your inbox for reference and ease. Remember that these aren’t your only options for building forms. If you want a list of tools that help build forms, check out our post here.

Source link

source https://www.kadobeclothing.store/how-to-create-an-html-form-that-sends-you-an-email/

0 notes

mauricemuteti2015 · 7 years

Video

youtube

import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.logging.Level; import java.util.logging.Logger; import javax.swing.table.DefaultTableModel;

/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */

/** * * @author Authentic */ public class populateJTableJavaPostgresqlDatabase extends javax.swing.JFrame { PreparedStatement pst = null; ResultSet rst = null; Connection connDbc = null; databaseConnection dbc = new databaseConnection(); public populateJTableJavaPostgresqlDatabase() { initComponents(); connDbc = dbc.databaseConn(); populateJtable(); }

public void populateJtable() {

try { String sqlSelectDataFromDatabase = "select * from customers limit 10"; pst = connDbc.prepareStatement(sqlSelectDataFromDatabase); rst = pst.executeQuery();

while(rst.next()) { String copanyname = rst.getString("CompanyName"); String ContactName = rst.getString("ContactName"); String ContactTitle = rst.getString("ContactTitle"); String Address = rst.getString("Address");

DefaultTableModel dftable = (DefaultTableModel) jTablePopulateData.getModel(); Object[] obj = {copanyname,ContactName,ContactTitle,Address}; dftable.addRow(obj); }

} catch (SQLException ex) { Logger.getLogger(populateJTableJavaPostgresqlDatabase.class.getName()).log(Level.SEVERE, null, ex); }

} @SuppressWarnings("unchecked") // <editor-fold defaultstate="collapsed" desc="Generated Code"> private void initComponents() {

jScrollPane1 = new javax.swing.JScrollPane(); jTablePopulateData = new javax.swing.JTable();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

jTablePopulateData.setModel(new javax.swing.table.DefaultTableModel( new Object [][] {

}, new String [] { "Title 1", "Title 2", "Title 3", "Title 4" } )); jScrollPane1.setViewportView(jTablePopulateData);

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addContainerGap() .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 375, javax.swing.GroupLayout.PREFERRED_SIZE) .addContainerGap(19, Short.MAX_VALUE)) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 275, javax.swing.GroupLayout.PREFERRED_SIZE) .addGap(0, 25, Short.MAX_VALUE)) );

pack(); }// </editor-fold>

/** * @param args the command line arguments */ public static void main(String args[]) { /* Set the Nimbus look and feel */ //<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) "> /* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel. * For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html */ try { for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) { if ("Nimbus".equals(info.getName())) { javax.swing.UIManager.setLookAndFeel(info.getClassName()); break; } } } catch (ClassNotFoundException ex) { java.util.logging.Logger.getLogger(populateJTableJavaPostgresqlDatabase.class.getName()).log(java.util.logging.Level.SEVERE, null, ex); } catch (InstantiationException ex) { java.util.logging.Logger.getLogger(populateJTableJavaPostgresqlDatabase.class.getName()).log(java.util.logging.Level.SEVERE, null, ex); } catch (IllegalAccessException ex) { java.util.logging.Logger.getLogger(populateJTableJavaPostgresqlDatabase.class.getName()).log(java.util.logging.Level.SEVERE, null, ex); } catch (javax.swing.UnsupportedLookAndFeelException ex) { java.util.logging.Logger.getLogger(populateJTableJavaPostgresqlDatabase.class.getName()).log(java.util.logging.Level.SEVERE, null, ex); } //</editor-fold>

/* Create and display the form */ java.awt.EventQueue.invokeLater(new Runnable() { public void run() { new populateJTableJavaPostgresqlDatabase().setVisible(true); } }); }

// Variables declaration - do not modify private javax.swing.JScrollPane jScrollPane1; private javax.swing.JTable jTablePopulateData; // End of variables declaration }

0 notes