Recherche avancée
Médias (91)
-
Chuck D with Fine Arts Militia - No Meaning No
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Paul Westerberg - Looking Up in Heaven
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Le Tigre - Fake French
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Thievery Corporation - DC 3000
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Dan the Automator - Relaxation Spa Treatment
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Gilberto Gil - Oslodum
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
Autres articles (41)
-
(Dés)Activation de fonctionnalités (plugins)
18 février 2011, parPour gérer l’ajout et la suppression de fonctionnalités supplémentaires (ou plugins), MediaSPIP utilise à partir de la version 0.2 SVP.
SVP permet l’activation facile de plugins depuis l’espace de configuration de MediaSPIP.
Pour y accéder, il suffit de se rendre dans l’espace de configuration puis de se rendre sur la page "Gestion des plugins".
MediaSPIP est fourni par défaut avec l’ensemble des plugins dits "compatibles", ils ont été testés et intégrés afin de fonctionner parfaitement avec chaque (...) -
Le plugin : Podcasts.
14 juillet 2010, parLe problème du podcasting est à nouveau un problème révélateur de la normalisation des transports de données sur Internet.
Deux formats intéressants existent : Celui développé par Apple, très axé sur l’utilisation d’iTunes dont la SPEC est ici ; Le format "Media RSS Module" qui est plus "libre" notamment soutenu par Yahoo et le logiciel Miro ;
Types de fichiers supportés dans les flux
Le format d’Apple n’autorise que les formats suivants dans ses flux : .mp3 audio/mpeg .m4a audio/x-m4a .mp4 (...) -
Les autorisations surchargées par les plugins
27 avril 2010, parMediaspip core
autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs
Sur d’autres sites (7625)
-
FFmpeg Overwiting Playlist
30 septembre 2024, par Program-Me-RevI'm working on an implementation where I aim to generate a DASH Playlist from Raw Camera2 data in Android Java using FFmpeg


However , the current implementation only produces Three .m4s files regardless of how long the recording lasts . My goal is to create a playlist with 1-second .m4s Segments , but the output only includes the following files , and the video length doesn't exceed 2 seconds :


- playlist.mpd
- init.m4s
- 1.m4s
- 2.m4s


While the temporary files are created as expected , the .m4s files stop after these two segments . Additionally , only the last 2 seconds of the recording are retained , no matter how long the recording runs


The FFmpeg output indicates that FFmpeg is repeatedly overwriting the previously generated playlist , which may explain why the recording doesn't extend beyond 2 seconds


FFmpeg version : 6.0


package rev.ca.rev_media_dash_camera2;

 import android.app.Activity;
 import android.content.Context;
 import android.media.Image;
 import android.util.Log;
 import android.util.Size;

 import androidx.annotation.NonNull;
 import androidx.camera.core.CameraSelector;
 import androidx.camera.core.ImageAnalysis;
 import androidx.camera.core.ImageProxy;
 import androidx.camera.core.Preview;
 import androidx.camera.lifecycle.ProcessCameraProvider;
 import androidx.camera.view.PreviewView;
 import androidx.core.content.ContextCompat;
 import androidx.lifecycle.LifecycleOwner;

 import com.arthenica.ffmpegkit.FFmpegKit;
 import com.arthenica.ffmpegkit.ReturnCode;
 import com.google.common.util.concurrent.ListenableFuture;

 import java.io.File;
 import java.io.FileOutputStream;
 import java.io.IOException;
 import java.nio.ByteBuffer;
 import java.util.concurrent.ExecutionException;
 import java.util.concurrent.ExecutorService;
 import java.util.concurrent.Executors;

 public class RevCameraCapture {
 private static final String REV_TAG = "RevCameraCapture";

 private final Context revContext;
 private final ExecutorService revExecutorService;
 private final String revOutDirPath = "/storage/emulated/0/Documents/Owki/rev_web_rtc_live_chat_temp_files/_abc_rev_uploads_temp";
 private boolean isRevRecording;
 private File revTempFile;
 private int revFrameCount = 0; // Counter for frames captured

 public RevCameraCapture(Context revContext) {
 this.revContext = revContext;

 revInitDir(revOutDirPath);
 revCheckOrCreatePlaylist();

 revExecutorService = Executors.newSingleThreadExecutor();
 }

 private void revInitDir(String revDirPath) {
 // Create a File object for the directory
 File revNestedDir = new File(revDirPath);

 // Check if the directory exists, if not, create it
 if (!revNestedDir.exists()) {
 boolean revResult = revNestedDir.mkdirs(); // mkdirs() creates the whole path
 if (revResult) {
 Log.e(REV_TAG, ">>> Directories created successfully.");
 } else {
 Log.e(REV_TAG, ">>> Failed to create directories.");
 }
 } else {
 Log.e(REV_TAG, ">>> Directories already exist.");
 }
 }

 private void revCheckOrCreatePlaylist() {
 File revPlaylistFile = new File(revOutDirPath, "rev_playlist.mpd");
 if (!revPlaylistFile.exists()) {
 // Create an empty playlist if it doesn't exist
 try {
 FileOutputStream revFos = new FileOutputStream(revPlaylistFile);
 revFos.write("".getBytes());
 revFos.close();
 } catch (IOException e) {
 Log.e(REV_TAG, ">>> Error creating initial rev_playlist : ", e);
 }
 }
 }


 private void revStartFFmpegProcess() {
 // Ensure revTempFile exists before processing
 if (revTempFile == null || !revTempFile.exists()) {
 Log.e(REV_TAG, ">>> Temporary file does not exist for FFmpeg processing.");
 return;
 }

 // FFmpeg command to convert the temp file to DASH format and append to the existing rev_playlist
 String ffmpegCommand = "-f rawvideo -pixel_format yuv420p -video_size 704x704 " + "-i " + revTempFile.getAbsolutePath() + " -c:v mpeg4 -b:v 1M " + "-f dash -seg_duration 1 -use_template 1 -use_timeline 1 " + "-init_seg_name 'init.m4s' -media_seg_name '$Number$.m4s' " + revOutDirPath + "/rev_playlist.mpd -loglevel debug";


 FFmpegKit.executeAsync(ffmpegCommand, session -> {
 ReturnCode returnCode = session.getReturnCode();
 if (ReturnCode.isSuccess(returnCode)) {
 // Optionally handle success, e.g., log or notify that the process completed successfully
 } else {
 Log.e(REV_TAG, ">>> FFmpeg process failed with return code : " + returnCode);
 }
 });
 }


 public void revStartCamera() {
 isRevRecording = true;

 ListenableFuture<processcameraprovider> revCameraProviderFuture = ProcessCameraProvider.getInstance(revContext);

 revCameraProviderFuture.addListener(() -> {
 try {
 ProcessCameraProvider revCameraProvider = revCameraProviderFuture.get();
 revBindPreview(revCameraProvider);
 revBindImageAnalysis(revCameraProvider);
 } catch (ExecutionException | InterruptedException e) {
 Log.e(REV_TAG, ">>> Failed to start camera : ", e);
 }
 }, ContextCompat.getMainExecutor(revContext));
 }

 private void revBindPreview(ProcessCameraProvider revCameraProvider) {
 CameraSelector revCameraSelector = new CameraSelector.Builder().requireLensFacing(CameraSelector.LENS_FACING_BACK).build();

 PreviewView previewView = ((Activity) revContext).findViewById(R.id.previewView);
 Preview preview = new Preview.Builder().build();
 preview.setSurfaceProvider(previewView.getSurfaceProvider());

 revCameraProvider.unbindAll();
 revCameraProvider.bindToLifecycle((LifecycleOwner) revContext, revCameraSelector, preview);
 }

 private void revBindImageAnalysis(@NonNull ProcessCameraProvider revCameraProvider) {
 ImageAnalysis revImageAnalysis = new ImageAnalysis.Builder().setTargetResolution(new Size(640, 480)) // Lower the resolution to reduce memory consumption
 .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST).build();

 revImageAnalysis.setAnalyzer(ContextCompat.getMainExecutor(revContext), this::revAnalyze);
 CameraSelector revCameraSelector = new CameraSelector.Builder().requireLensFacing(CameraSelector.LENS_FACING_BACK).build();

 revCameraProvider.bindToLifecycle((LifecycleOwner) revContext, revCameraSelector, revImageAnalysis);
 }

 @androidx.annotation.OptIn(markerClass = androidx.camera.core.ExperimentalGetImage.class)
 private void revAnalyze(@NonNull ImageProxy revImageProxy) {
 try {
 revProcessImageFrame(revImageProxy);
 } catch (Exception e) {
 Log.e(REV_TAG, ">>> Error processing revImage frame", e);
 } finally {
 revImageProxy.close(); // Always close the revImageProxy
 }
 }

 @androidx.annotation.OptIn(markerClass = androidx.camera.core.ExperimentalGetImage.class)
 private void revProcessImageFrame(@NonNull ImageProxy revImageProxy) {
 Image revImage = revImageProxy.getImage();
 if (revImage != null) {
 byte[] revImageBytes = revConvertYUV420888ToByteArray(revImage);
 revWriteFrameToTempFile(revImageBytes); // Write frame to a temporary file
 }
 revImageProxy.close(); // Close the ImageProxy to release the revImage buffer
 }

 private byte[] revConvertYUV420888ToByteArray(Image revImage) {
 Image.Plane[] planes = revImage.getPlanes();
 ByteBuffer revBufferY = planes[0].getBuffer();
 ByteBuffer revBufferU = planes[1].getBuffer();
 ByteBuffer revBufferV = planes[2].getBuffer();

 int revWidth = revImage.getWidth();
 int revHeight = revImage.getHeight();

 int revSizeY = revWidth * revHeight;
 int revSizeUV = (revWidth / 2) * (revHeight / 2); // U and V sizes are half the Y size

 // Total size = Y + U + V
 byte[] revData = new byte[revSizeY + 2 * revSizeUV];

 // Copy Y plane
 revBufferY.get(revData, 0, revSizeY);

 // Copy U and V planes, accounting for row stride and pixel stride
 int revOffset = revSizeY;
 int revPixelStrideU = planes[1].getPixelStride();
 int rowStrideU = planes[1].getRowStride();
 int revPixelStrideV = planes[2].getPixelStride();
 int rowStrideV = planes[2].getRowStride();

 // Copy U plane
 for (int row = 0; row < revHeight / 2; row++) {
 for (int col = 0; col < revWidth / 2; col++) {
 revData[revOffset++] = revBufferU.get(row * rowStrideU + col * revPixelStrideU);
 }
 }

 // Copy V plane
 for (int row = 0; row < revHeight / 2; row++) {
 for (int col = 0; col < revWidth / 2; col++) {
 revData[revOffset++] = revBufferV.get(row * rowStrideV + col * revPixelStrideV);
 }
 }

 return revData;
 }


 private void revWriteFrameToTempFile(byte[] revImageBytes) {
 revExecutorService.execute(() -> {
 try {
 // Create a new temp file for each segment if needed
 if (revTempFile == null || revFrameCount == 0) {
 revTempFile = File.createTempFile("vid_segment_", ".yuv", new File(revOutDirPath));
 }

 try (FileOutputStream revFos = new FileOutputStream(revTempFile, true)) {
 revFos.write(revImageBytes);
 }

 revFrameCount++;

 // Process after 60 frames (2 second for 30 fps)
 if (revFrameCount >= 60 && isRevRecording) {
 revStartFFmpegProcess(); // Process the segment with FFmpeg
 revFrameCount = 0; // Reset the frame count
 revTempFile = null; // Reset temp file for the next segment
 }

 } catch (IOException e) {
 Log.e(REV_TAG, ">>> Error writing frame to temp file : ", e);
 }
 });
 }

 public void revStopCamera() {
 isRevRecording = false;
 if (revTempFile != null && revTempFile.exists()) {
 revTempFile.delete(); // Clean up the temporary file
 revTempFile = null; // Reset the temp file reference
 }
 }
 }


 package rev.ca.rev_media_dash_camera2;

 import android.os.Bundle;

 import androidx.appcompat.app.AppCompatActivity;

 public class MainActivity extends AppCompatActivity {
 private RevCameraCapture revCameraCapture;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 revCameraCapture = new RevCameraCapture(this);
 }

 @Override
 protected void onStart() {
 super.onStart();
 try {
 revCameraCapture.revStartCamera();
 } catch (Exception e) {
 e.printStackTrace();
 }
 }

 @Override
 protected void onStop() {
 super.onStop();
 revCameraCapture.revStopCamera(); // Ensure camera is stopped when not in use
 }
 }
</processcameraprovider>

-
RTSP to HLS via FFMPEG, latency issues
28 juin 2024, par Pabl0The following are all the steps that I took to render a RTSP stream in my web app :


How to display RTSP stream in browser using HLS


Situation and Problem
You have an RTSP stream that you want to display in a browser using HLS (HTTP Live Streaming). However, when you try to play the RTSP stream in the browser using hls.js, you encounter the error "Unsupported HEVC in M2TS found." This error indicates that the HLS stream uses the HEVC (H.265) codec, which is not widely supported by many browsers and HLS players, including hls.js.


The most reliable solution is to transcode the stream from H.265 to H.264 using FFmpeg, which is more broadly supported. Here's how to transcode the stream :


Step 1 : Transcode the Stream Using FFmpeg


Run the following FFmpeg command to transcode the RTSP stream from H.265 to H.264 and generate the HLS segments :


ffmpeg -i rtsp://192.168.144.25:8554/main.264 -c:v libx264 -c:a aac -strict -2 -hls_time 10 -hls_list_size 0 -f hls C:\path\to\output\index.m3u8


c:v libx264 sets the video codec to H.264.


c:a aac sets the audio codec to AAC.


hls_time 10 sets the duration of each segment to 10 seconds.


hls_list_size 0 tells FFmpeg to include all segments in the playlist.


f hls specifies the output format as HLS.


C :\path\to\output\ is the directory where the HLS files will be saved. Ensure that C :\path\to\output\ is the directory where you want to save the HLS files.


Step 2 : Verify the HLS Files


After running the FFmpeg command, verify that the following files are generated in the output directory :


index.m3u8 (HLS playlist file)


Multiple .ts segment files (e.g., index0.ts, index1.ts, etc.)


Step 3 : Serve the HLS Files with an HTTP Server


Navigate to the directory containing the HLS files and start the HTTP server :


cd C :\path\to\output
python -m http.server 8000
Step 4 : Update and Test the HTML File
Ensure that hls_test.html file is in the same directory as the HLS files and update it as needed :


hls_test.html :




 
 
 
 
 
 
 <h1>HLS Stream Test</h1>
 <button>Play Stream</button>
 <video controls="controls" style="width: 100%; height: auto;"></video>
 <code class="echappe-js"><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>&#xA; document&#xA; .getElementById(&#x27;playButton&#x27;)&#xA; .addEventListener(&#x27;click&#x27;, () => {&#xA; const video = document.getElementById(&#x27;video&#x27;);&#xA; if (Hls.isSupported()) {&#xA; const hls = new Hls();&#xA; hls.loadSource(&#x27;http://localhost:8000/index.m3u8&#x27;);&#xA; hls.attachMedia(video);&#xA; hls.on(Hls.Events.MANIFEST_PARSED, function () {&#xA; video.play().catch((error) => {&#xA; console.error(&#xA; &#x27;Error attempting to play:&#x27;,&#xA; error,&#xA; );&#xA; });&#xA; });&#xA; hls.on(Hls.Events.ERROR, function (event, data) {&#xA; console.error(&#x27;HLS Error:&#x27;, data);&#xA; });&#xA; } else if (&#xA; video.canPlayType(&#x27;application/vnd.apple.mpegurl&#x27;)&#xA; ) {&#xA; video.src = &#x27;http://localhost:8000/index.m3u8&#x27;;&#xA; video.addEventListener(&#x27;canplay&#x27;, function () {&#xA; video.play().catch((error) => {&#xA; console.error(&#xA; &#x27;Error attempting to play:&#x27;,&#xA; error,&#xA; );&#xA; });&#xA; });&#xA; } else {&#xA; console.error(&#x27;HLS not supported in this browser.&#x27;);&#xA; }&#xA; });&#xA; </script>
 



Step 5 : Open the HTML File in Your Browser


Open your browser and navigate to :


http://localhost:8000/hls_test.html


Click the "Play Stream" button to start playing the HLS stream. If everything is set up correctly, you should see the video playing in the browser.


Conclusion


By transcoding the RTSP stream from H.265 to H.264 and serving it as an HLS stream, you can display the video in a browser using hls.js. This approach ensures broader compatibility with browsers and HLS players, allowing you to stream video content seamlessly.


PART 2 : Add this method to the react app


We are assuming that the ffmpeg command is running in the background and generating the HLS stream. Now, we will create a React component that plays the HLS stream in the browser using the video.js library.


If not, please refer to the previous steps to generate the HLS stream using FFmpeg. (steps 1-3 of the previous section)


Step 1 : Create the Camera Component


import { useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const Camera = ({ streamUrl }) => {
 const videoRef = useRef(null);
 const playerRef = useRef(null);

 const handlePlayClick = () => {
 const videoElement = videoRef.current;
 if (videoElement) {
 playerRef.current = videojs(videoElement, {
 controls: true,
 autoplay: false,
 preload: 'auto',
 sources: [
 {
 src: streamUrl,
 type: 'application/x-mpegURL',
 },
 ],
 });

 playerRef.current.on('error', () => {
 const error = playerRef.current.error();
 console.error('VideoJS Error:', error);
 });

 playerRef.current.play().catch((error) => {
 console.error('Error attempting to play:', error);
 });
 }
 };

 return (
 
 <button>Play Stream</button>
 
 
 );
};

export default Camera;


Note : This component uses the video.js library to play the HLS stream. Make sure to install video.js using npm or yarn :


npm install video.js

Step 2 : Use the Camera Component in Your App


Now, you can use the Camera component in your React app to display the HLS stream. Here's an example of how to use the Camera component :


<camera streamurl="http://localhost:8000/index.m3u8"></camera>

Note : see we are pointing to the HLS stream URL generated by FFmpeg in the previous steps.


Step 3 : Create the Cors Proxy Server and place it where the HLS files are being stored.


from http.server import HTTPServer, SimpleHTTPRequestHandler
import socketserver
import os

class CORSRequestHandler(SimpleHTTPRequestHandler):
 def end_headers(self):
 if self.path.endswith('.m3u8'):
 self.send_header('Content-Type', 'application/vnd.apple.mpegurl')
 elif self.path.endswith('.ts'):
 self.send_header('Content-Type', 'video/MP2T')
 super().end_headers()

if __name__ == '__main__':
 port = 8000
 handler = CORSRequestHandler
 web_dir = r'C:\Video_cam_usv'
 os.chdir(web_dir)
 httpd = socketserver.TCPServer(('', port), handler)
 print(f"Serving HTTP on port {port}")
 httpd.serve_forever()


Note : Change the web_dir to the directory where the HLS files are stored.


Also, note that the server is sending the correct MIME types for .m3u8 and .ts files. For example :


.m3u8 should be application/vnd.apple.mpegurl or application/x-mpegURL.
.ts should be video/MP2T.


Step 4 : Start the CORS Proxy Server


Open a terminal, navigate to the directory where the CORS proxy server script is located (same as the HLS files are being saved), and run the following command :


python cors_proxy_server.py


This will start the CORS proxy server on port 8000 and serve the HLS files with the correct MIME types.


Step 5 : Start the React App
Start your React app using the following command :


npm run dev

I have tried everything above (it´s my own doc to keep with the steps Ive taken so far) and I get the stream to render on my web app but the latency is very high, at least of 5-10 secs, how can i make it be real time or close to that ?


-
9 Form Optimisation Tips to Convert More Visitors
15 février 2024, par ErinForms might seem boring — that is, until you realise how powerful they are.
No forms mean no leads.
No leads mean no sales.
No sales means you’ll run out of business.
So, what do you do ?
Optimise forms to land more leads.
They’re a critical part of the sales funnel.
Forms have many different purposes and can be used to :
- Contact a company
- Sign up for a newsletter
- Request a demo
- Start a free trial
- And more
If you want to get more leads (and ultimately more sales), then you need to optimise your forms.
This guide will show you exactly how to do that (so you can start getting more conversions today).
What is form optimisation ?
Before we dive into form optimisation, let’s back up a bit.
Form conversion is our primary focus.
Your form conversion rate is the percentage of visitors who submit a form divided by the total number of visitors who started the form times one hundred.
For example, if 5,000 people started filling out your form this month and 350 submitted the form, the conversion rate would be :
350 / 5,000 x 100 = 7%
So, what’s form optimisation ?
It’s simply improving your forms to increase conversion rates.
For most people, form conversion is all about increasing leads.
Before you begin optimising your forms, it’s important you understand what’s good (and what’s not good) when it comes to form conversions.
The average form conversion rate across all industries is 2.9%.
This means you should expect about 3 out of every 100 visitors who start your form to submit it.
If your form conversion is lower — or hovering around this number — then it’s important to start optimising now.
With Matomo, you can track your form conversions with Matomo Form Analytics. Gain powerful insights into how your visitors interact with your forms with our intuitive dashboard.
Why it’s important to optimise your forms
Most people hear the word “forms” and think it’s boring.
But forms are the doorway to leads.
If you want to generate more sales, then you need to generate great forms.
Here are five reasons you need to optimise your forms today :
1. Improve conversions
Form optimisation is really just conversion optimisation.
But, instead of optimising and improving your site to directly improve sales conversions, you’re increasing lead conversions.
Every smart website owner uses forms to draw people in further.
The reality is that most of your website visitors will never return to your site.
This means you need to do everything you can to grab their contact information so you can continue marketing to them day in and day out.
Otherwise, you’ll lose them forever.
When you know how to optimise your forms, you’ll be able to get a higher percentage of form viewers to fill it out.
Higher conversions mean you get more leads, more customers, and ultimately more revenue.
2. Capture more leads
When you can increase your form conversion rate from 1% to 2%, it may seem insignificant.
What’s a measly percentage point in conversions ?
It’s a lot.
When you’re dealing with traffic in the tens or hundreds of thousands each month, an increase in conversion rate by a whole percentile is massive.
Let’s say you take your conversion rate from 2% to 3% on your form, and you have 70,000 visitors view the form each month.
Well, if 1,400 people used to sign up to your email list each month at a 2% conversion rate, then at a 3% conversion rate, you’d get 2,100 new email signups every month.
That’s a major difference.
When you can improve your signup forms, you improve your lead generation (which is conversion rate optimisation). And the more leads you have, the more sales you’ll make in the long run.
3. Get the most out of your traffic
If your forms don’t perform well, then you’re wasting your time (and your traffic).
By analysing your form data, you can quickly see what’s working and what’s not so you can optimise and improve the user experience (and your forms).
For most people, this means getting more form viewers to fill out the form with their email and name.
If 50,000 people visit your site each month, but only 1% of them fill out your form, you’re only getting 500 email signups per month.
Rather than paying money to generate more traffic, why not just work on improving your website by implementing a better form ?
If you can increase your form conversion rate to 2%, you will immediately go from 500 new subscribers per month to 1,000 per month.
4. Spend less on acquisition
If you’re able to get more form signups without having to generate more traffic, you just solved a pricey problem : acquisition costs.
If you can now get 1,000 of your 50,000 visitors to sign up to your email list through a better form, then you doubled your signups.
But that’s not all. You just cut your acquisition costs in half.
If you spend $2,000 per month on acquisition but you’re able to get twice as many leads, then your acquisition costs are at 50% of what they used to be.
This means you can pay the same amount but get twice as many leads.
Or, you can pour even more money into acquisition since it’s now twice as effective so you can fuel growth even more.
5. Grow revenue
Forms generate revenue. It may not be direct (although, in some cases, it is).
But, forms will lead to sales.
By placing optimised forms throughout your website at the right places, you will be able to capture a percentage of your visitors as leads, which means you’ll eventually make more sales.
13 tips to optimise your forms for more conversions
Now that you know what forms can do and why they’re important to grow your business, it’s time to dive into the best practices.
Follow these 13 tips to ensure you’re getting the most out of your forms :
1. Set form goals
Your forms are hopeless without a goal.
Before you set up a form on your website, ask yourself, “What am I trying to accomplish with this form ?”
It could be :
- Encouraging customers to reach out through a contact form
- To get visitors to leave feedback on your product/service
- Convert visitors into leads by giving you their email
No matter what your goal is, make sure you’re clear on it ; otherwise, you won’t be as targeted and specific with your forms.
Matomo Goals helps you set specific objectives for your marketing campaigns so you’re able to easily track conversions. Whether you’re looking to capture feedback or generate leads, you can leverage Matomo to see what’s working and what’s not in seconds.
2. Remove or improve fields with high average time spent and high drop-off rates
Delving into your Form Analytics provides invaluable insights into individual field performance. A crucial metric to focus on is the Average Time Spent.
If a field stands out with a significantly higher average time spent and experiences a high drop-off rate compared to others in the form, it’s a clear indicator that it’s causing frustration or confusion for your visitors.
To address this, consider improving the field by converting it into a dropdown menu for easier completion or providing helpful text prompts. Alternatively, if the field isn’t essential, you might opt to remove it altogether.
When you cut down on time spent and drop-offs, you’ll see your conversion rates go up.
Here’s a standout example from Matomo’s Form Analytics feature : the “Overview of your needs” field is taking on average 1 minute and 37 seconds to complete.
To streamline this, we might want to consider a simple fix like converting it into a dropdown menu. This change would offer visitors a clearer and quicker way to select from options.
Likewise, we observe that the “Overview of your needs” field experiences the highest drop-off rate, totaling 1,732 drop-offs.
With Form Analytics, it becomes clear what is needed to optimise forms and increase conversions.
Try Matomo for Free
Get the web insights you need, without compromising data accuracy.
3. Start with the CTA
When crafting and optimising your forms, you need to start with the end in mind. That’s why you need to start with your business goals.
What are you trying to do with this form ? If you want to capture more emails, then make sure that’s very clear with the call to action (CTA).
Start building your form by beginning with the CTA.
For example : “Sign Up Now.”
Once you have the action you want your potential customers to take, place it on the form. Then, you can work towards crafting the rest of the form.
4. Put it above the fold
If your visitors can’t find your form, they won’t fill it out. It’s plain and simple.
You need to make sure your form is visible above the fold. This is the part of the screen that’s visible to your visitors once they land on your site (without needing to scroll down).
Always remember to test this out on both desktop and mobile to ensure anyone (using laptops or a mobile device) will see your form upon landing on your site or page.
Don’t forget about your mobile users. More people view mobile forms than desktop forms.
5. Put a CTA in the headline
Your form needs to be clear.
You have 1-3 seconds to communicate with your site visitors what your form is all about.
For example, if you’re trying to get email signups with a lead magnet, then tell them the benefit quickly and concisely with a CTA in the headline, like this one :
“Subscribe to Save 10% On Your Next Order”
This is a great example of a headline-CTA combo that tells the visitor what to do and what they get out of it.
Matomo’s behaviour analytics features like Session Recordings let you see where visitors are clicking and spending time. For example, if people are reading the headline, but not scrolling down to read the form, it’s probably a sign you need to test a different headline.
6. Ensure you have the right fields
Your form fields matter.
What information are you trying to capture from your audience ?
One beginner mistake people make is requiring too much information and including many fields in a form.
You want to get as much data on your audience as possible, right ? Wrong.
If you ask for too much information, people won’t fill it out, and it will harm the user experience. You need to make it super easy.
If you want more emails to grow your list, then stick with someone’s email (and possibly their name as well). One line for a name. One line for an email address. Keep it simple.
If you’re after SMS as well, don’t include it on the form. Instead, create a two-step form that pops up an SMS form after someone fills out the email form.
Multi-step forms enable you to capture those emails easily (and still get a percentage to fill out the second form) without making it seem like too much work for your audience.
Another path is to include optional fields (that users don’t have to fill out to click submit).
Just keep in mind that shorter forms perform better than longer ones.
If you make them too long, it feels like work for the user and will lead to lower completion rates.
7. Always capture email address
If you’re unsure of what information to capture (i.e. name, number, email, occupation, age, etc.), always stick to email.
Email is used by over 4 billion people every single day, and it’s not going away anytime soon.
When determining which fields to include, start with email.
8. Test different buttons and copy
You need to track your form performance if you want to get the best conversions.
One of the best form elements to start testing is your button copy.
In most cases, form completion buttons will have the word “submit” on them.
But you don’t have to stick with this word.
You can (and should) experiment with different submit button copy.
Here are a few examples of replacement words for your action button :
- Complete
- Sign Up
- Join now
- Get started
Remember to experiment with your action button. Try a different copy. Just keep it short.
You can also try A/B testing your form by experimenting with different colours, copy, and more.
In the example above from Matomo’s A/B testing feature, we found that changing the wording of our call to action made a big difference. The new “Apply Now” button performed much better, with a 3.6% conversion rate compared to just 1.7% for the original one.
Try Matomo for Free
Get the web insights you need, without compromising data accuracy.
9. Test static vs. popup
There are various types of online forms.
The most common is the static form that just sits in one place and is always there.
Another popular form type is the popup.
This is where a form will appear based on a certain trigger like :
- A certain amount of time on page
- A certain distance scrolling down the page
- If someone is a new or returning visitor
Depending on the form software you use, you may be able to add conditional logic.
Start tracking your form conversions
Form optimisation is all about conversion rate optimisation.
If you want to increase your conversions and generate more revenue, then you need to test out different forms and know how to optimise them.
With Matomo, you can easily track, manage, and A/B test your forms so you can improve your conversions.
Try Matomo free for 21 days. No credit card required.
Try Matomo for Free
21 day free trial. No credit card required.
Syndiquer tout le site
