![]() Basically, you can collect data using a form on your website and use it to make spreadsheets, contacts list, booking calendars, and more. ![]() That’s all! Once you add this script file, test your application by posting some data via your form and observe what happens.Do you want to make a custom Airtable form for your WordPress site?Īirtable is a data management tool that lets you create your own custom data-driven apps. You can also customize an error message if an error occurs under the. Here you can do anything you’d like your page to do once a user posts this could be a redirect to another page, show a success message etc. then shows what should happen if the post is successful. The next part basically passes the headers we declared, and the. The fields in quotes are the names of the fields in Airtable and they are case sensitive.ħ. The fields section basically links the form inputs to the fields to the table over in airtable. Its syntax should be something like ****/ContactInfo. Replace with the url you copied from the API page. Add the following line of code in your section:Ħ. Before we proceed, since axios is a third party library, we need to import it in our HTML file in order to use it. Next, we add the axios function to post the form.First we add a preventDefault function which prevent the form from being submitted by the default HTML function.We create an event listener that will handle the posting. Next, we declare what should happen when a user submits a form by clicking on the submit button whose type we set to submit.The other header is the content type which we will set to json as shown. This is where we use the secret API key generated by Airtable. The next thing we do is create our headers which will be appended to our request.We assign the form to the variable thisForm. The first thing we do is get our form by referencing its ID.var thisForm = document.getElementById("contactForm") const headers_ = ) Inside it, add the following code which we will go through to better understand it. Next, we go to the most important section, which is the script that posts our data to airtable.Īt the end of your html file just above any other script files you may have, create a new tag pair where we will add our javascript code. Here is my form: Īs you can see, I have created the fields I added in my contact table. Again, in this step, add the fields you added in your table on Airtable. Since we now have our API url and special API key, lets jump to the HTML form. With this, we are set to post to our form! In my case, I’ll copy from https to info. Here, let’s copy the url of our table, starting from https till the end of the first line, leaving the backlash. Choose the appropriate field type by clicking on “ Customize field type”Īs you can see, it shows an example of a curl post, posting the sample record we had added earlier. There are several field types such as text, checkbox, radio, email etc.Remember to click enter after entering the new name. To edit the field names, click on the drop down next to each of the default fields and select “ Rename field” and enter the name you’d like. In my case, I will be collecting a person’s name, their email address and their message since it’s supposed to be a contact form on a website. You should edit these to match the inputs you are collecting in your HTML form. By default, airtable creates some fields for you( Name, Notes, Attachments, etc).To edit the name, click on the small dropdown next to Table 1 and choose rename table. This table will have the fields in our HTML form, so you can give it a name that explains what data it collects. “ Table 1” is the name of the table that we will be using.You can click on the text and give it a name you prefer. “ Untitled Base” is the name of your base, and think of this as a database that can have multiple tables that can be interlinked.
0 Comments
Leave a Reply. |