{"id":27979,"date":"2022-07-15T07:47:34","date_gmt":"2022-07-15T07:47:34","guid":{"rendered":"http:\/\/build-a-contact-form-directory-with-user-avatars"},"modified":"2022-07-15T07:47:34","modified_gmt":"2022-07-15T07:47:34","slug":"build-a-contact-form-directory-with-user-avatars","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/","title":{"rendered":"Build a Contact Form Directory with User Avatars"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>A contact form directory is simply a list of contacts with details such as name, phone number, email, and in our case user avatars. In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.\n<a href=\"http:\/\/cloudinary.com\">Cloudinary<\/a> is a platform on which we can upload, store, manage, transform, and deliver images and videos for web and mobile applications.\n<a href=\"https:\/\/chakra-ui.com\/\">Chakra UI<\/a> is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.<\/p>\n<h2>Pre-requisites<\/h2>\n<p>To follow along with this tutorial, you\u2019ll need the following:<\/p>\n<ul>\n<li>Knowledge of JavaScript and React<\/li>\n<li>Nodejs &gt;=v14 installed<\/li>\n<li>A code editor (VS Code preferably)<\/li>\n<li>A Cloudinary account. <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Signup<\/a> is free!<\/li>\n<\/ul>\n<p>The complete code and demo to this tutorial is on <a href=\"https:\/\/codesandbox.io\/embed\/react-cloudinary-contact-form-vd56jx?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">Codesandbox<\/a>.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/react-cloudinary-contact-form-vd56jx?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"react cloudinary contact form\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h2>Creating user avatar tags with Cloudinary<\/h2>\n<p>Let\u2019s go ahead and create the user avatars on Cloudinary.\nFollow these steps:<\/p>\n<ul>\n<li>\n<p>Login to cloudinary<\/p>\n<\/li>\n<li>\n<p>Click on Media Library<\/p>\n<\/li>\n<li>\n<p>Navigate to the <strong>samples<\/strong> folder<\/p>\n<\/li>\n<li>\n<p>Open the animals folder or chose any folder\/images of your choice. You should be presented with this screen:\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3250616D48D78009DE565CD7113B08CE1F6C36CC8152584363AD21B7674B271C_1657280436824_Screenshot+2022-07-08+at+12.40.02.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1099\"\/><\/p>\n<\/li>\n<li>\n<p>Hover over the first image, click the check box, and click on the <strong>Metadata<\/strong> on the far right sidebar\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3250616D48D78009DE565CD7113B08CE1F6C36CC8152584363AD21B7674B271C_1657280582684_Screenshot+2022-07-08+at+12.42.46.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1097\"\/><\/p>\n<\/li>\n<li>\n<p>Like in the image above, add email, phone, and username as keys and give them values of your choice.<\/p>\n<\/li>\n<li>\n<p>Save and repeat the steps with other images.<\/p>\n<\/li>\n<li>\n<p>Now select all the images and click on the tag icon. Name your tags <code>user-avatars<\/code> and click on Update.\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3250616D48D78009DE565CD7113B08CE1F6C36CC8152584363AD21B7674B271C_1657280908523_Screenshot+2022-07-08+at+12.48.06.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1095\"\/><\/p>\n<\/li>\n<\/ul>\n<p>Now we have created our tag, let\u2019s extract the JSON object.<\/p>\n<h2>Extracting the JSON object<\/h2>\n<p>Cloudinary automagically creates a REST API endpoint from our tags. Let\u2019s extract the <code>user-avatar<\/code> tag.\n<code>https:\/\/res.cloudinary.com\/&lt;your-cloud-name&gt;\/image\/``*list\/user-avatars.json*<\/code>. Replace <code>your-cloud-name<\/code> with your cloudinary cloud name and paste the url on your browser. You should see something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3250616D48D78009DE565CD7113B08CE1F6C36CC8152584363AD21B7674B271C_1657281526840_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1440\" height=\"1153\"\/><\/p>\n<p>If you\u2019ve gotten to this point, you\u2019re Awesome! Now we have our REST API object, let\u2019s implement our UI with React and Chakra UI.<\/p>\n<h2>Implementing the UI and consuming the API<\/h2>\n<p>Let\u2019s go ahead and setup the React project. Run this command on your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-id\">#bash<\/span>\n<span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-react-app<\/span> <span class=\"hljs-selector-tag\">contact-directory<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When it\u2019s done installing, change directory to the project directory and run the React app with <code>npm run start<\/code>.\nGo ahead and delete all the files in the <code>src<\/code> directory except <code>App.js<\/code> and <code>index.js<\/code>.<\/p>\n<p>Let\u2019s now install Chakra UI. Run this command on your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">i<\/span> <span class=\"hljs-keyword\">@chakra-ui<\/span>\/react @emotion\/react @emotion\/styled framer-motion\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When it\u2019s done installing, update the <code>index.js<\/code> to look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">#src\/index.js<\/span>\n\nimport React from <span class=\"hljs-string\">'react'<\/span>;\nimport ReactDOM from <span class=\"hljs-string\">'react-dom\/client'<\/span>;\nimport App from <span class=\"hljs-string\">'.\/App'<\/span>;\nimport { ChakraProvider } from <span class=\"hljs-string\">'@chakra-ui\/react'<\/span>\n    \n    \n<span class=\"hljs-keyword\">const<\/span> root = ReactDOM.createRoot(document.getElementById(<span class=\"hljs-string\">'root'<\/span>));\n  root.render(\n    &lt;ChakraProvider&gt;\n      &lt;React.StrictMode&gt;\n        &lt;App \/&gt;\n      &lt;\/React.StrictMode&gt;\n    &lt;\/ChakraProvider&gt;\n  );\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, we\u2019ve added <code>ChakraProvider<\/code> over <code>App<\/code> so we can use Chakra UI anywhere in our project.\nGo ahead and clear the content of <code>App.js<\/code> and add these lines of code to flesh out our UI.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">#src\/App.js\nimport {\n  Box,\n  Text,\n  Avatar,\n  Table,\n  Thead,\n  Tbody,\n  Tr,\n  Th,\n  Td,\n  TableCaption,\n  TableContainer,\n} from '@chakra-ui\/react'\n    \nfunction App() {\n  return (\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Box<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TableContainer<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Table<\/span> <span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">'simple'<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TableCaption<\/span>&gt;<\/span>Animal Farm contact list<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">TableCaption<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Thead<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Avatar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Phone number<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Thead<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Tbody<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Avatar<\/span>\n                  <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"user-avatar\"<\/span>\n                \/&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span> Chris <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>chris@gmail.com<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>09087654321<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Tbody<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Table<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">TableContainer<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Box<\/span>&gt;<\/span>\n  );\n}\nexport default App\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Navigate to your browser and you should be presented with this screen:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3250616D48D78009DE565CD7113B08CE1F6C36CC8152584363AD21B7674B271C_1657282711988_Screenshot+2022-07-08+at+13.18.20.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"989\"\/><\/p>\n<p>Awesome! Let\u2019s now integrate the cloudinary API.\nAdd the following lines of code<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;userInfo, setUserInfo] = useState(<span class=\"hljs-literal\">null<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> baseURL = <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/sammy365\/image\"<\/span>;\n    \n  <span class=\"hljs-keyword\">const<\/span> getUserAvatar = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> fetch(\n      <span class=\"hljs-string\">`<span class=\"hljs-subst\">${baseURL}<\/span>\/list\/user-avatars.json`<\/span>\n    );\n    <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> res.json();\n    setUserInfo(data);\n  };\n    \n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    getUserAvatar();\n  });\n  <span class=\"hljs-keyword\">return<\/span>()\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, we create a <code>userInfo<\/code> variable that will hold our user info data. We also fetch the JSON data from the cloudinary url we constructed earlier.\nLet\u2019s now use our data in the templates. Update your code to look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">#App.js    \n...\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Thead<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Avatar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Th<\/span>&gt;<\/span>Phone number<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Th<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Thead<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Tbody<\/span>&gt;<\/span>\n    {userInfo &amp;&amp;\n    userInfo.resources.map((info) =&gt; {\n    const { format, public_id, version, type, } = info;\n    \n    return (\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Tr<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{version}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Avatar<\/span>\n            <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">baseURL<\/span>}\/${<span class=\"hljs-attr\">type<\/span>}\/<span class=\"hljs-attr\">v<\/span>${<span class=\"hljs-attr\">version<\/span>}\/${<span class=\"hljs-attr\">public_id<\/span>}<span class=\"hljs-attr\">.<\/span>${<span class=\"hljs-attr\">format<\/span>}`}\n            <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"user-avatar\"<\/span>\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>{info.context.custom.username}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>{info.context.custom.email}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>{info.context.custom.phone}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Td<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Tr<\/span>&gt;<\/span>\n    )\n    })}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Tbody<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Save and head to your browser. You should see something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3250616D48D78009DE565CD7113B08CE1F6C36CC8152584363AD21B7674B271C_1657283276695_Screenshot+2022-07-08+at+13.27.43.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1098\"\/><\/p>\n<p>If you\u2019ve followed to this point, you\u2019re Awesome! That\u2019s our contact form directory.<\/p>\n<h2>Conclusion<\/h2>\n<p>You can go ahead and add more images and Metadata to the <code>user-avatars<\/code>  tag and your app will receive the updates. In this post, we learned how to create a contact form directory with React, Cloudinary tags and Chakra UI.<\/p>\n<p>Happy Coding!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27980,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246,371],"class_list":["post-27979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build a Contact Form Directory with User Avatars<\/title>\n<meta name=\"description\" content=\"In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Contact Form Directory with User Avatars\" \/>\n<meta property=\"og:description\" content=\"In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-15T07:47:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"878\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build a Contact Form Directory with User Avatars\",\"datePublished\":\"2022-07-15T07:47:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\",\"name\":\"Build a Contact Form Directory with User Avatars\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA\",\"datePublished\":\"2022-07-15T07:47:34+00:00\",\"description\":\"In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA\",\"width\":1600,\"height\":878},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Contact Form Directory with User Avatars\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Contact Form Directory with User Avatars","description":"In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/","og_locale":"en_US","og_type":"article","og_title":"Build a Contact Form Directory with User Avatars","og_description":"In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-15T07:47:34+00:00","og_image":[{"width":1600,"height":878,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/"},"author":{"name":"","@id":""},"headline":"Build a Contact Form Directory with User Avatars","datePublished":"2022-07-15T07:47:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA","keywords":["Guest Post","Image","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/","name":"Build a Contact Form Directory with User Avatars","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA","datePublished":"2022-07-15T07:47:34+00:00","description":"In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA","width":1600,"height":878},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-contact-form-directory-with-user-avatars\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Contact Form Directory with User Avatars"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925773\/Web_Assets\/blog\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939\/847bd4a23010cd97589e75a5c3bd61e1fa40a810-1600x878-1_27980b5939.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27979"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27979\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27980"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}