Connecting HTML/PHP Form Through API

wdjames at April 23rd, 2019 05:59 — #1

Hello,

We have a client that wants to integrate their website contact forms to their OnePageCRM account. Once the contact form is submitted, they would like to create a new contact and save the submitted details into their OnePageCRM account.

We've had a look at the API documentation but would like to see a basic tutorial/demo of how this can be done with a html/php form(not a Wordpress site or Mailchimp form) as we feel that the documentation is lacking for those who work mainly in the front-end.

Thanks

vladimir at April 23rd, 2019 16:48 — #2

Hi James!

At the moment we have no examples on how to work with API from the front-end, but here's what you can do on your side.
You can do ajax requests to OnePageCRM using your preferred ajax library like axios or simply with jQuery. OnePageCRM provides basic way of authorization, in order to do that you have to construct auth token and set it to Authorization header in your requests. Auth token is constructed from your user ID and app key (all this data you can find here https://app.onepagecrm.com/app/api, tab Configuration). Here's an example of how you can construct this auth token using crypto-js library (auth token is a based64 encode string of concatenation of your user ID and app key delimited by a semicolon):

function onepagecrmAuthToken(UID, APIKey) { // auth header for requests 
    var authToken = UID + ":" + APIKey;
    var authTokenWordArray = CryptoJS.enc.Utf8.parse(authToken); // Word Array object
    var encryptedAuthToken = CryptoJS.enc.Base64.stringify(authTokenWordArray);
    return encryptedAuthToken;
}

Now you can add Authorization header to your requests with value of 'Basic ' + onepagecrmAuthToken(myUserId, myAppKey). here's an example of it with jQuery:

var authToken = onepagecrmAuthToken(myUserId, myAppKey);
$.ajax({
    type: 'GET',
    url: 'https://app.onepagecrm.com/api/v3/contacts.json',
    headers: { "Authorization": "Basic " + authToken },
    success: function(data) {
      console.log("I have some data here!\n" + data);
    },
});

I hope this information helped you, please feel free to contact us if you have any questions. More information about our endpoints you can find in API section https://developer.onepagecrm.com/api

Our endpoints are RESTful, so in order to create a contact you can do a POST request to https://app.onepagecrm.com/api/v3/contacts supplying contact data in request body, the list of necessary fields you can find here https://developer.onepagecrm.com/api/#operations-Contacts-post_contacts

Thanks,
Vlad

jameswood32 at July 29th, 2025 05:22 — #3

Connecting an HTML/PHP form through an API is a common and efficient way to handle form submissions, especially when working with backend services or third-party platforms. The key is to use the form's data as input and send it via a secure HTTP request—typically a POST—to the API endpoint.

Here’s how you can do it in basic steps:

HTML Form: Create your HTML form with appropriate input fields and use method="POST".

html
Copy
Edit

Submit
JavaScript or PHP: Instead of a standard form submission, you can use JavaScript (AJAX/fetch) to send the data to your API. Or in PHP, use cURL to POST the data.

PHP Example using cURL:

php
Copy
Edit
$data = ['name' => $_POST['name'], 'email' => $_POST['email']];
$ch = curl_init('https://api.example.com/submit');
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
Always make sure your API uses HTTPS for secure data transfer and validates inputs properly to avoid vulnerabilities.

This method allows seamless integration between your front-end forms and external or internal APIs for processing data, storing user inputs, or triggering workflows.